使用 ES6/7/8/9/10 中的 Array.slice() 方法

Array.slice() 是一个 JavaScript 数组方法，用于从给定的数组中返回一个新数组，包含原始数组的一部分。在 ES6/7/8/9/10 中，Array.slice() 方法不仅仅可以用来复制数组，还具有一些新特性。

基本用法

基本用法是返回从起始索引到结束索引（不包括结束索引）的元素。起始索引是第一个要返回的元素的索引，而结束索引是第一个不要返回的元素的索引。

示例代码：

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'peach'];

console.log(fruits.slice(1, 3)); // Output: ["banana", "orange"]
console.log(fruits.slice(2)); // Output: ["orange", "grapefruit", "peach"]
console.log(fruits.slice(-2)); // Output: ["grapefruit", "peach"]

新特性

省略了第二个参数

在 ES2015（ES6）之前，Array.slice() 方法必须接受两个参数。在 ES2015（ES6）之后，可以省略第二个参数。如果省略第二个参数，则返回从起始索引到数组末尾的元素。

示例代码：

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'peach'];

console.log(fruits.slice(2)); // Output: ["orange", "grapefruit", "peach"]

切片数组复制

使用 Array.slice() 方法可以轻松地复制一个数组。这可以通过将数组的起始索引设置为 0 并省略第二个参数来实现。

示例代码：

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'peach'];
const copiedFruits = fruits.slice(0);

console.log(copiedFruits); // Output: ["apple", "banana", "orange", "grapefruit", "peach"]

负数索引

在 ES2016（ES7）中，Array.slice() 方法开始支持负数索引，这可以使切片从末尾开始。

示例代码：

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'peach'];

console.log(fruits.slice(-2)); // Output: ["grapefruit", "peach"]
console.log(fruits.slice(1, -1)); // Output: ["banana", "orange", "grapefruit"]

使用展开运算符

在 ES2018（ES9）中，可以使用展开运算符 ... 来将数组中的元素复制到另一个数组中，相当于使用 Array.slice() 方法复制整个数组。

示例代码：

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'peach'];
const copiedFruits = [...fruits];

console.log(copiedFruits); // Output: ["apple", "banana", "orange", "grapefruit", "peach"]

切片字符串

使用 Array.slice() 方法可以轻松地从字符串中提取子字符串。因为字符串可以看作是一个字符数组，所以可以像对待数组一样使用 Array.slice() 方法。

示例代码：

const sentence = "The quick brown fox jumps over the lazy dog.";

console.log(sentence.slice(0, 3)); // Output: "The"
console.log(sentence.slice(-4)); // Output: "dog."

总结

Array.slice() 方法是 JavaScript 数组的一个强大特性。通过理解基本用法和 ES6/7/8/9/10 中的新特性，我们可以更好地利用 Array.slice() 方法。希望本文可以帮助你了解 Array.slice() 方法的一切，并指导你在日常工作中使用这个方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64678133968c7c53b07e37f6