如何从 for 循环中的回调内部中断

Question

如果我在javascript中bind函数find，我可以执行以下操作：

const _array = [4,10,6,5,20];

const loop = Array.prototype.find.bind(_array);
const r = loop(function (x) {
    return x === 6;
});

console.log(`Final result => ${r}`); // here prints: Final result => 6

如您所见，在 binded loop 函数中，我有一个从 find 返回的 回调。一切正常，没关系...

但是，试图模拟类似的东西，我以这个结尾：

function loop(a,callback) {
    for(i=0;i<a.length;i++)
        callback(a[i]);
};

const r = loop([4,10,6,5,20], function (x) {
    console.log("x value", x);
    return x===6; // need to break the loop function and return to 'r' the 'x' value
});

console.log(`Final result => ${r}`); // here would print the value of x, that would be 6

我得到：

x value 4
x value 10
x value 6
x value 5
x value 20
undefined

什么意思是r函数里面的return x===6不能正常工作，因为for-loop一直到最后。

那么，我的问题：

x===6 时如何破坏loop 函数并返回x 的值？

Answer 1

查看回调返回什么值，然后决定是否继续：

function loop(a, callback) {
  for (let i = 0; i < a.length; i++) {
    const found = callback(a[i]);
    if (found) {
      return a[i];
    }
  }
}

const r = loop([4,10,6,5,20], function (x) {
  console.log("x value", x);
  return x===6;
});

console.log(`Final result => ${r}`);

Answer 2

你也可以用递归写find

const find = (f, [ x, ...xs ]) =>
  x === undefined
    ? null
  : f (x) === true
    ? x
  : find (f, xs)

console.log
  ( find
      ( x => x > 8
      , [ 5, 7, 9, 3, 1 ]
      )
      // 9
      
  , find
      ( x => x < 4
      , [ 5, 7, 9, 3, 1 ]
      )
      // 3
  )

可以使用索引参数代替解构赋值

const find = (f, xs = [], i = 0) =>
  i >= xs.length
    ? null
  : f (xs[i]) === true
    ? xs[i]
  : find (f, xs, i + 1)

在这两种情况下，只要 f 返回 true，对数组的迭代就会停止