【解題筆記 - JS】陣列迭代 for...of 的 value 來源

閱讀時間約 3 分鐘

今天想分享在網路上看到的陣列題目。

for...of 是一種陣列迭代的方法,通常 for...ofvalue 是陣列中的每個值,如果我們在迭代過程中對陣列操作會發生什麼事?

其實我一開始也答錯,看到解答才覺得「啊~其實原理很簡單,我怎麼忘了。」


題目:請問 console.log 的結果與原因?

來源:https://x.com/_jayphelps/status/1774640511158022335?s=20

const arr = [1, 2, 3];

for (const item of arr){
arr.shift()
console.log(item);
arr.push(item);
}

.

.

.

準備好了嗎?公布解答

.

.

.

結果分別是 1, 3, 3


我的解釋

  1. for...of 是一個陣列迭代器。
    我們先離開題目看,在沒有對來源陣列變更的狀態下,它是以下結果:
const arr = [1, 2, 3];

for (const item of arr){
console.log(item); // 1, 2, 3
}
  1. 其實 for...ofMDN)的 item 依賴的是一個看不見的參數 index,而 JavaScript 的 index 是從 0 起算。所以其實 itemarr[index]
const arr = [1, 2, 3];

for (const item of arr){
console.log(item);
// 第一次迭代,index 為 0,item 為 arr[0],也就是 1
// 第二次迭代,index 為 1,item 為 arr[1],也就是 2
// 第三次迭代,index 為 2,item 為 arr[2],也就是 3
}
  1. 回到題目,每次的迭代做了以下事項:
    arr.shift() → 刪除 arr 第一個值(不是指 index 1 喔!)
    arr.push(item)arr 最後面加入當下依賴 index 取得的 item
  2. 所以在每次迭代時,for (const item in arr) 中的 arr 都有變化,但產生 item 要依據的 index 依舊是 0、1、2.... 這樣增加。
    畫成圖更容易理解 for...of 中發生了什麼事情。
raw-image


出題者給的答案

解答:https://x.com/_jayphelps/status/1774642057014923608?s=20

出題者給的答案是用 for 迴圈解釋上方的 index 概念,也是一個點題卻也不破題的做法。或許出題者也需要點擊流量,就請點入上方連結觀看吧!


延伸閱讀

前陣子終於從六角的 Vue 直播班畢業了(求職中~)。

上面 index 的題目,讓我想到另一篇關於 Vuev-for 文章,v-for 是一個能將資料用列表方式渲染的手法,例如可以寫作以下方式,就可以依據 data 裡的資料數量產生相同數量的 <li>

<ul>
<li v-for="(item, idx) in data">{{ item }}</li>
// item 是 data 裡的每筆資料
// idx 是 data 中資料序列,比照陣列 index,也就是從 0、1、2...
</ul>

官方文件提到 v-for 需要搭配唯一值 key(也就是唯一的、不重複的、不變的值),否則可能出現錯誤。key 的來源可以是資料裡的唯一值,也可以是 idx,但這並不是推薦做法。因為如果我們對來源 data 內的資料做會影響順序的操作,就會產生像上面的 for...of 問題。詳細就請大家參考以下推薦文章連結了。

文章:v-for 可以使用 index 當作 key 嗎?

12會員
20內容數
從藝術領域轉職到前端工程師,喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
留言0
查看全部
發表第一個留言支持創作者!