ES数组操作：splice() 实现数组删除、替换、增加指定元素

一、前言

注：该方法会改变原始数组。

ES6从数组中删除指定元素，然后返回被删除的项目。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

arr.splice(arr.findIndex(item => item.id === data.id), 1)

二、splice实现删除、替换、新增

splice(index,len,[item]) 

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值。

• index:数组开始下标
• len: 替换/删除的长度
• item:替换的值，删除操作的话, item为空

如：arr = ['a','b','c','d']

• 删除 ---- item不设置

arr.splice(1,1) //['a','c','d'] 删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变
arr.splice(1,2) //['a','d'] 删除起始下标为1，长度为2的一个值，len设置的2

• 替换 ---- item为替换值

arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
arr.splice(1,2,'ttt') //['a','ttt','d'] 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

• 添加 ---- len设置为0，item为添加值

arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下标为1处添加一项‘ttt’

三、slice

slice() 方法可从已有的数组中返回选定的元素，执行后原数组并未发生改变。
使用方法:

arr.slice(start,end); // start为初始位置,end为结尾位置,返回的结果是从start到end(不取)的新数组
arr.slice(start); // 选取从start开始直至最后一个元素

例子：

var arr1 = [1,2,3,4];
console.log(arr1.slice(1)); //[2, 3, 4]
console.log(arr1.slice(1,2));//[2]
console.log(arr1);//[1,2,3,4]

解析: arr1.slice(1)没有指定结尾位置，则默认选取至最后一个元素(注:最后一个元素会被选)。

arr1.slice(1,2) 指定从1开始选取,到2结束,但是不选择2。

注意：和splice()不一样，slice()执行后原数组并未发生改变。

四、拓展阅读

• 《Vue进阶（五十七）：ES数组操作：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()》
• 《Vue进阶（幺叁贰）：ES数组操作：数组合并》
• 《Vue进阶（八十）：ES数组操作：push、pop、shift、unshift、splice、delete、concat、split、sort、reverse、slice、map等》