前端每日一练：splice()详解

一、使用示例

在数组index为1的位置插入lemon和kiwi，不需要删除项目

   function testSplice() {
        var fruits = ['banana', 'orange', 'apple'];
        fruits.splice(1, 0, 'lemon', 'kiwi')
        console.log(fruits)
    }

0: "banana"
1: "lemon"
2: "kiwi"
3: "orange"
4: "apple"

二、函数解释

用于添加或删除数组中的元素，会改变原始数组。如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

三、参数解释

• 1）index —— 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

• 2）howmany —— 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

• 3）item1, …, itemX —— 可选。向数组添加的新项目。

四、case演示

4.1 一个参数

index大于等于0，表示从index开始之后所有元素删除，小于0表示倒数第几个及之后所有元素删除

• 1）只有第一个参数,表示index和之后的元素全部删掉

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2);
  

结果

```
Banana,Orange
```

• 2）index为负数，表示从倒数第几个元素开始，删除当前及之后的所有元素.

  以下示例删除倒数第二个之后所有元素和倒数第二个

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(-2);
  

结果

Banana,Orange

4.2 两个参数

从index开始删除，howmany为删除个数，howmany小于等于0则不删除

• 1）以下示例删除index为2的元素，删除个数为1，返回值为被删除元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2,1);
  

结果

Banana,Orange,Mango

• 2. howmany小于0

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,-1);

结果,数组元素不变

Banana,Orange,Apple,Mango

4.3 三个参数

第三个参数以及后面的参数表示要添加到index位置的新元素

• 1）从index=2开始，添加元素,不删除元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2,0,"test","test1");
  

  结果

  Banana,Orange,test,test1,Apple,Mango
  

• 2）从index=2开始，删除index2和后面2个元素,添加3个元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2,2,"test","test1","test3");
  

结果

 Banana,Orange,test,test1,test3

• 3）从倒数第2个开始，删除1个元素，添加3个

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(-2,1,"test","test1","test3");

结果

Banana,Orange,test,test1,test3,Mango