数组Filter谓词性能优化：如何无外部变量实现遇数截断过滤？

现有一个数组filter谓词，功能是遇到数字时移除该数字及所有后续项，但当前实现每次执行都会重复遍历整个数组，性能存在损耗。原因是谓词内部需要判断是否已遇到数字的状态，不得不访问第三个参数（整个数组）。请问有没有其他实现方式，能保证谓词不依赖外部变量？

现有代码示例：

const filterNumberOrAfter = (_: any, index: number, array: any[]): boolean => {
  let encounterdNumber = false
  const total = array.filter((path) => {
    if (encounterdNumber) return false
    if (typeof path === 'number') {
      encounterdNumber = true
      return false
    }
    return true
  })
  return Boolean(total[index])
}

console.log(['hello', 'world', 'meow', 2, 'example', 'rest'].filter(filterNumberOrAfter))
// [ "hello", "world", "meow" ]

优化实现方案 #

方案1：先找分割点再截取（性能最优） #

只需要一次遍历找到第一个数字的索引，直接截取该索引之前的部分，完全避免重复遍历：

const filterBeforeFirstNumber = (arr: any[]) => {
  const firstNumIndex = arr.findIndex(item => typeof item === 'number');
  return firstNumIndex === -1 ? [...arr] : arr.slice(0, firstNumIndex);
};

console.log(filterBeforeFirstNumber(['hello', 'world', 'meow', 2, 'example', 'rest']));
// [ "hello", "world", "meow" ]

方案2：用reduce维护状态遍历 #

借助reduce在遍历过程中维护是否遇到数字的状态，一次遍历完成过滤：

const filterBeforeFirstNumber = (arr: any[]) => {
  return arr.reduce((acc, item) => {
    if (acc.encountered) return acc;
    if (typeof item === 'number') {
      return { ...acc, encountered: true };
    }
    return { ...acc, result: [...acc.result, item] };
  }, { result: [], encountered: false }).result;
};

console.log(filterBeforeFirstNumber(['hello', 'world', 'meow', 2, 'example', 'rest']));
// [ "hello", "world", "meow" ]

方案3：自定义带状态的过滤工具 #

如果需要类似原生filter的回调形式，可自己封装一个带状态的过滤函数，回调之间能共享状态且不依赖外部变量：

function filterWithState<T>(arr: T[], callback: (item: T, index: number, encountered: boolean) => [boolean, boolean]) {
  const result: T[] = [];
  let encountered = false;
  for (let i = 0; i < arr.length; i++) {
    const [keep, newEncountered] = callback(arr[i], i, encountered);
    encountered = newEncountered;
    if (keep) result.push(arr[i]);
    if (encountered) break; // 遇到数字后直接终止遍历，提升性能
  }
  return result;
}

// 使用示例
const filtered = filterWithState(['hello', 'world', 'meow', 2, 'example', 'rest'], (item, _, encountered) => {
  if (encountered) return [false, true];
  if (typeof item === 'number') return [false, true];
  return [true, false];
});

console.log(filtered);
// [ "hello", "world", "meow" ]

补充说明 #

原生Array.filter的回调是独立执行的，无法在回调之间直接共享状态——要么依赖外部变量，要么像原代码那样每次回调都重新遍历整个数组。所以最优思路是跳出原生filter的限制，改用一次遍历的方案，从根源上解决性能问题。

内容的提问来源于stack exchange，提问作者ThomasReggi