数组中slice和splice的区别

Venlon
141 阅读3分钟

首先看到这两个单词的第一反应是长得真像啊！学习的时候，会发现很容易及混淆。一起跟着我来看看这两个方法。

推荐很多大家多自己学会查看mdn，本文多出内容，都是来自mdn已经阅读后自己的理解！

首先知道来看一下它们二者最大的一个不同点

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   fruits.splice(1，3);
   console.log(fruits);//['Banana']

原数组发生改变，splice()这个方法可以改变原来的，返回值是进行截取后的新数组(这个我在介绍# Vue中哪些数组方法会改变视图的更新中有提及 Vue中哪些数组方法会改变视图的更新中有提及

我们再来看一下slice()的方法

   var fruits1 = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
   var citrus = fruits1.slice(1, 3);
   console.log(citrus);//['Orange', 'Lemon']

这个方法不会改变原来的数组，返回值也是进行截取后的新数组

具体一起来看看他们具体的使用方法

slice()

slice(start,end) 从哪到哪开始删
参数：
1.截取开始的位置的索引，包含开始索引（可选）
2.截取结束的位置的索引，不包含结束索引（可选）
第二个参数可以忽略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算

  var fruits1 = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
        var citrus = fruits1.slice();//['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
        console.log(citrus);// ['Orange', 'Lemon']
        var citrus1 = fruits1.slice(1, 3);
        console.log(citrus1);// ['Orange', 'Lemon']
        var citrus2 = fruits1.slice(1);
        console.log(citrus2);//['Orange', 'Lemon', 'Apple', 'Mango']
        var citrus3 = fruits1.slice(-2);
        console.log(citrus3);//['Apple', 'Mango']
        var citrus4 = fruits1.slice(-3, -1);
        console.log(citrus4);// ['Lemon', 'Apple']//第二个参数为负数的时候，表示从倒数第3个开始，截取到倒数第一个，但不包括倒数第一个

splice()

splice(strt,end,index1,index2) 从什么位置开始，删几个？删了后插入什么新元素？
可以用于删除数组中的指定元素
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

splice()中参数：
第一个，表示开始位置的索引（可选）
第二个，表示删除的数量（可选）
第三个及以后。。可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边（可选）

        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        fruits.splice()
        console.log(fruits);//['Banana', 'Orange', 'Apple', 'Mango']

        var fruits1 = ["Banana", "Orange", "Apple", "Mango"];
        fruits1.splice(1,2)
        console.log(fruits1);// ['Banana', 'Mango']表示从索引号1开始删除两个

        var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
        fruits2.splice(1,2,'watermelon')
        console.log(fruits2);//['Banana', 'watermelon', 'Mango']表示从索引号1开始删除两个，并且在原来索引号的位置插入新的元素'watermelon'

        var fruits3 = ["Banana", "Orange", "Apple", "Mango"];
        fruits3.splice(-1,1)
        console.log(fruits3);// ['Banana', 'Orange', 'Apple']表示从索引号的倒数第一位开始删除一个元素

以上就是这两个方法的介绍，splice()这个方法使用频率还是很高的，大家可以多写几个demo加深印象

这里再说一个String.prototype.slice()这个方法在字符串中也有，是用来截取字符串的，和数组中的方法基本相似
参数：
第一个：开始位置的索引（包括开始位置）用来截取字符串
第二个：结束位置的索引（不包括结束位置）

不同的是这个方法不能直接接受负值作为参数，如果传递了一个负值，则默认为0，另外substring()方法也可以用来截取字符串，点击可查看我上一篇写到的

avatar
文章
阅读
粉丝