JavaScript 数组 slice() 方法的 3 个实用场景

JavaScript Array Slice Array.prototype 对象提供了 slice() 方法，它允许您提取数组的子集元素并将其添加到新数组中。在本教程中，我们将向您展示 JavaScript 数组 slice() 方法的实际应用。

JavaScript 数组 slice() 方法介绍

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

slice(start, stop);

start 和 stop 参数都是可选的。

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

stop 参数顾名思义，是结束提取的零基索引。slice() 方法最多提取到 stop-1。这意味着 slice() 方法不将 stop 位置的元素包含在新数组中。如果您省略 stop 参数，则 slice() 方法将使用数组的长度作为 stop 参数。

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

克隆数组

slice() 用于克隆数组，如以下示例所示

var numbers = [1,2,3,4,5];
var newNumbers = numbers.slice();Code language: JavaScript (javascript)

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

复制数组的一部分

slice() 方法的典型用法是复制数组的一部分，而不修改源数组。以下是一个示例

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

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

将类数组对象转换为数组

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

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

var classification = toArray('A','B','C');

console.log(classification); // ["A", "B", "C"]
Code language: JavaScript (javascript)

在此示例中，toArray() 函数的 arguments 是一个类数组对象。在 toArray() 函数内部，我们调用了 slice() 方法将 arguments 对象转换为数组。

传递给 toArray() 函数的每个参数都将成为新数组的元素。

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

var p = document.querySelectorAll('p');
var list = Array.prototype.slice.call(p);
Code language: JavaScript (javascript)

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

有时，您会看到以下语法

var list = [].slice.call(document.querySelectorAll('p'));
Code language: JavaScript (javascript)

在此示例中，我们实例化了一个空数组 []，并通过空数组间接访问了 Array.prototype 方法的 slice() 方法。其效果与直接使用 Array.prototype 相同。

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

本教程对您有帮助吗？