用心感受数组中强大的splice方法

最近在梳理JavaScript数组这一块知识点时，想到了splice方法。于是在睡觉之前脑海中一遍遍走过，其实在我的日常工作中，感觉splice是使用次数远远不及forEach、filter这种。但我知道splice是数组中一个很重要又很强大的方法，于是今天早起，就想找个时间和大家好好说道说道。

一、概念

首先 splice 是数组的一个方法，注意它的使用会改变原数组的值，根据我们工作中的实际情况，它可以接收三个参数。

splice的实际作用就是对原数组进行增加、删除和修改。

二、参数使用

2.1 一个参数

1. 一个参数的情况，多用来进行截取（相当于删除元素组中的一些项），标识从n开始一直到数组末尾，这种情况的返回值是一个我们截取值的数组。

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

2. 这里可能有想伙伴要说我想截取某一部分怎么办，那我们就要使用slice方法啦。

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

   注意：slice不会改变原数组，再一点就是这个取件是前闭后开的。

3. splice也可以接收一个负数

   当我们传递的参数为-1时，此时指向的是数组的最后一项，这里我想获取数组的最后三项也可以这样写。

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

2.2 两个参数

1. 两个参数是删除的意思，标识从下标n开始删除m个项，返回值是一个删除的项的数组。比如我们删除下标为2的值。

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

2. 两个参数也是支持负数的

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

3.3 三个参数(大于等于三个参数)

splice(start , deleteCount, item1, item2, … )

我们先来说两种情况，分别解释一下每个参数的作用。

• start大于0时

  • deleteCount 为 0 时，不删除只添加。在start位置前添加item1, …, itemN的数
  • deleteCount > 0 删除且添加，删除从start位置开始的数，deleteCount为删除的个数，并且在start位置前添加item1, …, itemN的数。

• start小于0时，最后一个数为 -1

  • deleteCount为 0 时 不删除只添加，在-start位置前添加item1, …, itemN的数

  • deleteCount > 0 删除且添加，删除从-start位置开始的数，deleteCount为删除的个数，并且在-start位置前添加item1, …, itemN的数

    // 新增
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.splice(2, 0, 6);
    console.log(arr); // [1, 2, 6, 3, 4, 5];
    console.log(newArr); // [];
    
    // 替换
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.splice(2, 1, 6);
    console.log(arr); // [1, 2, 6, 4, 5];
    console.log(newArr); // [3];
    

三、总结

今天是整理了一下数组中splice中的用法，一般我们就是使用其中的删除和替换。目的是让大家对splice加深印象，在面试中可能会被提问到。