Set和Array中forEach方法区别?

Question

为什么Set中的forEach会死循环而Array却不会死循环？(我知道这两个方法不是同一个 vue3依赖更新时把Set里面的实例解构到数组中，不解构就如第二个例子死循环了)

Array不会死循环

let arr = [0]
arr.forEach(item => {
  console.log(item)
  arr.push(item + 1)
})

Set死循环了

let s = new Set
s.add(0)
s.forEach(item => {
  console.log(item)
  s.add(item + 1)
})

Answer 1

看文档：Set.prototype.forEach() - JavaScript | MDN (mozilla.org)

以及：Array.prototype.forEach() - JavaScript | MDN (mozilla.org)

对于 Set 来说，元素变更会影响 forEach() 遍历。对于 Array 来说，也会。

但是 Array 是基于索引来遍历，遍历开始的时候就已经确定了 length，即遍历总长度不变。但是对删除元素的情况，不过遍历超出新的长度，而对添加元素的情况，不会去遍历多出来的部分。如果遍历中途，在还没遍历到的索引上插入了新元素，会遍历到这个元素（毕竟按索引）

const words = ["one", "two", "three", "four"];
words.forEach((word) => {
    console.log(word);
    if (word === "two") {
        // 在遍历到索引 1 的时候在索引 2 插入了 hello
        words.splice(2, 0, "hello");
    }
}); 

// one
// two
// hello
// three