Javascript/lodash过滤大数组性能低下，求更高效方案

嘿，这个问题我之前帮不少开发者解决过——处理超大规模对象数组的时候，不管是原生filter还是lodash的_.filter，都可能碰到性能瓶颈，尤其是数组规模达到十万甚至百万级的时候。下面给你几个实用的优化方向，亲测有效：

filter这类高阶函数每次迭代都要调用回调函数，这在数组很大的时候会产生不小的开销。换成手动for循环可以省去这部分损耗，同时缓存数组长度还能减少属性查找的时间：

const filteredArray = [];
const arrayLength = largeArray.length; // 缓存数组长度，避免每次循环都读取length属性

for (let i = 0; i < arrayLength; i++) {
  const currentItem = largeArray[i];
  // 这里替换成你的过滤条件
  if (currentItem.targetProperty === yourDesiredValue) {
    filteredArray.push(currentItem);
  }
}

这种写法通常比filter快20%-50%，数组越大，差距越明显。

如果你需要多次基于同一个属性过滤数组，那用空间换时间绝对是最优解——提前把对象按目标属性分组，之后过滤直接取对应分组即可：

// 只需要预处理一次
const propertyIndex = new Map();
for (const item of largeArray) {
  const key = item.targetProperty;
  if (!propertyIndex.has(key)) {
    propertyIndex.set(key, []);
  }
  propertyIndex.get(key).push(item);
}

// 之后每次过滤直接获取，O(1)查询速度
const filteredArray = propertyIndex.get(yourDesiredValue) || [];

预处理的时间成本只需要付出一次，之后每次过滤都是瞬间完成，非常适合频繁查询的场景。

如果你的过滤条件是基于数字、布尔值这类基本类型属性，可以先把属性值提取到Typed Array中——Typed Array在内存中是连续存储的，访问速度比普通数组快很多：

// 假设targetProperty是数字类型，先提取到Typed Array
const propertyValues = new Uint32Array(largeArray.map(item => item.targetProperty));
const filteredArray = [];
const len = propertyValues.length;

for (let i = 0; i < len; i++) {
  if (propertyValues[i] === yourDesiredValue) {
    filteredArray.push(largeArray[i]);
  }
}

这个方法的性能提升取决于属性类型和数组规模，对于纯数字属性的超大数组，效果会很明显。

如果数组大到过滤操作会卡住页面UI，那把过滤逻辑放到Web Worker里是最佳选择——让后台线程处理计算，主线程继续响应用户操作：

// 主线程代码
const filterWorker = new Worker('./filter-worker.js');
filterWorker.postMessage({ sourceArray: largeArray, targetValue: yourDesiredValue });

filterWorker.onmessage = (event) => {
  const filteredArray = event.data;
  // 这里处理过滤后的结果
};

// filter-worker.js 内容
self.onmessage = (event) => {
  const { sourceArray, targetValue } = event.data;
  const result = [];
  const len = sourceArray.length;
  
  for (let i = 0; i < len; i++) {
    if (sourceArray[i].targetProperty === targetValue) {
      result.push(sourceArray[i]);
    }
  }
  
  self.postMessage(result);
};

注意：如果数组特别大，传递数据到Worker会有序列化开销，可以考虑用Transferable Objects进一步优化，但一般场景下上面的写法就足够了。

• 单次过滤：优先用手动for循环，简单高效；
• 多次重复过滤同一属性：提前建立索引，用空间换时间；
• 基本类型属性过滤：试试Typed Arrays；
• 怕阻塞UI：用Web Workers后台处理。

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