数组与indexOf()与splice增删改
<blockquote>
<p><strong><code>Array.prototype.indexOf()</code></strong> 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。</p>
</blockquote>
<h4>不用遍历匹配ID,轻松实现数组元素的 <code>删除</code> <code>修改</code> 等操作</h4>
<pre><code class="language-javascript">let items = [{id:1,n:"n1"},{id:2,n:"n2"},{id:3,n:"n3"}];
let item = items[2]; //查询值必须是对数组的浅复制
// let item = {v:2,n:"n2"} //这种方式是查找不到的
//用item做indexOf的参数,可以得到item在数组items中的索引值
console.log('index',items.indexOf(item));
//修改操作 item的值改变了,但索引值仍不变
items.splice(items.indexOf(item), 1, {id:4,n:"n4"});
console.log('update',items);
//删除操作
items.splice(items.indexOf(item), 1);
console.log('delete',items)
//末尾追加操作
items.splice(items.length, 0, {id:100,n:"n100"});
console.log('create',items)</code></pre>
<blockquote>
<p><strong>注意!!!在v-for 中,应使用items的id作为:key的绑定值,否则总是删除最后一个</strong></p>
</blockquote>
<pre><code class="language-html">// 实例
<ul>
<li v-for="d in items" :key="d.id">
{{d.n}}
</li>
</ul>
</code></pre>