数组06— slice() ：复制数组元素

在上节，我们学习了如何使用 JavaScript Array 的 splice() 方法删除现有元素、插入新元素和替换数组中的元素，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组05— splice()：删除、插入和替换》进行学习。

那么，在今天的教程中，我们一起来学习JavaScript 数组 slice() 方法的实际用途。

Array.prototype 对象提供了 slice() 方法，该方法允许您提取数组的子集元素并将它们添加到新数组中。

JavaScript Array slice() 方法介绍

slice() 方法接受两个可选参数，如下所示：

slice(start, stop);

start和stop参数都是可选的。

start 参数确定从零开始提取的索引。如果start是undefined， slice() 从 0 开始。

stop参数，顾名思义，是一个从零开始的索引，在该索引处结束提取。slice() 方法提取到 stop-1。这意味着 slice() 方法不包含新数组中停止位置的元素。如果省略 stop 参数，slice() 方法将使用数组的长度作为 stop 参数。

slice() 返回一个包含原始数组元素的新数组。重要的是要记住，slice() 方法只执行元素到新数组的浅拷贝。此外，它不会更改源数组。

克隆一个数组

slice() 用于克隆一个数组，如下例所示：

var numbers = [1,2,3,4,5];var newNumbers = numbers.slice();

在此示例中，newNumbers 数组包含 numbers 数组的所有元素。

复制数组的一部分

slice() 方法的典型用途是在不修改源数组的情况下复制数组的一部分。下面是一个例子：

var colors = ['red','green','blue','yellow','purple'];var rgb = colors.slice(0,3);console.log(rgb); // ["red", "green", "blue"]

rgb 数组包含colors数组的前三个元素。源阵列colors保持不变。

将类数组对象转换为数组

slice() 方法用于将类数组对象转换为数组。例如：

function toArray() {  return Array.prototype.slice.call(arguments);}
var classification = toArray('A','B','C');
console.log(classification); // ["A", "B", "C"]

在这个例子中， toArray() 函数的参数是一个类似数组的对象。在 toArray() 函数内部，我们调用 slice() 方法将参数对象转换为数组。

我们传递给 toArray() 函数的每个参数都将是新数组的元素。

您经常看到的另一个典型示例是将 NodeList 转换为数组，如下所示：

var p = document.querySelectorAll('p');var list = Array.prototype.slice.call(p);

在这个例子中，首先，我们使用document.querySelectorAll()来获取pHTML 文档的所有P的节点。这个方法的结果是一个NodeList对象，它是一个类似数组的对象。然后，我们调用slice()方法将NodeList对象转换为数组。

有时，您会看到以下语法：

var list = [].slice.call(document.querySelectorAll('p'));

在这个例子中，我们实例化了一个空数组[]，并通过空数组间接访问了Array.prototype方法的slice()方法。效果和直接使用 Array.prototype 一样。

在今天的教程中，我们学习了如何使用 JavaScript 数组 slice() 方法复制整个数组或数组的子集，并将类数组对象转换为数组。