Три очень крутые функции JavaScript для работы с массивами, которые должен знать каждый

В этой статье речь пойдёт о функция .map(), .reduce() и .filter(). Это очень удобные и крутые функции, которые лично я освоил только с приходом в мою жизнь React. Там это практикуется очень сильно, а вот в классическом JavaScript на эти функции скудновато.

Все эти функции отлично работают через конструкцию, которую я покажу ниже. С приходом ES6 использовать их будет вообще вкусно. Всё показываю ниже.

.map()

Этот метод позволяет собрать новый массив по определённому правилу, которое мы зададим в функции обработчике. Например, нам нужно получить массив ID’шников товаров из массивах товаров. Обычно, все бы мы использовали функцию .forEach(), но с помощью .map() это всё делается элементарно:

let array = [
  {
    id: 1,
    name: "Баклажаны"
  },
  {
    id: 4,
    name: "Помидоры"
  },
  {
    id: 58,
    name: "Огурцы"
  },
];

const itemIds = array.map(function(item) {
  return item.id;
});

console.log(itemIds); //[ 1, 4, 58 ]

Более того, в ES6 это бы выглядело так:

const itemIds = array.map(item => item.id);
console.log(itemIds); //[ 1, 4, 58 ]

Что вообще-то очень элегантно и супер-красиво. Дальше — интереснее.

.reduce()

Позволяет просуммировать количество одного из свойств объекта с начальным числом/строкой. Здесь уже сложнее, первым аргументом функция принимает обработчик, а вторым изначальное число. Например:

let array = [
    {
        users: 23,
        group: "Любители джаза"
    },
    {
        users: 15,
        group: "Любители блюза"
    },
    {
        users: 9,
        group: "Любители соула"
    },
];

const usersTotal = array.reduce(function(counter, element) {
    return counter + element.users;
}, 0);

console.log(usersTotal); //47

А так на ES6:

const usersTotal = array.reduce((counter, element) => counter + element.users, 0);

.filter()

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

let array = [
    {
        name: "Miracle",
        team: "Liquid"
    },
    {
        name: "Arteezy",
        team: "EG"
    },
    {
        name: "Suma1L",
        team: "EG"
    },
    {
        name: "KuroKy",
        team: "Liquid"
    },
];

const liquidPlayers = array.filter(function(player) {
    return player.team === "Liquid";
});
const egPlayers = array.filter(function(player) {
    return player.team === "EG";
});

console.log(liquidPlayers); //Массив из объектов игроков Liquid
console.log(egPlayers); //Массив из объектов игроков EG

Ну и тут тоже по традиции на ES6:

const liquidPlayers = array.filter(player => player.team === "Liquid");

Собственно, это всё. Более подробно вы можете почитать на MDN Web Docs: .map(), .reduce(), .filter().