Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想或解决方案。

Array.prototype.forEach ( callbackfn [ , thisArg ] )

规范地址（下述引用文，均源自该规范）：​​https://tc39.es/ecma262/#sec-array.prototype.foreach​​

跳过不存在的元素

callbackfn 只对数组中实际存在的元素调用；数组中缺少元素时不调用该函数。

​​forEach​​ calls callbackfn once for each element present in the array, in ascending order. callbackfn is called only for elements of the array which actually exist; it is not called for missing elements of the array.

let ary = [3, undefined, 2, , 1]
console.log(ary.length) // 5
ary.forEach(i => {
  console.log(`execute ${i}`)
})

// 输出结果：
execute 3
execute undefined
execute 2
execute 1

元素值为 undefined，​​callbackfn​​ 正常执行；元素值缺失，​​callbackfn​​ 直接跳过。

callbackfn 中新增加的元素不会被处理

在 forEach 调用开始后，追加到数组中的元素将不会被 callbackfn 访问。

Elements which are appended to the array after the call to ​​forEach​​ begins will not be visited by callbackfn.

ary = [1, 2]
ary.forEach(i => {
  console.log(`execute ${i}`)
  ary.push(ary.length)
})
console.log(ary.length) // 4

// 输出结果：
execute 1
execute 2

执行了2次，但 ary 最终变成了 ​​[1, 2, 2, 3]​​。

callbackfn 中变更元素

① 如果数组中已有的元素被改变了，它们传递给 callbackfn 的值将是 forEach 访问它们时的值。

If existing elements of the array are changed, their value as passed to callbackfn will be the value at the time ​​forEach​​ visits them;

ary = [1, 2]
ary.forEach(i => {
  console.log(`execute ${i}`)
  ary[1] = 3
})

// 输出结果：
execute 1
execute 3

执行输出结果为 ​​1 3​​​ ，​​callbackfn​​ 获取的值为实时访问的值（修改后的值）。

② 在开始调用 forEach 之后和访问之前被删除的元素不会被访问。

elements that are deleted after the call to ​​forEach​​ begins and before being visited are not visited.

ary = [1, 2]
ary.forEach(i => {
  console.log(`execute ${i}`)
  delete ary[1]
})

// 输出结果：
execute 1

执行输出结果为 ​​1​​​ ，​​callbackfn​​ 中删除的元素不再被访问。

终止执行

在 ​​forEach​​​ 中用 ​​return​​ 不会返回，函数会继续执行。

ary = [1, 2];
ary.forEach(i => {
  console.log(`execute ${i}`)
  return;//无效
})

// 输出结果：
execute 1
execute 2

return 并不会停止执行后续的操作。

原因： 仔细查看就会发现，​​return​​​ 结束的是当前 ​​callbackfn​​​ ，并不是 ​​forEach​​ 函数本身。

解决方案：

① 使用 ​​try​​ 监视代码块，在需要中断的地方抛出异常；

② 官方推荐方法（替换方法），用 ​​every​​​ 和 ​​some​​​ 替代 ​​forEach​​​函数 – ​​every​​​ 在碰到 ​​return false​​​ 的时候，中止循环；​​some​​​在碰到 ​​return true​​ 的时候，中止循环。

ary = [1, 2];
try {
  ary.forEach(i => {
    if (i === 2) throw new Error('终止执行')
    console.log(`execute ${i}`)
  })
} catch (e) {}
// or
ary.every(i => {
  if (i === 2) return false
   console.log(`execute ${i}`)
})

// 输出结果：
execute 1

【重点】异步执行

模拟异步函数

function asyncFn (num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num), 1000*num)
  })
}

存在数组 ​​const ary = [3, 2, 1]​​​ ，期望按照顺序输出 ​​3 2 1​​。

ary.forEach(async num => {
  let res = await asyncFn(num)
  console.log(res)
})
// 输出结果：1 2 3

ECMA262规范：

你不知道的 forEach（javascript）_javascript

for (let k = 0, len = ary.length; k < len; k++) {
  if (k in ary) {
    let ele = ary[k]
    asyncFn(k)  // callbackfn(ele, k, ary)
  }
}

​​callbackfn​​ 的执行无法保证顺序（异步），所以会导致上述问题。

解决方案： 使用 ​​for...of​​

for(let num of ary) {
  let res = await asyncFn(num)
  console.log(res)
}
// 输出结果：3 2 1

​​for...of​​​ 并不是简单的遍历执行，而是通过迭代器去遍历 ​​Array.prototype[Symbol.iterator]()​​。

规范地址：​​https://tc39.es/ecma262/#sec-for-in-and-for-of-statements​​

let iterators = ary[Symbol.iterator]()
iterators.next()  // {value: 3, done: false}

​​for...of​​ 的实现

let iterators = ary[Symbol.iterator]()
let res = iterators.next()
while (!res.done) {
  let value = res.value
  await asyncFn(value)
  res = iterators.next()
}

执行完成当前值，才会调用下一个 ​​next​​。

再延伸一下，生成器 ​​yield​​ 也是迭代器

实现斐波那契

function* fibonacci(){
  let [prev, cur] = [0, 1]
  while (true) {
    [prev, cur] = [cur, prev + cur]
    yield cur
  }
}

for (let i of fibonacci()) {
  if (i > 50) break
  console.log(i)
}