ES10 中的 Array.splice() 方法和 slice() 方法的区别

ES10 中的 Array.splice() 方法和 slice() 方法的区别

在 JavaScript 中，数组是一个重要的数据类型，而对数组进行修改、排序等操作，则需要用到一系列的数组操作方法，其中比较常用的是 splice() 方法和 slice() 方法。

在 ES10 中，Array 对象新增了一些方法，并对一些已有方法进行了优化和改进。本文主要介绍 ES10 新增的 Array.splice() 方法和 slice() 方法的区别。

1. Array.splice() 方法

Array.splice() 方法是一种修改数组内容的方法，它可以在数组的任意位置添加或删除元素，同时也可以替换数组中的元素。splice() 方法的语法如下：

array.splice(start, deleteCount, item1, item2, …)

参数说明：

• start：指定修改的起始位置，在此位置之前的元素不会被删除。如果是负数，则从数组末尾开始计算。
• deleteCount：表示要删除的元素个数，如果该值为 0，则表示不删除元素。
• item1, item2, …：表示要插入到数组中的新元素。如果没有指定，则 splice() 方法只是删除元素。

splice() 方法的返回值是一个由被删除元素组成的数组。

下面是一个使用 splice() 方法的示例代码：

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'kiwi', 'lemon'); // 从数组第二个位置开始，删除一个元素，插入两个新元素
console.log(fruits); // output: ['apple', 'kiwi', 'lemon', 'orange']

1. Array.slice() 方法

Array.slice() 方法是一种获取数组子集的方法，它能够从数组中选取一个子集，而不会改变原数组。slice() 方法的语法如下：

array.slice(start, end)

参数说明：

• start：表示要获取的子集的起始位置，如果是负数，则从数组末尾开始计算。
• end：表示要获取的子集的结束位置（不包含该位置），如果该值为空或大于数组长度，则默认为数组末尾。

slice() 方法的返回值是一个新数组，其中包含原数组中指定的子集。

下面是一个使用 slice() 方法的示例代码：

let fruits = ['apple', 'banana', 'orange', 'kiwi', 'lemon'];
let citrus = fruits.slice(2, 4); // 获取数组第 3 个到第 4 个元素，不包含第 4 个元素
console.log(citrus); // output: ['orange', 'kiwi']

1. 方法对比

splice() 方法和 slice() 方法都可以用于获取、删除和替换数组的元素，但它们之间还存在一些区别。

• splice() 方法会修改原数组，而 slice() 方法不会。
• slice() 方法只是获取数组的一个子集，而 splice() 方法则可以在任意位置添加和删除元素。
• splice() 方法的第二个参数表示要删除元素的数量，如果是 0，则表示不删除任何元素。而 slice() 方法的第二个参数表示要获取子集的结束位置，该位置不包含在子集中。
• splice() 方法返回的是被删除元素的数组，而 slice() 方法返回的是一个新数组，其中包含原数组中指定的子集。

为了更好的理解它们之间的区别，下面是一个对比表格：

1. 总结

本文主要介绍了 ES10 中新增的 Array.splice() 方法和 slice() 方法的区别。

splice() 方法是一种修改数组的方法，可以在任意位置添加或删除元素，替换数组中的元素。而 slice() 方法只是获取数组的一个子集，不会修改原数组。

无论是使用 splice() 方法还是 slice() 方法，都需要根据实际需求进行选择。如果需要修改数组中的元素，则可以使用 splice() 方法；如果只需要获取数组的子集，则可以使用 slice() 方法。

另外，建议在使用这两种方法时，对参数进行仔细的检查，以确保数组操作的正确性和可靠性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b03e38add4f0e0ff9a1f71