JS массив: фильтр () с map () против forEach ()

Question

Что является более оптимизированным способом .filter() + .map() ИЛИ .forEach()?

Вот примерный массив объектов:

var personnel = [
    {
        id: 5,
        name: "Luke Skywalker",
        pilotingScore: 98,
        shootingScore: 56,
        isForceUser: true,
    },
    {
        id: 82,
        name: "Sabine Wren",
        pilotingScore: 73,
        shootingScore: 99,
        isForceUser: false,
    },
    {
        id: 22,
        name: "Zeb Orellios",
        pilotingScore: 20,
        shootingScore: 59,
        isForceUser: false,
    },
    {
        id: 15,
        name: "Ezra Bridger",
        pilotingScore: 43,
        shootingScore: 67,
        isForceUser: true,
    },
    {
        id: 11,
        name: "Caleb Dume",
        pilotingScore: 71,
        shootingScore: 85,
        isForceUser: true,
    },
];

И, допустим, мы хотим получить окончательный массив, дающийтолько имя и идентификатор, где isForceUser=true

[ { id: 5, name: 'Luke Skywalker' }, 
  { id: 15, name: 'Ezra Bridger' }, 
  { id: 11, name: 'Caleb Dume' } ] 

Теперь есть 2 способа решить эту проблему:

1. Используя .filter () +. map (), как показано ниже:

var APersonnel = personnel
                    .filter((person) => person.isForceUser)
                    .map((person) => ({ id: person.id, name: person.name }));

Используя .forEach () и выдвигая новый объект:

var BPersonnel = [];
personnel.forEach((person) => {
    if (person.isForceUser) {
        BPersonnel.push({ id: person.id, name: person.name });
    }
});

Какое из указанных выше решений лучше и почему?

Answer 1

Это не те вещи, в которых вы должны стремиться к повышению производительности. Вы говорите о «персонале» здесь.Это довольно ограниченный набор массивов, я думаю.Если у вас есть проблемы с производительностью, я предлагаю вам использовать вкладку производительности Chrome Dev, чтобы увидеть, что ее вызывает.

Чтобы ответить на ваш вопрос, фильтр + карта семантически проще для глаз, что опять же является личным мнением.Строго по производительности forEach быстрее, где, скорее всего, базовый цикл of for еще быстрее.Но опять же, это несколько миллисекунд, о которых мы говорим.Что не оправдывает затрат на переписывание:)

Другим способом может быть использование reduce, меньше кода и только один цикл:

const APersonnel = personell.reduce((acc, person) => {
  if (person.isForceUser) {
    acc.push({ id: person.id, name: person.name });
  }
}, []);

Answer 2

Лучше всего использовать foreach. Потому что map и filter собираются создать два массива. foreach не создает массивы. Так что foreach самый лучший. посмотрите на эти утверждения ниже,

Метод filter () создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Answer 3

Я могу ошибаться, но я предполагаю, что forEach будет лучше.

В первом сценарии вы перебираете 5 элементов, а затем снова 3 элемента.Во втором сценарии вы просто перебираете 5 предметов.И все же, если в foreach эффективно выполняется в фильтре.

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