В этом посте решил составить список из методов массивов, которые я чаще всего использую в работе. Получилось 11 методов и примеров.

Все эти методы можно выполнять последовательно по цепочке (method chaining), а не вызывать по отдельности. Это полезно, так как часто требуется производить несколько действий с нашими данными (отфильтровать, потом отсортировать и т.д.).

Второй большой плюс этих методов – иммутабельность (immutable). Это означает, что они не меняют исходные данные. Результатом их работы всегда является новый массив или объект.

1. Метод filter

Метод .filter() создает новый массив, куда добавляются все элементы исходного массива, которые соответствуют нашим условиям. Длина нового массива всегда отличается от длины исходного массива.

Каждый элемент исходного массива проверяется на соответствие нашим условиям. В случае соответствия, возвращается true и элемент добавляется в новый массив. В противном случае возвращается false и .filter переходит к оценке следующего элемента.

Пример использования .filter

1const age = [18, 22, 24, 30, 43];
2const ageFilter = age.filter((res) => {
3  return res > 22;
4});
5console.log(ageFilter);
6// Array(3) [ 24, 30, 43 ]

2. map

Метод .map() перебирает каждый элемент массива, производит с ним какие-либо действия и добавляет в новый массив, который мы получаем после окончания работы метода.

Новый массив, который создается в результате работы метода .map() всегда имеет такую же длину, что и исходный массив.

Пример использования .map()

1const names = ['Вася', 'Петя', 'Маша'];
2const sayHi = names.map((name) => {
3  return `${name} привет!`;
4});
5console.log(sayHi);
6// Array(3) [ "Вася привет!", "Петя привет!", "Маша привет!" ]

3. reduce

Метод .reduce() – также использует исходный массив для последовательной обработки каждого элемента. С помощью данного метода можно сохранять промежуточный результат и возвращать новые объекты, массивы или, например, числа.

Пример .reduce #1

Чаще всего я использую .reduce(), чтобы подсчитать общее количество или сумму чего-либо.

1const invoices = [22, 8, 16, 120];
2const totalInvoices = invoices.reduce((total, current) => {
3  return total + current;
4});
5console.log(totalInvoices);
6// 166

Пример .reduce() #2

Еще один пример – учет количества экземпляров каждой единицы товара. Давайте определим общее количество бананов, яблок и т.д. в нашем массиве:

1const fruits = ['apples', 'bananas', 'oranges', 'apples', 'kiwi', 'apples'];
2const fruitsCount = fruits.reduce((accum, curVal) => {
3  if (!accum[curVal]) {
4    accum[curVal] = 1;
5    return accum;
6  }
7  accum[curVal] += 1;
8  return accum;
9}, {});
10
11console.log(fruitsCount);
12// Object { apples: 3, bananas: 1, oranges: 1, kiwi: 1 }

4. some

Метод .some() перебирает исходный массив и возвращает true, если хотя бы один из элементов массива удовлетворяет нашему условию.

Проверим, содержит ли данный массив, хотя бы одно число больше 20:

1const numbers = [20, 16, 11, 13, 15];
2const overTwenty = numbers.some((number) => {
3  return number > 20;
4});
5console.log(overTwenty);
6// false

5. every

Метод .every() очень похож на .some(), но в отличие от первого возвращает true, только в том случае, если каждый элемент массива удовлетворяет нашему условию.

Проверим, все ли студенты в нашем массиве старше 18 лет:

1const students = [
2  { name: 'Alex', age: 17 },
3  { name: 'Stas', age: 18 },
4  { name: 'Mike', age: 22 },
5  { name: 'Den', age: 20 },
6];
7
8const overEighteen = students.every((student) => {
9  return student.age > 18;
10});
11console.log(overEighteen);
12// false

6. includes

Метод .includes() можно использовать для проверки массива на наличие каких-либо элементов.

1const names = ['alex', 'nick', 'stas', 'max'];
2
3// Проверим, присутствует ли в нашем массиве names имя 'max'.
4console.log(names.includes('max'));
5// true

Как видите, метод очень похож на упрощенную версию метода .some(), так как нам не требуется прописывать какие-либо условия.

7. Array.from

Я использую метод Array.from(), когда мне нужно создать массив определенной длины и наполнить его какими-либо элементами.

1const myArray = Array.from({ length: 4 });
2console.log(myArray);
3// Array(4) [ undefined, undefined, undefined, undefined ]

Мы получили новый массив myArray, состоящий из 4-х элементов undefined.

В качестве 2-го параметра метод Array.from() принимает функцию map (mapFn), с помощью которой мы можем наполнить наш новый массив любыми значениями.

1const myArray = Array.from({ length: 4 }, (_, i) => ({
2  id: `product-${i + 1}`,
3}));
4console.log(myArray);
5// [{id: "product-1"}, {id: "product-2"}, {id: "product-3"}, {id: "product-4"}]

8. Array.of

Еще один способ создать новый массив – использовать метод Array.of(). Данный метод создает массив из принимаемых аргументов.

1const newArray = Array.of('one', 'two', 'three');
2console.log(newArray); // получаем ["one", "two", "three"]

9. Метод Object.keys()

Очень часто требуется произвести итерацию по свойствам объекта. Здесь нам приходит на помощь метод Object.keys(), который позволяет создать новый массив из ключей нашего объекта.

1const car = {
2  name: 'bmw',
3  model: 'x2',
4  year: 2020,
5  engine: '2.0T',
6  color: 'red',
7  country: 'Germany',
8};
9const carData = Object.keys(car);
10console.log(carData);
11// ["name", "model", "year", "engine", "color", "country"]

Если нам нужно создать массив не из ключей, а значений, то можно использовать метод Object.values().

1const car = {
2  name: 'bmw',
3  model: 'x2',
4  year: 2020,
5  engine: '2.0T',
6  color: 'red',
7  country: 'Germany',
8};
9const carData = Object.values(car);
10console.log(carData);
11//  ["bmw", "x2", 2020, "2.0T", "red", "Germany"]

10. Метод Object.entries()

Object.entries() – позволяет получить новый массив из объекта, состоящий из мини массивов, включающих каждый ключ и значение.

1const car = {
2  brand: 'BMW',
3  model: '2.0d',
4  year: 2005,
5  color: 'red',
6};
7
8console.log(Object.entries(car));
9// [ ["brand", "BMW"], ["model", "2.0d"], ["year", 2005], ["color", "red"]]

11. forEach

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

Я использую forEach(), когда, например, требуется выделить какие-либо элементы в DOM дереве страницы и повесить на них обработчик событий.

1const buttons = document.querySelectorAll('button');
2buttons.forEach((button) => {
3  button.addEventListener('click', function () {
4    console.log('click!!');
5  });
6});

Другой пример – на основании исходного массива создать новый массив из уникальных элементов.

1const fruits = [
2  'apples',
3  'bananas',
4  'oranges',
5  'oranges',
6  'apples',
7  'kiwi',
8  'kiwi',
9  'apples',
10];
11const fruitsUnique = {};
12
13fruits.forEach((fruit) => {
14  fruitsUnique[fruit] = true;
15});
16const newFruits = Object.keys(fruitsUnique);
17// Array(4) [ "apples", "bananas", "oranges", "kiwi" ]