js中 slice 用法用法全解析

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 的另一种使用方法是获取数组的末尾，利用的是 负索引 从末尾开始计数。

这种负索引使删除任意数量的元素变得超级简单。例如，如果你只想抓取3个

const last3 = arr.slice(-3)

用法4：获取数组的前n个

获取数组的前面的数，我们需要使用第二个参数： end 。

当有两个参数时， slice 方法返回一个从 begin 开始但不包括 end 的集合。

由于JavaScript数组是从 0 开始的（索引从0开始），这使得获取前N个元素变得非常简单：

const first4 = arr.slice(0, 4)

用法5：获取数组中某段子数组

如果我们想要使用 slice 从任何索引开始获取数组的一段，该怎么办？

为此，我们需要从 (begin, length) 转换为 (begin, end) 。计算逻辑很简单，我们可以定义一个简单的函数来做到这一点：

function pullSegment(arr, begin, length) {
  return arr.slice(begin, begin + length);
}