再也不寫 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
複製代碼

本文完。