JavaScript中能否使用单个map方法为多个变量映射不同值

完全可以实现同等效果，而且没必要调用三次map做三次重复遍历——三次map会对数组做三轮全量循环，时间复杂度为O(3n)，单次遍历就能完成三个属性的提取，性能更优，最终得到的x/y/z数组和原写法的结果完全一致，元素顺序、取值没有任何差异。

首先明确两个场景的实现差异：

• 追求功能等价+性能最优：推荐用单次遍历实现，符合编码最佳实践
• 严格要求仅调用一次map方法：技术上可实现，但属于违反方法设计语义的取巧写法，生产环境不推荐

推荐写法（单次遍历） #

最简洁的实现是用reduce做一次遍历，直接解构出三个目标数组：

const [x, y, z] = failedCo2Quantities.reduce(
  (collector, currentItem) => {
    collector[0].push(currentItem.ITEMID)
    collector[1].push(currentItem.PRODUCTID)
    collector[2].push(currentItem.PLANTID)
    return collector
  },
  [[], [], []] // 初始值依次对应x、y、z三个空结果数组
)

如果数组体量很大、追求极致遍历性能，也可以用普通for循环实现，额外开销最低：

const x = [], y = [], z = []
for (let idx = 0; idx < failedCo2Quantities.length; idx++) {
  const item = failedCo2Quantities[idx]
  x.push(item.ITEMID)
  y.push(item.PRODUCTID)
  z.push(item.PLANTID)
}

仅调用一次map的取巧写法（不推荐） #

如果你硬要只调用一次map方法达成效果，确实可以写，但本质是滥用map的副作用：Array.map的设计初衷是遍历元素、映射生成一个和原数组长度一致的新数组，这种写法会直接丢弃map的返回值，平白浪费内存存储无用的映射结果，完全不符合方法的使用规范：

// 反面示例，请勿在生产环境使用
const x = [], y = [], z = []
failedCo2Quantities.map((item) => {
  x.push(item.ITEMID)
  y.push(item.PRODUCTID)
  z.push(item.PLANTID)
})

如果就是要通过遍历执行副作用操作，哪怕不用reduce、for循环，也应该用forEach而不是map。

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