ECMAScript 2019 中的 Array.prototype.slice:取数组部分元素
Array.prototype.slice() 是 JavaScript 中最常用的数组方法之一,用于截取数组的一部分并返回一个新数组。它的语法为:
array.slice(begin, end)
其中,begin 表示开始截取的索引,end 表示截取结束的索引,但并不包含 end 索引处的元素。如果省略 end 参数,则 slice() 方法将一直截取到数组的最后一个元素。
slice() 方法并不修改原数组,而是返回一个由截取元素组成的新数组。这个特性使得 slice() 方法不仅适用于数组的截取,还适用于数组的克隆和浅拷贝。
下面我们就分别介绍 slice() 方法的这三种用法。
一、数组的截取
数组的截取是 slice() 方法最常见的用法,下面我们来看一个具体的例子:
const arr = [1, 2, 3, 4, 5]; const slicedArr = arr.slice(2, 4); console.log(slicedArr); // [3, 4]
在这个例子中,我们先创建了一个包含 1 ~ 5 的数字的数组,随后使用 slice() 方法截取了从索引 2 开始,到索引 4 之前(不包含索引 4)的元素。截取后得到的新数组为 [3, 4]。
二、数组的克隆
由于 slice() 方法返回的是一个新数组,因此它也可以用于数组的克隆,例如:
const originalArr = [1, 2, 3, 4, 5]; const clonedArr = originalArr.slice(); console.log(clonedArr); // [1, 2, 3, 4, 5]
这个例子中,我们先创建了一个原始的数组 originalArr,该数组包含了 1 到 5 的数字。随后使用 slice() 方法不带参数地调用原始数组 originalArr,由于没有指定 begin 和 end 参数,因此 slice() 方法返回了一个包含整个 originalArr 数组元素的新数组 clonedArr。这样,我们就完成了对数组的克隆。
需要注意的是,由于 slice() 方法是浅拷贝,因此如果数组中包含了对象元素,那么在新数组中仍然保留对这些对象的引用。这意味着,如果你改变了原始数组中的对象元素,那么在新数组中对这些元素的访问也会发生相应的改变。
三、数组的浅拷贝
除了克隆和截取,slice() 方法还可以用于数组的浅拷贝。这个特性就是因为 slice() 方法返回的是一个新数组,而这个新数组恰好是由原始数组的一部分元素组成的。
例如,下面的例子中,我们有一个包含两个对象的原始数组:
const originalArr = [{ name: 'foo' }, { name: 'bar' }];
假设我们现在有一个需求,要将原始数组中的第一个元素替换为一个新的对象 { name: 'qux' }。我们可以使用 slice() 方法截取原始数组的第一个元素,并将其与新的对象组成一个新数组:
const newArr = [{ name: 'qux' }].concat(originalArr.slice(1));
这个例子中,我们使用 concat() 方法将包含一个新对象的数组和原始数组的部分元素组合成一个新数组。这个新数组即为我们需要的浅拷贝数组。
需要注意的是,由于是浅拷贝,因此如果原始数组中包含了对象元素,那么在新数组中仍然保留对这些对象的引用。这意味着,如果你改变了原始数组中的对象元素,那么在新数组中对这些元素的访问也会发生相应的改变。
总结
Array.prototype.slice() 是 JavaScript 中最常用的数组方法之一,它的用途不仅限于数组的截取,还包括了数组的克隆和浅拷贝,应用范围非常广泛。
需要注意的是,由于 slice() 方法返回的是一个由原始数组元素组成的新数组,因此如果原始数组中包含了对象元素,那么在新数组中仍然保留对这些对象的引用。这意味着,如果你改变了原始数组中的对象元素,那么在新数组中对这些元素的访问也会发生相应的改变。
参考代码
-- -------------------- ---- ------- -- ------ ----- --- - --- -- -- -- --- ----- --------- - ------------ --- ----------------------- -- --- -- -- ------ ----- ----------- - --- -- -- -- --- ----- --------- - -------------------- ----------------------- -- --- -- -- -- -- -- ------- ----- ----------- - -- ----- ----- -- - ----- ----- --- ----- ------ - -- ----- ----- -------------------------------- -------------------- -- -- ----- ----- -- - ----- ----- --
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a1833348841e9894dc246f