js中数组的splice和slice方法的用法及区别

1. slice()方法

slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

array.slice(start,end)从start到(end-1)开始删除/截取

  • start 开始索引

  • end 结束索引,可以不传,默认截取从start往后的所有元素;

      var arr = ["a", "b", "c", "d", "e", "f", "g"];
            console.log( arr.slice(3)); //['d', 'e', 'f', 'g']
            console.log( arr.slice(3,5)); //['d', 'e']
  • 索引可以为负数,从后往前截取,-1倒数第一个,-2倒数第二个;

      var arr = ["a", "b", "c", "d", "e", "f", "g"];
            console.log( arr.slice(-1)); //['g']
            console.log( arr.slice(-3)); //['e','f', 'g']
            console.log( arr.slice(1,-3)); //['b', 'c', 'd']
            console.log(arr);//['a', 'b', 'c', 'd', 'e', 'f', 'g'] 不改变原数组

  • 该方法不会改变原有数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

注意: slice() 方法不会改变原始数组。

2. splice() 方法

splice() 方法用于添加或删除数组中的元素。

如果删除一个元素,则返回删除元素的数组。 如果未删除任何元素,则返回空数组。

扫描二维码关注公众号,回复: 14688489 查看本文章
var arr = ["a", "b", "c", "d", "e"];
        console.log(arr.splice(2, 0)); //[] 删除0个,返回空数组
        console.log(arr);['a', 'b', 'c', 'd', 'e']

array.splice(index,howmany,item1,.....,itemx)

  • index删除开始位置的索引

  • howmany删除的数量

  • item1...itemx传递新元素,这些元素可以插入到开始位置索引前

    var arr = ["a", "b", "c", "d", "e"];
            console.log(arr.splice(0, 2));//['a','b']
            console.log(arr);// ['c', 'd', 'e'] 改变了原数组
    
            // 从索引为0开始,删除c和d 在e前加'zm', 'xc'
            console.log(arr.splice(0, 2, 'zm', 'xc'));//['c', 'd'] 
            console.log(arr);// ['zm', 'xc', 'e'] 改变了原数组

注意:这种方法会改变原始数组。

关于splice()在实际开发中的一个小bug

当index删除开始位置的索引为undefined时,默认从第0项开始删除。

实际开发中index为传入的变量,当为undefined我们并不希望删除,但是却从第0项执行了删除。

var a =[1,2,3,4,5,6]
        a.splice(undefined,2)//默认从第0项开始删除两个元素
        console.log(a);//[3, 4, 5, 6]

3.总结

  • splice改变原数组,slice不改变原数组。

  • splice除了可以删除之外,还可以插入。

  • splice可传入3个参数,slice接受2个参数。

猜你喜欢

转载自blog.csdn.net/qq_45086484/article/details/126061781
今日推荐