Как это работает? Методы forEach, map, reduce для работы с массивами в Javascript


Доброго времени суток, дорогие читатели! Рада вас приветствовать на страницах своего блога.

Сегодня речь снова пойдет о вопросах и задачках, которые задают на собеседованиях frontend-разработчику на знание Javascript, в частности стандарта ES6. Да-да, такое часто бывает спрашивают.

Напишите аналог встроенного метода forEach для работы с массивами

Для решения этой задачи необходимо вспомнить, что делает встроенный метод forEach:

  1. Обходит массив по всей длине до последнего элемента.
  2.  Вызывает функцию для каждого элемента.
  3. Функция, которая вызывается на каждой итерации, принимает в себя 3 параметра:
    • item – очередной элемент массива.
    • i – его порядковый номер (в массивах порядковый номер элемента начинается с 0).
    • arr – сам массив, который перебирается.

Соответственно, функция-аналог будет принимать в себя 2 аргумента: массив, который необходимо перебрать, и функцию, которая вызывается внутри цикла для каждого элемента.

Решение:

function forEach(array, fn) {
    for (let i = 0; i < array.length; i++ ) {
        fn(array[i], i, array);
    }
}

Практическое использование forEach

На практике метод forEach ничего не возвращает, его используют только для перебора, как более «элегантный» вариант, чем обычный цикл for. Поэтому если руки так и чешутся сократить количество строчек кода, то можно использовать такую запись:

let arr = ["Яблоко", "Апельсин", "Груша"];
arr.forEach((item, i, arr) => {
  alert( i + ": " + item + " (массив:" + arr + ")" );
});

Или еще короче. И так тоже будет работать:

let arr = ["Яблоко", "Апельсин", "Груша"];

arr.forEach((item, i, arr) => alert( i + ": " + item + " (массив:" + arr + ")" );

Так как мы используем только одну запись, а стрелочные функции нам это позволяют.

Напишите аналог встроенного метода map для работы с массивами

Метод map применяется, когда необходимо создать новый массив,

который будет состоять из результатов вызова callback(item, i, arr) для каждого элемента arr.

Например:

let names = ['HTML', 'CSS', 'JavaScript'];

let nameLengths = names.map((name) => {
  return name.length;
});
// получили массив с длинами
alert( nameLengths ); // 4,3,10

Чтобы повторить это поведение для массива, который будет передан в параметре array, достаточно написать следующий код:

function map(array, fn) {
    let results = []; // 1

    for (let i = 0; i < array.length; i++ ) { // 2
        let item = fn(array[i], i, array); // 3

        results.push(item); // 4
    }

    return results; // 5
}
  1. Мы создаем новый массив.
  2. Циклом for перебираем массив, который пришел в функцию в качестве аргумента.
  3. На следующем этапе мы выполняем fn для каждого элемента массива array и складываем его в переменную item.
  4.  Добавляем переменную в конец массива results.
  5. Возвращаем results.

Напишите аналог встроенного метода reduce для работы с массивами

И на закуску работа со встроенным методом reduce. Он используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата. Метод применяет функцию callback по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат.
Задача метода:

  1. Для каждого элемента массива запустить функцию.
  2. Промежуточный результат передавать первым аргументом далее.
let arr = [1, 2, 3, 4, 5]

let result = arr.reduce(function(sum, current) {
  return sum + current;
}, 0);
alert( result ); // 15

Аналог функции reduce:

function reduce(array, fn, initial) {
    let i = 0;
    let result = initial || array[i++];

    while (i < array.length) {
        result = fn(result, array[i], i, array);
        i++;
    }
    return result;
}

Ну как-то так... Кому не лень, может сам поиграть с методами массивов. До встречи в новых статьях!

1 комментарий для “Как это работает? Методы forEach, map, reduce для работы с массивами в Javascript

  • У оригинального reduce еще есть проверка на случай, если массив пустой и initialValue не был указан. В этом случае выбрасывается TypeError.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Advertisment ad adsense adlogger