Какая из этих функций 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

они оба должны быть идентичны, если вы сделаете их реализации одинаковыми, и уменьшить его будет немного проще, поскольку разработчики знают, что в нем есть аккумулятор, тогда как в forEach вы просто реализуете сокращение самостоятельно

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

редактирование: возможно, что под капотом forEach более производительно, но если вы используете babel или другой транспортер, это, вероятно, спорный вопрос, потому что на этом этапе они должны сделать работу более идиоматической версии производительный. ( источник )