JavaScript温故知新----splice、slice的区别

深藏阁楼爱情的钟 2022-06-07 06:14 248阅读 0赞

数组的操作方法中，我们们常用的有concat、splice、slice。  
splice、slice这两个方法，名字类似，但是方法差距比较大。

slice的英文意思是剪贴，**功能是从数组中截取某一部分，作为一个新的数组返回**。

splice的英文意思是拼接，接合，**功能是向数组中插入某些内容，如果说插入内容没有指定，那就是删除部分内容**。

## slice ##

1.slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。

var colors = ["red", "green", "blue", "yellow", "purple"];
    var colors2 = colors.slice(1);
    var colors3 = colors.slice(1,4);
    
    console.log(colors2);
    //[ 'green', 'blue', 'yellow', 'purple' ]
    console.log(colors3);
    //[ 'green', 'blue', 'yellow' ]
    console.log(colors);
    //[ 'red', 'green', 'blue', 'yellow', 'purple' ]

2.Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，

除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换）

var a={length:2,0:'first',1:'second'};
    Array.prototype.slice.call(a);// ["first", "second"]
    
    var a={length:2};
    Array.prototype.slice.call(a);// [undefined, undefined]

## splice ##

splice号称最强大的数组方法，主要用途是想数组中部插入项，方法有如下几种。

var colors = ["red", "green", "blue"];
    //删除某一项
    var removed = colors.splice(0,1);
    console.log(colors);
    //[ 'green', 'blue' ]
    console.log(removed);
    //[ 'red' ]
    
    //从位置1开始插入一项
    removed = colors.splice(1, 0, "yellow", "orange");
    console.log(colors);
    //[ 'green', 'yellow', 'orange', 'blue' ]
    console.log(removed);
    //[]
    //插入两项，删除一项
    removed = colors.splice(1, 1, "red", "purple");
    console.log(colors);
    //[ 'green', 'red', 'purple', 'orange', 'blue' ]
    console.log(removed);
    //[ 'yellow' ]
    
    //从第2位开始删除所有元素
    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    var removed = myFish.splice(2);
    // 运算后的myFish ：["angel", "clown"] 
    // 被删除的元素数组： ["mandarin", "sturgeon"]

That’s all !

参考文档：  
JavaScript高级教程  
[http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html][http_www.cnblogs.com_littledu_archive_2012_05_19_2508672.html]

[http_www.cnblogs.com_littledu_archive_2012_05_19_2508672.html]: http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html