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);
}