Splice方法的图像化理解

  • Splice方法的图像化理解已关闭评论
  • 46 次浏览
  • A+
所属分类:Web前端
摘要

splice在英语中的意思是拼接,在实际的代码使用中,splice就在数组中起到了一个拼接的作用

splice在英语中的意思是拼接,在实际的代码使用中,splice就在数组中起到了一个拼接的作用

使用方法

splice(x,y,a,b,c,...)

其中x、y为数字,a、b、c为新添加的项,意思是从数组的第x项开始删除y项,并在其中添加a、b、c...,其中x、y必填,abc可不填

图像理解

现在让我们将splice方法想象成一把剪刀,splice(x,y,a,b,c,...)其中x表示剪刀落剪的位置,y表示剪去片段的长度,后面跟着的项则表示新插入的片段

或许这样表述还是有些抽象,但请接着往下看——

我们先声明一个数组

let array = [0,1,2,3,4]

它的内部结构如下——

Splice方法的图像化理解

删除

如果我们想要删除数组之中的array[1]和array[2]以及array[3]就可以用到以下代码——

array.splice(1,3)

它的意思是从第1项开始,连续删除3项

用图像理解就是剪刀在第一项落剪,开始剪去一个长度为3的片段

Splice方法的图像化理解

在剪去之后,将剩下的片段前后拼接,便有了新的数组——array=[0,4]

Splice方法的图像化理解

添加

如果我们想在指定位置添加几项,那么可以将y设置成0

array.splice(1,0,’新‘)

Splice方法的图像化理解

这样剪刀只会在对应位置剪开一个缺口,而不会剪去任何片段,之后我们将新片段插入并两端拼接,便有了下面这个新的数组——array=[0,'新',1,2,3,4]

Splice方法的图像化理解

综合使用

array.splice(2,1,9,'好')

对于这段代码我们分步骤来看它是如何执行的——

  1. 从第二项落剪

Splice方法的图像化理解

2.剪去长度为1的片段

Splice方法的图像化理解

  1. 移除剪去的片段并插入新片段

    Splice方法的图像化理解

  2. 拼接并得到新数组array=[0,1,9,'新',3,4]

    Splice方法的图像化理解

总结

splice是非常好用的一个对数组修改的方法,可以同时实现添加、修改、删除,本文是笔者初学splice方法时的自我总结,如有遗漏或错误还请评论区斧正。