Vue进阶（五十九）：splice() 与 slice() 详解

---

一、前言

项目开发过程中，数组操作十分常见。splice() 与 slice() 仅相差一个字符，具体有何区别，详参下文。

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

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

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

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

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

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() 方法将数组部分的副本返回到新的数组对象中。这个对象是从 start 到 end 选择的。需要注意的是，此方法不会修改原始数组。此外，如果向其中一个数组添加新元素，则另一个数组不会受到影响。

使用方法:

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

其中，start 是一个从 0 开始的索引，用于开始复制数组的一部分。如果未定义，start 的默认值为 0。如果 start 大于数组的索引范围， slice() 方法将返回一个空数组。

此外，start 还可以使用负索引。 slice(-1) 提取数组的最后一个元素。

end 参数是可选的。如果 slice() 函数中只有一个参数，那就是 start。如果省略， slice() 方法从数组的末尾开始提取。

如果end 大于数组的长度，slice() 一直提取到数组的末尾，只是在它被省略的情况下。

end 是提取此索引之前的元素，不包括索引 end 在内。因此，索引的最后一个元素不包含在数组的副本中。例如，slice(1,3) 提取是数组的第二个和第三个元素，即从数组的索引 1 开始，包含索引 1 的值到索引 3 之间的数组，但不包含索引为 3 的元素。

const arrNumbers = [1,3,5,6,7];
console.log(arrNumbers.slice(0, 3)); // [ 1, 3, 5 ]

这意味着复制数组 arrNumbers 从索引 0 开始到索引 3 之间的元素，不包含索引为 3 的元素 。

3.1 应用示例

3.1.1 复制数组

第一个示例是 slice() 函数的基本功能，没有参数的数组复制原始数组。有时，可能想要更新数组中的某些元素。但是，可能需要保护原始数组中的元素，可以使用 slice()创建原始数组的浅复制。

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice();
console.log(copyNumbers); // [ 1, 2, 3, 4, 5, 6 ]
copyNumbers[1] = 0;
console.log(copyNumbers); // [ 1, 0, 3, 4, 5, 6 ]
console.log(arrNumbers); // [ 1, 2, 3, 4, 5, 6 ]

3.1.2 从索引 n 开始的子数组

slice() 方法的第二个示例是复制从数组索引 n 开始的子数组。

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice(2);
console.log(copyNumbers); // [ 3, 4, 5, 6 ]

也可以复制数组最后 n 位元素，就是使用 -n 作为参数，如下：

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice(-2);
console.log(copyNumbers); // [ 5, 6 ]

3.1.3 类数组对象转换为数组

可以使用 slice() 方法将看起来像数组的对象转换为数组。例如，如下代码片段：

function transformToArray() {
    return Array.prototype.slice.call(arguments);
}

const newArray = transformToArray("1", "2", "3", "4");
console.log(newArray); // [ '1', '2', '3', '4' ]

以上代码片段可以用来定义可变参数的函数。

3.1.4 将 NodeList 转换为数组

NodeList 对象是从文档中提取的节点集合，可以使用方法 querySelectorAll() 方法返回节点列表对象。例如，可以选择HTML文档中的所有<p>节点，可以使用 slice() 将选定的节点列表转换为数组。

const elemP = document.querySelectorAll("p");
const elemNodes = Array.prototype.slice.call(elemP);
console.log(elemNodes);

3.1.5 替换字符串中的特定索引

可以使用 slice() 函数创建替换函数，且不改变原数组。

String.prototype.append = function (index, value) {
    return `${this.slice(0, index)}${value}${this.slice(index)}`;
};

const testString = "新年";
console.log(testString.append(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等》