js Array.slice的8种不同用法示例

下面就是关于“js Array.slice的8种不同用法示例”的完整攻略：

什么是Array.slice()方法？

Array.slice()方法是一个具有很强实用性的JavaScript数组方法，它可以把数组中的某一部分或全部内容复制到一个新数组中。

基本语法

array.slice(start, end)

• start：必须，整数值。规定从哪里开始选取，如果是负数，则是从数组尾部开始计算。
• end：可选，整数值。规定到哪里结束选取，如果是负数，则是从数组尾部开始计算。如果没有指定该参数，则提取从 start 到数组结尾的所有元素。

用法示例

用法一：复制整个数组

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();
console.log(arr2);

输出结果：

[1, 2, 3]

使用slice()方法不传任何参数就可以复制整个数组。

用法二：提取一个数组的部分

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.slice(1, 4);
console.log(arr2);

输出结果：

[2, 3, 4]

slice()方法可以从指定的开始索引处提取元素，到指定的结束索引处（不包括结束索引处），并将其放入一个新数组中。

用法三：提取最后n个元素

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.slice(-3);
console.log(arr2);

输出结果：

[3, 4, 5]

使用负数索引可以从数组尾部开始计算。所以，上例中的-3表示从倒数第三个元素开始，一直复制到数组结尾。

用法四：生成包含重复元素的数组

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();
for (let i = 0; i < 2; i++) {
    arr1.push(4);
    console.log(arr1.slice());
}

输出结果：

[1, 2, 3, 4]
[1, 2, 3, 4, 4]

slice()方法可以把一个包含重复元素的数组复制到一个新数组中。所以，在上例中，arr2是原始数组的一个副本，后续的代码向原始数组中添加了一个元素后，通过slice()方法再复制一个新数组，就会发现arr2不会受到影响。

用法五：生成空数组

let arr1 = [1, 2, 3];
let arr2 = arr1.slice(0, 0);
console.log(arr2);

输出结果：

[]

slice()方法不传参或传入两个参数其中一个为0时会返回一个空数组。

用法六：复制类数组对象到数组中

let argsObj = {0: "foo", 1: "bar", length: 2};
let arr = [].slice.call(argsObj);
console.log(arr);

输出结果：

["foo", "bar"]

当然，并不是所有类数组对象都可以调用数组方法，但是事实上就是，arguments对象、DOM节点集合、表单元素集合等等都属于类数组对象。有时我们需要把一个类数组对象转化为一个数组，此时就可以通过[].slice.call()的形式调用slice()方法，从而实现类数组对象到数组的转化。

用法七：复制字符串到字符数组中

let str = 'Hello World!';
let arr = Array.prototype.slice.call(str, 0);
console.log(arr);

输出结果：

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]

和上例一样，我们可以把一个字符串转化为一个字符数组，其中的思想就是借助[].slice.call()来实现。

用法八：复制一个不变的对象

let obj = {a: 0, b: 1};
let arr = Array.prototype.slice.call(obj);
console.log(arr);

输出结果：

[{a: 0, b: 1}]

通过上面的示例可以发现，使用slice()方法可以复制一个不变的对象。