强大的Array.prototype.splice()

tainzhi 发布于2019-08-23 14:54 / 3209人阅读

摘要：大于数组长度，不报错，但是不会删除当前数组的元素，第二个参数无效。大于并且小于指定位置到数组最后一个元素的长度，则删除指定长度的元素。针对上面的描述，我们一一验证它的所有用法。

之所以会多带带针对这个api写这么一篇博文，一方面是因为最近在一次面试中聊到了这个API，我没能完全说出它的用法；另一方面则是因为通过熟悉后觉得这个api确实很灵活很强大，充分体现了javascript的灵活性。所以写这么一篇博文，可以让自己更深刻地记住这个方法，也希望能让更多地同仁用这个方法让自己的javascript代码更加简洁，更加有效率。

MDN Web Docs中对Array.prototype.splice()的描述信息如下

splice(start, deleteCount, item1, item2, ...) 方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。

传参信息如下

1. start 从什么位置开始修改当前数组，这个参数有如下几种情况

0到数组长度-1，即当前数组的任意位置。

大于数组长度-1，不报错，但是不会删除当前数组的元素，第二个参数无效。但是，如果这个时候传入了第三个，以及第四个。。。参数，那么，这些参数值会被添加到数组的末尾位置，也就类似于push方法。

小于0，如果开始位置为负数，会从数组的末尾倒着查找，如，-1为最后一个元素，-2为倒数第二个元素。

2. deleteCount 要删除的内容的长度，这个参数有如下几种情况

0或负数不删除数组元素。

大于0并且小于start指定位置到数组最后一个元素的长度，则删除指定长度的元素。

大于start指定位置到数组最后一个元素的长度，删除从start位置后面所有的元素，如splice(0, 99999999)会晴空长度小于99999999的数组

3. 在start位置开始要添加或者替换的元素，可以有多个。

针对上面的描述，我们一一验证它的所有用法。

删除元素（第二个参数不为0，后续参数不传入，只删除）

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 1); // 从第二个位置开始删掉一个元素
console.log(ary); // ["a", "c", "d", "e", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 2); // 从第二个位置开始删掉两个元素
console.log(ary); // ["a", "d", "e", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(-2, 1); // 删掉倒数第二个元素‘e’
console.log(ary); // ["a", "b", "c", "d", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(0, ary.length); // 删掉所有元素
console.log(ary); // []

添加元素(第二个参数为0，后续参数不为空，则只增加不删除)

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(ary.length, 0, "x"); // 在数组末尾追加一个元素
console.log(ary); // ["a", "b", "c", "d", "e", "f", "x"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 0, "x"); // 在数组第二个元素前插入一个元素
console.log(ary); // ["a","x", "b", "c", "d", "e", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(-2, 0, "x"); // 在数组倒数第二个元素前插入一个元素
console.log(ary); // ["a", "b", "c", "d", "x", "e", "f"]

let ary = ["a", "b", "c"];
let ary2 = ["d", "e", "f"]
ary.splice(ary.length, 0, ...ary2); // 数组拼接
console.log(ary); // ["a", "b", "c", "d", "e", "f"]

更新/替换元素（第二个参数不为0，后续参数不为空，这里需要注意的是，传入的替换元素的个数可以等于前面的长度，也可以不等于前端的长度）

替换元素其实执行的是先删除再插入，所以一定要清楚传入参数的意义

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 1, "x"); // 替换第二个元素‘b’为‘x’ (长度和传入的替换元素个数都为一)
console.log(ary); // ["a", "x", "c", "d", "e", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 2, "x"); // 删掉第二个和第三个元素‘b’ ‘c’，插入一个元素‘x’ (长度大于传入的替换元素个数)
console.log(ary); // ["a", "x", "d", "e", "f"]

let ary = ["a", "b", "c", "d", "e", "f"];
ary.splice(1, 2, "x", "y", "z"); // 删掉第二个和第三个元素‘b’ ‘c’，插入三个元素‘x’，‘y’， ‘z’ (长度小于传入的替换元素个数)
console.log(ary); // ["a", "x","y", "z", "d", "e", "f"]

上面这些就是我目前总结的常用的splice的用法，如有更多使用方法，欢迎留言讨论

超融合服务器混合云强大的js 编程语言强大的原因 php强大的编程工具功能强大的编程语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101325.html

《JavaScript语言精粹修订版》读书笔记

摘要：于是我就先把这本薄的经典书语言精粹修订版豆瓣读书本书简介总共章，除去附录，才页，读完并记录了一些笔记。读书笔记还可以分享给别人看。编程语言第版定义了的标准。程序检查时丢弃值为函数的属性。之前看到这篇文章，前端网老姚浅谈：怎么学JavaScript？，说到怎么学习JavaScript，那就是看书、分析源码。10本书读2遍的好处，应该大于一本书读20遍。看书主动学习，看视频是被动学习。看...

EscapedDog 2019-08-20 18:15 评论0 收藏0
JavaScript深入之类数组对象与arguments

摘要：在客户端中，一些方法等也返回类数组对象。对象接下来重点讲讲对象。在函数体中，指代该函数的对象。下一篇文章深入之创建对象的多种方式以及优缺点深入系列深入系列目录地址。 JavaScript深入系列第十三篇，讲解类数组对象与对象的相似与差异以及arguments的注意要点类数组对象所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象举个例子： var array = ...

AlienZHOU 2019-08-20 16:23 评论0 收藏0
【深度长文】JavaScript数组所有API全解密

摘要：关于我的博客掘金专栏路易斯专栏原文链接深度长文数组全解密全文共字，系统讲解了数组的各种特性和。构造器构造器用于创建一个新的数组。中声明的数组，它的构造函数是中的对象。本文首发于CSDN网站，下面的版本又经过进一步的修订。关于我的博客：louis blog 掘金专栏：路易斯专栏原文链接：【深度长文】JavaScript数组全解密全文共13k+字，系统讲解了JavaScrip...

Mr_zhang 2019-08-20 16:13 评论0 收藏0
Array 对象方法整理

摘要：对象方法数组创建与修改创建创建一个新数组实例将类数组类似数组的对象和可遍历的对象转为真正的数组。返回一个新的对象，该对象包含数组每个索引的值。遍历键遍历值遍历键值对参考文档标准库对象 Array 对象方法数组创建与修改 1. 创建 var arr = []; var arr = new Array() Array.of(el1[,el2[...]]) //创建一个新数组实例 Ar...

IntMain 2019-08-20 17:20 评论0 收藏0