天下无坑

天下无坑


数组与indexOf()与splice增删改

>Array.prototype.indexOf() 方法可返回数组中某个指定的元素位置。 该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。

不用遍历匹配ID,轻松实现数组元素的 删除 修改 等操作

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)

> 注意!!!在v-for 中,应使用items的id作为:key的绑定值,否则总是删除最后一个

// 实例
<ul>
<li v-for="d in items" :key="d.id">
{{d.n}}
</li>
</ul>

页面列表

ITEM_HTML