Splice方法的影像化理解

羊卡车發表於2024-04-16

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]

它的內部結構如下——

image-20240416161602583

刪除

如果我們想要刪除陣列之中的array[1]和array[2]以及array[3]就可以用到以下程式碼——

array.splice(1,3)

它的意思是從第1項開始,連續刪除3項

用影像理解就是剪刀在第一項落剪,開始剪去一個長度為3的片段

image-20240416163710732

在剪去之後,將剩下的片段前後拼接,便有了新的陣列——array=[0,4]

image-20240416164316441

新增

如果我們想在指定位置新增幾項,那麼可以將y設定成0

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

image-20240416165300549

這樣剪刀只會在對應位置剪開一個缺口,而不會剪去任何片段,之後我們將新片段插入並兩端拼接,便有了下面這個新的陣列——array=[0,'新',1,2,3,4]

image-20240416165424439

綜合使用

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

對於這段程式碼我們分步驟來看它是如何執行的——

  1. 從第二項落剪

image-20240416170633449

2.剪去長度為1的片段

image-20240416171045064

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

    image-20240416171333567

  2. 拼接並得到新陣列array=[0,1,9,'新',3,4]

    image-20240416171457894

總結

splice是非常好用的一個對陣列修改的方法,可以同時實現新增、修改、刪除,本文是筆者初學splice方法時的自我總結,如有遺漏或錯誤還請評論區斧正。

相關文章