Как работают map, reduce и filter

Методы `map`, `reduce` и `filter` являются частью прототипа массива и предоставляют мощные инструменты для обработки и трансформации массивов без необходимости использования циклов `for` или `while`. Эти функции высшего порядка принимают коллбэк-функцию в качестве аргумента и применяют её к каждому элементу массива, облегчая таким образом работу с массивами.

Map

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

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map(function(num) {
  return num * num;
});
console.log(squaredNumbers); // [1, 4, 9, 16]

Filter

Создаёт новый массив со всеми элементами исходного массива, для которых коллбэк-функция возвращает `true`. Это позволяет "фильтровать" массив, оставляя в нём только те элементы, которые соответствуют определённому условию.

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

Reduce

Применяет функцию к аккумулятору и каждому элементу массива (слева направо), чтобы свести его к одному значению. Это делает он, очень мощным инструментом для агрегации данных.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 10

Здесь `0` - начальное значение аккумулятора. Если его не указать, то в качестве начального значения будет использоваться первый элемент массива, а обработка начнётся со второго.

Эти методы делают код более чистым и понятным, предоставляя простые и мощные инструменты для обработки данных.

March 3, 2024, easyoffer

`map`, `reduce` и `filter` — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом.

Метод `map`

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

Как он работает

  • Итерирует по каждому элементу массива.
  • Применяет к каждому элементу функцию.
  • Возвращает новый массив с результатами вызова функции для каждого элемента.
```javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
```

В этом примере функция умножает каждый элемент массива `numbers` на 2, и результат сохраняется в новом массиве `doubled`.

Метод `reduce`

Применяется к массиву и сводит его к одному значению. Функция принимает аккумулятор и текущий элемент, производит операцию и возвращает новый аккумулятор.

Как он работает

  • Итерирует по каждому элементу массива.
  • Применяет к каждому элементу функцию, которая обновляет аккумулятор.
  • Возвращает единственное значение — аккумулятор.
```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10
```

Здесь `reduce` суммирует все элементы массива, начиная с аккумулятора, равного 0.

Метод `filter`

Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает `true`.

Как он работает

  • Итерирует по каждому элементу массива.
  • Применяет к каждому элементу функцию-условие.
  • Возвращает новый массив с элементами, прошедшими условие.
```javascript
const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
```

В этом примере `filter` создает новый массив, содержащий только четные числа из массива `numbers`.

  • `map`: создает новый массив, преобразуя каждый элемент по заданной функции.
  • `reduce`: сводит массив к одному значению, применяя функцию к каждому элементу.
  • `filter`: создает новый массив, содержащий только элементы, которые соответствуют условию.

Все три метода делают код более читаемым и декларативным, облегчая работу с массивами.

May 27, 2024, easyoffer

Примеры ответов: