今天想分享在網路上看到的陣列題目。
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
我的解釋
for...of是一個陣列迭代器。
我們先離開題目看，在沒有對來源陣列變更的狀態下，它是以下結果：
const arr = [1, 2, 3];
for (const item of arr){
console.log(item); // 1, 2, 3
}
- 其實
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
}
- 回到題目，每次的迭代做了以下事項：
arr.shift()→ 刪除arr第一個值（不是指 index 1 喔！）arr.push(item)→arr最後面加入當下依賴index取得的item值 - 所以在每次迭代時，
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 問題。詳細就請大家參考以下推薦文章連結了。
