壮大的Array.prototype.splice()

2019年8月31日 173次阅读 来源: 龚明华

之所以会零丁针对这个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的用法，若有更多使用要领，迎接留言议论

    原文作者：龚明华
    原文地址: https://segmentfault.com/a/1190000017982513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞