【前端知识点】JS中数组的splice方法和slice方法有什么不同

splice和slice方法

splice和slice的区别为：

1. splice改变原数组，slice不改变原数组。
2. splice除了可以删除之外，还可以插入。
3. splice可传入多个参数，slice接受2个参数。

slice()

一、获取数组子集

Slice是JavaScript中的一个基础方法，用于从数组或字符串中提取一部分。 通过指定数组的起始索引和结束索引，我们可以获取从起始索引到结束索引之间的元素组成的子数组（不包含结束索引值）：

  const arr = [1, 2, 3, 4, 5];
  const subArr = arr.slice(1, 4); // [2, 3, 4]

上例中，通过arr.slice(1, 4)方法获取arr数组中下标从1到3之间的元素，得到的子数组为2, 3, 4。

需要注意的是slice方法并不会改变原数组，而是返回一个新数组。

除了上述的基本用法外，slice方法还有一些高级用法。例如，我们可以使用负数来指定起始索引和结束索引：

  const arr = [1, 2, 3, 4, 5];
  const subArr = arr.slice(-3, -1); // [3, 4]

二、利用Slice拷贝数组

Slice方法除了可以用来获取原数组或字符串的子集，还可以用来拷贝一个数组（浅拷贝）。例如下面的例子:

  const arr = [1, 2, 3];
  const copyArr = arr.slice();

上例中，我们没有指定参数，所以slice方法会默认从开头到末尾提取整个数组，从而返回一个和原数组完全相同的数组。使用slice方法拷贝数组非常方便，并且不会引起副作用。

splice()

一、splice方法的基本概念

JavaScript的数组是一种非常常用的数据类型，而splice方法则是对数组进行添加、删除、替换等操作的重要方法。使用splice方法可以对数组进行增删改等操作，并且不会破坏数组的长度。

    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 1, 'pear');
    console.log(arr); // ['apple', 'pear', 'orange']

上述代码中，splice方法的第一个参数表示需要修改的起始位置，第二个参数表示需要删除的元素个数，第三个参数以及之后的参数则是需要插入的元素。在本例中，表示从位置1开始删除一个元素（即'banana'），然后插入一个'pear'，最终数组变为'apple', 'pear', 'orange'。

二、splice方法的删除操作

splice方法最常用的操作就是删除数组中的元素。如果只传递第一个参数，则从该位置开始直接删除后面的所有元素。

    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1);
    console.log(arr); // ['apple']

上述代码中，splice方法只传递了一个参数1，表示从位置1开始直接删除后面的所有元素。最终结果为'apple'。

如果需要删除一个或多个元素，可以同时传递第一和第二个参数。

    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 2);
    console.log(arr); // ['apple']

上述代码中，splice方法传递了两个参数1和2，表示从位置1开始删除2个元素。最终结果为'apple'。

三、splice方法的插入操作

除了删除操作，splice方法还可以用于插入元素。如果只传递第一个参数，则不会删除任何元素，而是在该位置插入新的元素。

    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 0, 'pear', 'grape');
    console.log(arr); // ['apple', 'pear', 'grape', 'banana', 'orange']

上述代码中，splice方法传递了三个参数，第一个参数1表示从位置1开始插入元素，第二个参数0表示不删除任何元素，第三个及之后的参数则表示需要插入的元素。最终结果为'apple', 'pear', 'grape', 'banana', 'orange'。

四、splice方法的替换操作

同时传递第二和第三个参数，则可以进行替换操作。

    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 1, 'pear', 'grape');
    console.log(arr); // ['apple', 'pear', 'grape', 'orange']

上述代码中，splice方法传递了三个参数，第一个参数1表示从位置1开始删除一个元素，第二个参数1表示删除一个元素，第三个及之后的参数表示需要插入的元素。最终结果为'apple', 'pear', 'grape', 'orange'。

五、splice方法的返回值

splice方法返回从数组中删除的元素组成的新数组。

    const arr = ['apple', 'banana', 'orange'];
    const deleted = arr.splice(1, 1, 'pear');
    console.log(deleted); // ['banana']

上述代码中，splice方法的返回值为删除的元素组成的新数组'banana'。

六、splice方法的注意事项

在使用splice方法时需要注意以下几点：

1、第一个参数必须是数字类型；

2、如果第一个参数为负数，则从末尾开始计算位置；

3、如果删除或插入的元素个数为0，则不会修改原数组；

4、splice方法会修改原数组，因此需要小心使用。