JavaScript 如何操作陣列第一個元素 – shift( ) 與 unshift( )

起因

這個主題是網站夥伴在參加面試的時候，被面試官問到的問題 – 【 JavaScript 的 shift 語法是拿來對陣列做什麼的? 】

跟我分享的時候，我也不清楚這個語法…想說自己落伍了嗎

shift感覺像是將整個陣列打亂，想不到一查才發現完全不是…哈哈哈

這一篇將會介紹 shift 跟 它的夥伴 unshift 的用處，以及有哪些注意事項

shift( ) 方法 – 移除開頭元素

shift( ) 是 JavaScript 陣列的一個內建方法，它可以移除陣列的第一個元素，同時回傳被移除的元素

舉例來說

現在有一個陣列 [“蘋果”,”橘子”,”鳳梨”]

那我們針對陣列shift，陣列就會剩下 橘子 跟 鳳梨 兩個元素了

另外shift也有回傳值，就是被排除的第一個元素

let arr= ["蘋果","橘子","鳳梨"]
let val = arr.shift()
console.log(val)

⬆️大家可以自己試試看，會印出「蘋果」

而這個特性，讓shift( )可以模擬 FIFO (First In First Out) 先進先出的這個情境，也就是可以模擬佇列(Queue)的行為

(*假設陣列也是從第一個元素建立起的話)

注意事項

• 效能： 雖然 shift( ) 可以移除第一個元素，但對於大型陣列可能效能不佳。那是因為每次移動元素時，其他元素都需要重新索引
• 陣列為空的狀況 : 對其進行 shift( )並不會報錯，但會返回undefined

unshift( ) 方法 – 新增開頭元素

unshift( ) 方法可以在陣列的開頭新增一個或多個元素，並回傳新的陣列長度

範例如下

let arr= ["蘋果","橘子","鳳梨"]
let cnt = arr.unshift("西瓜","桃子")
console.log(cnt)

⬆️在這個範例中，一次再前面插入了兩個元素，而更改後的陣列長度會回傳到 cnt 這個變數，也就是 5

注意事項

• 效能： 與shift( )相似，若陣列較大，本身重新編製的速度也會受到影響
• 沒有指定插入元素 : 若是unshift( ) 並沒有指定插入的元素，則陣列不會受到影響，會回傳陣列原先的長度

結論

說起來，其實 JS 的學問也是很多的

平常用 JS 都是用最低限度的標準去使用，只求能跑哈哈

故 JS 的筆記好像比其他語言來的多了些，因為常常遇到新的坎

另外，抽空應該會來寫個指派變數的差異 (var、let以及const)，想寫很久了但一直還沒動筆…

參考文章 :

• Array.prototype.shift() – JavaScript | MDN (mozilla.org)
• Array.prototype.unshift() – JavaScript | MDN (mozilla.org)

🧡幫我點一個小小的廣告或留言，都是對我的支持(每天都只有詐騙跟色情留言…)

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

走過的路程。順手寫成了筆記