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

前言

JS数组slice方法是JS语言中最强大、最常用的内建函数之一。

随着React和其他面向功能的JavaScript实践的兴起，它变得越来越重要，原因有两个:

JavaScript 数组slice方法符合这两个标准。

slice方法可以在不修改原始列表的情况下创建列表子集的浅拷贝。因此，它为编写函数式 JS 提供了一个关键的构建块。

在这篇文章中，我们将通过实例来掌握slice方法，探索它的8种不同用法。

注意:slice 方法不要与splice方法混淆，splice方法会修改原始数组。

slice 工作原理

在深入研究一些更高级的用法之前，让我们看一下slice方法的基础知识。

如MDN文档，slice 是数组上的一个方法，它最多有两个参数:

arr.slice([begin[, end]])

begin

从该索引处开始提取原数组中的元素,如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 begin，则 slice 从索引 0 开始。

end

在该索引处结束提取原数组元素（从0开始）。slice会提取原数组中索引从 begin 到 end 的所有元素（包含begin，但不包含end）。

slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。

如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

如果 end 被省略，则slice 会一直提取到原数组末尾。如果 end 大于数组长度，slice 也会一直提取到原数组末尾。

基本用法

我们的前4个例子突出slice的核心功能。

用法1：简单的复制

const arr2 = arr.slice

没有任何参数的slice执行一个简单的浅拷贝。当前，主流的用法还是使用展开运算符合来实现，但是如果在旧的代码库中，或者没有使用babel的构建步骤，可能仍然希望使用slice。

用法2：获取从 N 开始的子数组

使用slice方法最简单的方法就是原始数组从N开始抽取的所有元素。

一种情况是希望弹出数组的第一个元素并使用它，返回剩余的数组，但希望在不修改原始数组的情况下执行此操作。

function useone (arr) { const usedItem = arr[0] return arr.slice(1)}

用法3：获取从末尾 N 开始的子数组

slice的另一种使用方法是获取数组的末尾，利用的是负索引从末尾开始计数。