揭示JavaScript数组迭代中的陷阱：for...of与shift()的交互

现象

const arr = [1, 2, 3, 4, 5];

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

console.log(arr);

// 为什么？
/**
 * 输出结果
 * 1
 * 3
 * 5
 * [4,5]
 */

过程

• 第一次迭代
  • 目前指针指向第0项目也就是1
  • console.log(item);输出1
  • arr.shift(); arr目前变成[2, 3, 4, 5]
  • 目前指针指向第0项目变成2
• 第二次迭代
  • 指针+1 目前指针指向第1项目也就是3
  • console.log(item);输出3
  • arr.shift(); arr目前变成[3, 4, 5]
  • 目前指针指向第1项目变成4
• 第三次迭代
  • 指针+1 目前指针指向第2项目也就是5
  • console.log(item);输出5
  • arr.shift(); arr目前变成[4, 5]
  • 目前指针指向第2项目变成 undefined
  • 完成迭代

最终输出[4,5]