这些ArrayToMap函数用法中的哪一种在性能方面更好？

Question

尝试映射数组，以下哪种实现在性能上更好？有更好的解决方案吗？

//Given the following Array of people:
const people = [ { name: 'Alice', available: true },  { name: 'Bob', available: false }, { name: 'Charlie', available: true }];

const mapWithReduce = (people) => people.reduce((map, person) => ({ [person.name]: person.available, ...map }), {});

const mapWithForEach = (people) => {
    const map = {};
    people.forEach((person) => map[person.name] = person.available);
    return map;
}

我发现 mapWithReduce 更漂亮，但我不知道 ... map} 是否在每次迭代中都复制地图。 mapWithForEach 似乎更有效。

Answer 1

我喜欢这个解决方案。

const people = [ 
  { name: 'Alice', available: true },
  { name: 'Bob', available: false },
  { name: 'Charlie', available: true }
];

const peopleMap = people.reduce((map, person) => {
  map[person.name] = person;
  return map;
}, {});

console.log(peopleMap);

看起来等于forEach解决方案，但不创建局部变量。

https://jsperf.com/arraymapeachreduce/9

Answer 2

在性能方面，使用for循环最快。

const people = [{ name: 'Alice', available: true }, { name: 'Bob', available: false }, { name: 'Charlie', available: true }]

const mapWithForLoop = (key, value) => array => {
  const map = {}

  for (let i = 0; i < array.length; i++) {
    const entry = array[i]
    map[entry[key]] = entry[value]
  }

  return map
}

const mapPeopleWithForLoop = mapWithForLoop('name', 'available')

console.log(mapPeopleWithForLoop(people))

forEach()方法接近。

Answer 3

如果您使它们的实现相同，并且两者都应该相同，并且reduce有点容易理解，因为开发人员知道它有一个累加器，而在forEach中，您只是在实现reduce自己而已

const mapWithReduce = (people) => people.reduce((map, person) => 
  {
    map[person.name]: = person.available;
    return map
  }, {}
);

edit：forEach可能更高效，但是如果您使用babel或其他编译器，那么可能就没有定论了，因为在这一点上，他们应该做更多的工作惯用的版本性能。 （source）