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

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

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

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

題目：請問 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
}​

2. 其實 for...of （MDN）的 item 依賴的是一個看不見的參數 index，而 JavaScript 的 index 是從 0 起算。所以其實 item 是 arr[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
}

3. 回到題目，每次的迭代做了以下事項：
   arr.shift() → 刪除 arr 第一個值（不是指 index 1 喔！）
   arr.push(item) → arr 最後面加入當下依賴 index 取得的 item 值
4. 所以在每次迭代時，for (const item in arr) 中的 arr 都有變化，但產生 item 要依據的 index 依舊是 0、1、2.... 這樣增加。
   畫成圖更容易理解 for...of 中發生了什麼事情。

出題者給的答案

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

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

延伸閱讀

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

上面 index 的題目，讓我想到另一篇關於 Vue 的 v-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 嗎？