WuT1ao

Appearance

slice 和 splice 区别 ​

初衷

slice 和 splice 这两个方法无论是在面试还是在工作中都经常会遇到，但是很多人都会搞混它们的区别，所以我想通过这篇文章来总结一下它们的区别。

slice() 和 splice() 是 JavaScript 数组的两个常用方法，它们用于处理数组的不同操作。它们的主要区别在于它们的功能和对原数组的影响：

slice() 方法 ​

  • 功能：slice() 方法用于创建一个新的数组，包含从原数组中提取的指定元素。
  • 参数：slice() 方法接受两个可选参数，分别是起始索引和结束索引。起始索引指定开始提取元素的位置（包含该位置的元素），结束索引指定停止提取元素的位置（不包含该位置的元素）。如果不提供任何参数，则会复制整个数组。
  • 原数组不变：slice() 方法不会修改原数组，而是返回一个新的包含提取元素的数组。

示例：

javascript
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // Output: ['banana', 'orange', 'grape']
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape', 'kiwi']

splice() 方法： ​

  • 功能：splice() 方法用于向/从数组中添加/删除元素，并可以同时返回被删除的元素组成的数组。
  • 参数：splice() 方法接受三个参数，第一个参数是起始索引，指定要进行操作的起始位置。第二个参数是要删除的元素个数（可以为0），第三个及后续参数是要添加到数组中的新元素。如果第二个参数为0，且后续参数存在，则表示在指定位置插入新元素。
  • 原数组改变：splice() 方法会修改原数组，进行添加或删除元素的操作。

示例：

javascript
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

const removedFruits = fruits.splice(1, 2);
console.log(removedFruits); // Output: ['banana', 'orange']
console.log(fruits); // Output: ['apple', 'grape', 'kiwi']

fruits.splice(2, 0, 'pear', 'watermelon');
console.log(fruits); // Output: ['apple', 'grape', 'pear', 'watermelon', 'kiwi']

总结 ​

  • slice() 是用于从原数组中提取元素生成一个新数组，原数组保持不变。
  • splice() 是用于在原数组中添加/删除元素，会修改原数组，并返回被删除的元素组成的新数组。

Copyright © 2022-2023 Wu T1ao