JavaScript过滤大型数组如何避免全遍历以提升React Native应用性能

解决方案 #

首先说明：2400个元素的遍历量级非常小，即使是React Native的JS线程跑原来的filter+slice方案，绝大多数场景下也不会出现感知级别的性能问题。如果确实需要优化避免全量遍历，可以参考以下方案：

方案1：手动for循环提前终止 #

这是最直接、性能最优的实现，只要凑够指定数量的匹配项就立刻停止遍历，不需要走完整个数组：

const keyword = 'whatever word';
const recommendList = [];
// 用for of遍历，满足条件直接break终止
for (const item of bigArray) {
  if (item.name.includes(keyword)) {
    recommendList.push(item);
    if (recommendList.length >= 5) break;
  }
}

只有当整个数组里符合条件的元素不足5个时，才会遍历完全部元素，其余场景都可以提前终止。

方案2：利用some方法终止遍历 #

也可以用数组内置的some方法实现提前终止，逻辑和手动for循环一致：

const keyword = 'whatever word';
const recommendList = [];
bigArray.some(item => {
  if (item.name.includes(keyword)) recommendList.push(item);
  // 当返回true时，some会立刻终止遍历
  return recommendList.length >= 5;
})

高频搜索场景优化 #

如果你需要对同一个数组反复执行不同关键词的搜索，可以提前构建索引缓存，后续搜索不需要遍历数组直接从索引取结果，适合搜索频次很高的场景：

• 可以提前把所有name值和对应的对象做映射，甚至做前缀树索引，搜索时间可以降到O(1)或者O(关键词长度)

最后补充：建议先在低端测试机上跑一下原有方案的性能，2400次简单的字符串匹配执行耗时通常不到1ms，不会有可感知的卡顿，如果没有实测到性能问题不需要做额外优化。

内容的提问来源于stack exchange，提问作者Quang Bình Đinh