再也不写 break 和 continue 了

break 与 some、every

我的平时喜欢用 forEach 来代替 for 循环。但有时发现实现过程当中，须要使用 break。这时，通常又得切换回 for 循环。譬如碰见以下的逻辑：

let arr = [1, 2, 3, 4, 5]
let text = ''
for (let v of arr) {
  if (v === 3) { 
    break
  }
  text += v + ','
}
console.log(text) // "1,2,"
复制代码

今天看文章时想到，既然 some 的实现逻辑自己就是短路的，即一旦返回 true 后续迭代就再也不执行了，那么为啥不能够用 some 替换 forEach 呢？

let arr = [1, 2, 3, 4, 5]
let text = ''
arr.some(v => {
  if (v === 3) { 
    return true
  }
  text += v + ','
})
console.log(text) // "1,2,"
复制代码

通常状况下，咱们用 some 都是要用它返回结果的。而这种没有拿其返回值作文章的作法，算是代码阅读的一个信号：原来只是简简单单利用了其循环罢了。固然，这么写代码可读性不是很高。但确实是替换掉 for 的一种方式。

相似地，every 也是短路的，固然也能够替代 break。不过要保证 break 以前的迭代返回 true：

let arr = [1, 2, 3, 4, 5]
let text = ''
arr.every(v => {
  if (v === 3) { 
    return
  }
  text += v + ','
  return true
})
console.log(text) // "1,2,"
复制代码

本文发到朋友圈后，朋友说这样看起来不那么“pure”。建议用 reduce 实现，不考虑性能，毕竟空迭代不浪费多少性能。若是要替代 break 的逻辑，那么必须得用一些 flag 来实现，好比：

let arr = [1, 2, 3, 4, 5]
let text = arr.reduce(function(p, c) {
  if (this.break) {
    return p
  }
  // ...
  if (c === 3) {
    this.break = true
    return p
  }
  return p + c + ','
}.bind({}), '')
console.log(text) // "1,2,"
复制代码

另外关于“pure”，若是封装成函数后，是纯的了：

function formatter(arr) {
  let text = ''
  arr.some(v => {
    if (v === 3) { 
      return true
    }
    text += v + ','
  })
  return text
}
let arr = [1, 2, 3, 4, 5]
console.log(formatter(arr)) // "1,2,"
复制代码

也有网友留言，能够用递归方式来作。for 循环自己都是能够用递归来替换的。而通常 break 的条件，正好能够是一个递归出口。例如本例子的递归实现：

function formatter(arr, text = '', i = 0) {
  if (arr.length == 0 || arr[i] == '3') {
    return text
  }
  text += arr[i] + ','
  return formatter(arr, text, ++i)
}
let arr = [1, 2, 3, 4, 5]
console.log(formatter(arr)) // "1,2,"
复制代码

continue 与 return

至于 continue 嘛。。。

let arr = [1, 2, 3, 4, 5]
let text = ''
for (let v of arr) {
  if (v === 3) { 
    continue
  }
  text += v + ','
}
console.log(text) // "1,2,4,5,"
复制代码

答案意外简单，forEach 直接 return 就行了：

let arr = [1, 2, 3, 4, 5]
let text = ''
arr.forEach(v => {
  if (v === 3) { 
    return
  }
  text += v + ','
})
console.log(text) // "1,2,4,5,"
复制代码

若是 continue 和 break 同时存在呢？譬如：

let arr = [1, 2, 3, 4, 5]
let text = ''
for (let v of arr) {
  if (v === 2) {
    continue
  }
  if (v === 4) { 
    break
  }
  text += v + ','
}
console.log(text) // "1,3,"
复制代码

只用 some 就行了，反正数组那几个 API，本质上都是 for 循环。

let arr = [1, 2, 3, 4, 5]
let text = ''
arr.some(v => {
  if (v === 2) {
    return
  }
  if (v === 4) { 
    return true
  }
  text += v + ','
})
console.log(text) // "1,3,"
复制代码

some 和 every 须要注意的地方

some 函数用来判断数组中，是否至少有一个元素知足回调函数的条件。此时回调函数能够称为谓词函数（即判断是否是的意思）。规范文档中 some 是这么实现的：

点击展开

1. Let O be the result of calling ToObject passing the this value as the argument.
2. Let lenValue be the result of calling the [[Get]] internal method of O with the argument "length".
3. Let len be ToUint32(lenValue).
4. If IsCallable(callbackfn) is false, throw a TypeError exception.
5. If thisArg was supplied, let T be thisArg; else let T be undefined.
6. Let k be 0.
7. Repeat, while k < len
   1. Let Pk be ToString(k).
   2. Let kPresent be the result of calling the [[HasProperty]] internal method of O with argument Pk.
   3. If kPresent is true, then
      1. Let kValue be the result of calling the [[Get]] internal method of O with argument Pk.
      2. Let testResult be the result of calling the [[Call]] internal method of callbackfn with T as the this value and argument list containing kValue, k, and O.
      3. If ToBoolean(testResult) is true, return true.
   4. Increase k by 1.
8. Return false.

用 JS 模拟，其核心逻辑以下：

Array.prototype.some = function(callbackfn, thisArg) {
  let len = Number(this.length)
  let k = 0;
  while(k < len) {
    let Pk = String(k)
    if (Pk in this) {
      let kValue = this[Pk]
      if (callbackfn.call(thisArg, kValue, k, this)) {
        return true
      }
    }
    k++
  }
  return false
}
复制代码

能够看出，遇到回调返回值是 true 的话，函数就直接返回、结束了。这是种短路算法，并非全部回调都执行一遍，而后再最后求全部与值。every 也相似，不过与之相反，遇到回调返回值是 false 时，总体就直接返回 false 了。

从实现上表达出的语义来说，some 是在说：有一个成功，我就成功，而 every 是在说：有一个失败，我就失败。

另外要强调一点，对于稀疏数组，不存在的索引值时，回调函数是不执行的。例以下例子中回调函数只执行了 3 遍（其余 API 也相似）。

let arr = [1, 2, 3]
delete arr[1]
arr[5] = 6
console.log("1" in arr) // false
console.log(arr) // [1, empty, 3, empty × 2, 6]
arr.some(v => {
  console.log(v) // 1 3 6
})
复制代码

所以空数组，无论回调函数如何写，其结果还是 false：

[].some(_ => true) // false
复制代码

本文完。