原生For循环 vs ES6 Map：该如何选择？

嘿，这个问题问得很实在——很多开发者都会在性能和代码简洁性之间纠结，我来一步步给你拆解清楚：

一、性能：原生嵌套For循环真的比Map更优吗？ #

首先说性能：原生带索引的嵌套for循环，在大多数现代浏览器里确实比数组的map()（或者forEach这类高阶函数）性能略好一点。为啥？因为map这类方法每次迭代都要调用回调函数，涉及函数调用的上下文切换、参数传递这些额外开销，而原生for循环就是纯粹的循环逻辑，没有这些额外成本。

但划重点：这种性能差异只有在处理超大规模数据（比如十万、百万级别的数组）时才会被你明显感知到，日常业务里的几百、几千条数据，这点差异完全可以忽略，用户根本感觉不出来。

二、性能 vs 简洁：该怎么选？ #

核心看场景来权衡：

• 如果是性能敏感场景（比如大数据量处理、高频运行的核心逻辑，已经被性能测试测出瓶颈了）：果断用原生for循环，毕竟性能是硬指标；
• 90%的日常业务场景：优先选map这类简洁的写法！因为代码的可读性、可维护性远比那点微乎其微的性能差异重要。想想看，你写的嵌套for循环，还要手动管理i、j索引，还要每次清空productsDataArray，稍有不慎就会出bug（比如漏写清空数组的代码，导致数据串了）；而map/filter的写法一眼就能看明白逻辑，团队协作时别人接手也更快。而且函数式写法天然减少副作用，不容易出错。

三、用ES6 Map改写你的代码 #

先澄清一下：你提到的ES6 Map是指键值对数据结构，还是数组的map()迭代方法？我猜你可能两者有点混淆，所以给你两种优化写法，重点推荐结合ES6 Map数据结构的高效版本：

高效版：用ES6 Map先分组products（推荐） #

原代码的嵌套循环是O(n*m)的时间复杂度（每个category都要遍历一遍products），效率很低。我们可以先把products按category_id分组存到ES6 Map里，这样后续查找每个category对应的products只需要O(1)时间，整体复杂度降到O(n+m)，同时代码也更简洁：

let categoriesDataArray = [];
if (!this.props.categoriesIsFetching) {
  // 第一步：把products按category_id分组，存入ES6 Map
  const productsByCategory = new Map();
  this.props.products.forEach(product => {
    const categoryId = product.category_id;
    // 如果当前category_id还没在Map里，就初始化一个空数组
    if (!productsByCategory.has(categoryId)) {
      productsByCategory.set(categoryId, []);
    }
    // 把当前产品加入对应分组
    productsByCategory.get(categoryId).push(product);
  });

  // 第二步：用数组map方法遍历categories，生成目标数组
  categoriesDataArray = this.props.categories.map(category => ({
    title: category.title,
    // 找不到对应产品就返回空数组，避免undefined
    data: productsByCategory.get(category._id) || []
  }));
}

极简版：只用数组map+filter（适合小数据量） #

如果你的数据量很小，不需要考虑性能优化，也可以直接用数组的map和filter方法，写法超级简洁：

let categoriesDataArray = [];
if (!this.props.categoriesIsFetching) {
  categoriesDataArray = this.props.categories.map(category => ({
    title: category.title,
    data: this.props.products.filter(product => product.category_id === category._id)
  }));
}

这两种写法都比原代码简洁，而且避免了手动管理索引和清空数组的麻烦，不容易出错。

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