ES9 中的 Array.slice() 方法和 Array.splice() 方法的区别和应用-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，Array.slice() 和 Array.splice() 都是常用的数组操作方法。虽然这两个方法都可以对数组进行截取或者删除操作，但是它们的使用方法和效果是不同的。本文将详细介绍 ES9 中的 Array.slice() 方法和 Array.splice() 方法的区别和应用。

Array.slice() 方法

Array.slice() 方法可以从一个数组中截取出一部分元素，并返回一个新的数组。这个新数组包含了原数组中从开始位置到结束位置之间的元素，但是不包含结束位置的元素。

Array.slice() 方法的语法如下：

array.slice(start, end)

其中，start 和 end 都是可选参数。start 表示截取的开始位置，默认为 0；end 表示截取的结束位置，默认为数组的长度。如果 end 参数为负数，则表示从数组末尾开始计算的位置。

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

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.slice(2, 4);
console.log(newArr); // [3, 4]

在这个示例中，我们使用 Array.slice() 方法从 arr 数组中截取了从索引 2 到索引 4（不包含索引 4）之间的元素，返回了一个新的数组。

Array.splice() 方法

Array.splice() 方法可以从一个数组中删除一部分元素，并返回一个新的数组。这个新数组包含了被删除的元素。

Array.splice() 方法的语法如下：

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

其中，start 表示删除的开始位置；deleteCount 表示删除的元素个数；item1, item2, ... 表示要插入到数组中的元素。如果 deleteCount 参数为 0，则表示不删除任何元素，只插入新的元素。

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

const arr = [1, 2, 3, 4, 5, 6];
const deletedArr = arr.splice(2, 2, 'a', 'b');
console.log(arr); // [1, 2, "a", "b", 5, 6]
console.log(deletedArr); // [3, 4]

在这个示例中，我们使用 Array.splice() 方法从 arr 数组中删除了从索引 2 开始的 2 个元素，并插入了两个新的元素，返回被删除的元素组成的数组。

区别和应用

Array.slice() 方法和 Array.splice() 方法的最大区别在于，Array.slice() 方法不会改变原数组，而是返回一个新的数组；而 Array.splice() 方法会改变原数组，并返回被删除元素组成的数组。

因此，当我们需要从一个数组中截取一部分元素而不改变原数组时，可以使用 Array.slice() 方法；当我们需要从一个数组中删除一部分元素并插入新的元素时，可以使用 Array.splice() 方法。

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

// javascriptcn.com 代码示例
// 使用 Array.slice() 方法
const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.slice(2, 4);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(newArr); // [3, 4]

// 使用 Array.splice() 方法
const arr2 = [1, 2, 3, 4, 5, 6];
const deletedArr = arr2.splice(2, 2, 'a', 'b');
console.log(arr2); // [1, 2, "a", "b", 5, 6]
console.log(deletedArr); // [3, 4]

在这个示例中，我们使用了 Array.slice() 方法和 Array.splice() 方法分别对数组进行了截取和删除操作，并输出了结果。

总结

Array.slice() 方法和 Array.splice() 方法都是常用的数组操作方法，它们的使用方法和效果是不同的。在实际开发中，我们需要根据需求选择合适的方法来对数组进行操作，以达到最好的效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656aa973d2f5e1655d312009