JS短文，如何正确理解Splice() 函数与Slice() 函数

大家好，欢迎来到IT知识分享网。

转载说明：原创不易，未经授权，谢绝任何形式的转载

Splice() 函数与 Slice() 函数都是 JavaScript 数组中常用的方法之一。虽然它们的名称很相似，但它们的作用却截然不同。在这篇文章中，我们将深入了解这两个函数的不同之处以及如何使用它们。

SPLICE() 函数介绍

splice() 是 JavaScript 数组对象的方法之一，可以用于修改数组的内容。具体来说，它可以用于删除或插入元素，并可以返回已删除的元素。

splice() 方法有三个参数，分别为：

1. 起始索引（必须）：指定要修改的数组的开始位置的索引。如果该值是负数，则表示从数组的末尾开始计算的位置。
2. 要删除的元素个数（可选）：指定要删除的元素的数量。如果该值为 0，则不删除任何元素。
3. 要插入的元素（可选）：指定要插入到数组中的元素。

下面是 splice() 方法的一些常见用法：

1、删除元素：要删除一个元素，可以使用 splice() 方法并将第二个参数设置为 1。

const arr = [1, 2, 3, 4, 5]; arr.splice(2, 1); // 从索引 2 开始删除 1 个元素 console.log(arr); // [1, 2, 4, 5]

2、插入元素：要在数组中插入一个元素，可以使用 splice() 方法并将第二个参数设置为 0，然后在第三个参数中指定要插入的元素。

const arr = [1, 2, 3, 4, 5]; arr.splice(2, 0, 6); // 在索引 2 的位置插入 6 console.log(arr); // [1, 2, 6, 3, 4, 5]

let num_arr = [1,2,3,4,5]; num_arr.splice(1,0, …[2,3]) === [1,2,3,4,5]

3、替换元素：要替换一个元素，可以使用 splice() 方法并将第二个参数设置为 1，然后在第三个参数中指定要替换的元素。

const arr = [1, 2, 3, 4, 5]; arr.splice(2, 1, 6); // 从索引 2 开始删除 1 个元素，并在该位置插入 6 console.log(arr); // [1, 2, 6, 4, 5]

4、返回已删除的元素：splice() 方法还可以返回已删除的元素。

const arr = [1, 2, 3, 4, 5]; const removed = arr.splice(2, 1); // 从索引 2 开始删除 1 个元素，并将其存储在 removed 变量中 console.log(arr); // [1, 2, 4, 5] console.log(removed); // [3]

注意：使用 splice() 方法会改变原始数组。如果您不希望改变原始数组，可以先创建一个副本并对其进行操作。

SLICE() 函数介绍

slice() 是 JavaScript 数组对象的方法之一，可以用于获取数组的一部分并返回一个新的数组。它不会修改原始数组，而是返回一个包含所选元素的新数组。

slice() 方法有两个参数，分别为：

1. 起始索引（可选）：指定要获取的数组的开始位置的索引。如果该值是负数，则表示从数组的末尾开始计算的位置。如果省略该参数，则从数组的开头开始选取元素。
2. 结束索引（可选）：指定要获取的数组的结束位置的索引（不包括该位置上的元素）。如果该值是负数，则表示从数组的末尾开始计算的位置。如果省略该参数，则选取到数组的最后一个元素。

下面是 slice() 方法的一些常见用法：

1、获取一段连续的元素：要获取数组中的一段连续的元素，可以使用 slice() 方法并指定起始和结束索引。

const arr = [1, 2, 3, 4, 5]; const slicedArr = arr.slice(1, 4); // 从索引 1 开始选取到索引 4（不包括该位置上的元素），即 [2, 3, 4] console.log(slicedArr); // [2, 3, 4]

2、复制整个数组：要复制整个数组，可以使用 slice() 方法并省略起始和结束索引。

const arr = [1, 2, 3, 4, 5]; const copiedArr = arr.slice(); // 复制整个数组 console.log(copiedArr); // [1, 2, 3, 4, 5]

3、从数组末尾开始获取元素：要从数组的末尾开始获取元素，可以使用负数索引。

const arr = [1, 2, 3, 4, 5]; const slicedArr = arr.slice(-3); // 从数组末尾开始选取 3 个元素，即 [3, 4, 5] console.log(slicedArr); // [3, 4, 5]

SPLICE() 和 slice() 的区别

splice() 方法：

• 用于在数组中添加或删除元素。
• 可以修改原始数组。
• 第一个参数表示要添加或删除元素的起始位置。
• 第二个参数表示要删除的元素数量。
• 可以通过第三个参数及以后的参数来添加元素到指定位置。
• 返回一个包含被删除元素的数组，如果没有删除元素，则返回一个空数组。

slice() 方法：

• 用于获取数组的一部分并返回一个新数组。
• 不会修改原始数组。
• 第一个参数表示要获取的数组的开始位置的索引。
• 第二个参数表示要获取的数组的结束位置的索引（不包括该位置上的元素）。
• 如果省略第二个参数，则选取到数组的最后一个元素。
• 返回一个包含所选元素的新数组。

结束

今天的内容就介绍到这里，虽然 Splice() 函数和 Slice() 函数都可以在 JavaScript 数组中起到重要的作用，但它们的作用和返回值是完全不同的。如果你需要向数组中添加或删除元素并且希望修改原始数组，则可以使用 Splice() 函数；如果你需要创建一个新的数组并选择其中的一部分元素，则可以使用 Slice() 函数。在使用这两个函数时，请根据你的需求和预期的结果进行选择。

希望今天的分享对你有所帮助，感谢你的阅读，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。