JavaScript 数组方法 slice() 的 5 个示例_复制数组

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

语法

​slice()​​ 方法的参数是数组的开始和结束索引。

start

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

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

end

​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 ]

JavaScript 数组方法 slice() 的 5 个示例_ECMAScript 6_02

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

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 ]

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. 类数组对象转换为数组

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

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

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

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

4. 将 NodeList 转换为数组

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

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

5. 替换字符串中的特定索引

可以使用 ​​slice()​​ 函数创建替换函数。

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

const testString = "新年";
console.log(testString.append(2, "快乐")); // 新年快乐

总结

学习 JavaScript 内置函数的使用方法和示例可以提高编码技能,扩展编码思维,增加更多解决问题的方法。​​slice()​​ 是数组中非常有用的内置函数。