当前位置：首页 > article >正文

javaScript中slice()和splice()的用法与区别

article 2024/12/25 2:49:31

定义和功能
- slice()方法：
  - slice()方法用于从一个数组（或字符串）中提取指定范围的元素（或字符），它不会改变原始数组（或字符串），而是返回一个新的数组（或字符串）。
  - 语法为array.slice(start, end)（对于数组）或string.slice(start, end)（对于字符串）。其中start是开始提取的索引（包含），end是结束提取的索引（不包含）。如果省略end参数，则提取从start到数组（或字符串）末尾的所有元素（或字符）。
- splice()方法：
  - splice()方法主要用于修改数组。它可以删除数组中的元素、插入新元素或者同时进行删除和插入操作。这个方法会直接改变原始数组。
  - 语法为array.splice(start, deleteCount, item1, item2,...)。其中start是开始修改的索引，deleteCount是要删除的元素个数，item1, item2,...是要插入的新元素。

返回值

slice()方法：

返回一个包含提取元素（或字符）的新数组（或新字符串）。例如：

收起

javascript

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
console.log(arr);   // [1, 2, 3, 4, 5]（原始数组不变）

对于字符串也类似：

收起

javascript

let str = "Hello World";
let newStr = str.slice(0, 5);
console.log(newStr); // "Hello"
console.log(str);    // "Hello World"（原始字符串不变）

splice()方法：

返回一个包含被删除元素的数组。如果没有删除元素，则返回一个空数组。例如：

收起

javascript

let arr = [1, 2, 3, 4, 5];
let removedItems = arr.splice(1, 2);
console.log(removedItems); // [2, 3]
console.log(arr);           // [1, 4, 5]（原始数组已改变）

参数使用的区别
- slice()方法：
  - 它的参数主要是用于指定提取的范围。参数可以是正数、负数。正数表示从前往后的索引，负数表示从后往前的索引。例如：
    收起
    
    javascript
```
let arr = [1, 2, 3, 4, 5];
// 从倒数第二个元素开始提取到末尾
let newArr = arr.slice(-2);
console.log(newArr); // [4, 5]
```
- splice()方法：
  - 参数比较灵活。start参数指定操作的起始位置，deleteCount用于指定要删除的元素个数。如果deleteCount为 0，则表示不删除元素，只插入新元素。例如：
    收起
    
    javascript
```
let arr = [1, 2, 3, 4, 5];
// 在索引为2的位置插入两个元素
arr.splice(2, 0, 6, 7);
console.log(arr); // [1, 2, 6, 7, 3, 4, 5]
```
应用场景
- slice()方法：
  - 当需要从一个数组或字符串中获取部分数据，而不改变原始数据时，就可以使用slice()。例如，在处理数据视图或者复制数据子集时很有用。在函数式编程中，也经常用于获取数据副本，以避免副作用。
- splice()方法：
  - 当需要对数组进行实际的修改，如删除元素、插入元素或者重新排列元素顺序时，使用splice()。比如在实现一个数据列表的增删操作时，就可以使用这个方法来更新数组的内容。