【JavaScript】 陣列處理方式比較splice / slice / split

Tina
Mar 27, 2021

--

splice / slice / split 到底差在哪

陣列結構的特色就是能使用索引 (index) 來存取資料,你可以用[]來找到特定位置的值。

若要在陣列中新增值的話,不能直接+= 需要以特殊程式操作,如下:

切割陣列方式

1. Slice:不會修改原陣列

這種方式是把你從原陣列複製你要的區間,但保留原陣列(只能做刪減),因此若你印出animals會是完全沒有被刪減的陣列

用法:arr.slice([begin[, end]])

若要從陣列後面開始刪除的話可使用負值代表從後面開始計算
若括弧內沒有給定任何值的話,則代表複製原陣列所有值

參考MDN的文件:點此

2. Splice:會修改原陣列

而這種方式則是直接處理原陣列(包含刪除、增加),回傳值為被刪除的元素陣列(新增值不會在裡面),因此印出原陣列months會是被修改過的陣列。

用法:array.splice(start[, deleteCount[, item1[, item2[, …]]]])

起始index(不可省略) - 刪除index(上限不包含)-要增加的值(不限數量)

若括弧內只有給一個值,此值代表起始index,會將此值後面的值全數刪除,若括弧內沒給任何值,則不會產生任何變化。

參考MDN的文件:點此

合併陣列

若想合併陣列,並不能用+的方式進行,需要以下列兩個方式進行

1. concat:不會修改本來陣列

語法:var new_array = old_array.concat(value1[, value2[, …[, valueN]]])

如下示意,若contact後方直接加入陣列變數,則會直接加入陣列中,若是巢狀陣變數加入,則是會以巢狀陣列加入。
除了括號內加入變數外,也可以直接加入值後合併陣列,下方列出了各種不同的加入方式以及最後成果。

也因為concat方式不會修改原陣列,因此需要再使用另一個變數接住新陣列

參考MDN的文件:點此

2. push:會修改原陣列

語法:arr.push(element1[, …[, elementN]])

括號裡一樣可以放變數或是值,但若放變數,且變數為陣列,合併後則會變成巢狀陣列。

比較特別的是回傳值為陣列的「長度」

參考MDN的文件:點此

Split()將字串分割為陣列

將一串字串分隔為陣列,因此印出及儲存的值都會以陣列模式除存

語法:str.split([separator[, limit]])

separator:根據這個值分割字串

limit:(選填)存入index在此之前值

*若括弧內放 ’’ 且中間沒有空格,就會是一個字母一個字母分割

參考MDN的文件:點此

--

--

Tina
Tina

Written by Tina

前端工程師 Mix 數位行銷人

No responses yet