Урок 7. Массивы и методы map, filter, reduce

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

Создание и обращение к элементам

const fruits = ["яблоко", "груша", "слива"];

console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[fruits.length - 1]);
console.log(fruits[10]);

[ 'яблоко', 'груша', 'слива' ]
3
яблоко
слива
undefined

• Индексы начинаются с нуля: первый элемент — fruits[0], последний — fruits[fruits.length - 1].
• length — количество элементов.
• Обращение за пределы массива — не ошибка, а undefined.

Node.js выводит массив в квадратных скобках со строками в одинарных кавычках. Консоль браузера показывает тот же массив немного иначе — например, (3) ['яблоко', 'груша', 'слива'], с длиной впереди.

Элемент можно заменить: fruits[1] = "персик". Массив, объявленный через const, при этом менять можно — const запрещает только записать в переменную другой массив целиком.

Добавить и удалить

Действия с массивом записывают через точку после его имени: list.push("г"). Такие функции, которые принадлежат значению, называют методами.

const list = ["б", "в"];

list.push("г");
list.unshift("а");
console.log(list);

const last = list.pop();
const first = list.shift();
console.log(last, first);
console.log(list);

[ 'а', 'б', 'в', 'г' ]
г а
[ 'б', 'в' ]

Все они меняют сам массив. Как удалить элемент по значению — в справке Как удалить элемент из массива.

Поиск

const nums = [4, 7, 12, 7];

console.log(nums.includes(12));
console.log(nums.indexOf(7));
console.log(nums.indexOf(100));
console.log(nums.find((n) => n > 5));
console.log(nums.findIndex((n) => n > 5));

true
1
-1
7
1

• includes(x) — есть ли значение в массиве: true или false.
• indexOf(x) — индекс первого такого значения или -1, если его нет.
• find(функция) — первый элемент, для которого функция вернула true (или undefined, если такого нет). findIndex — то же, но возвращает индекс.

Кусок массива, строка из массива и обратно

const letters = ["a", "b", "c", "d", "e"];
console.log(letters.slice(1, 3));
console.log(letters.join("-"));

const words = "раз два три".split(" ");
console.log(words);

[ 'b', 'c' ]
a-b-c-d-e
[ 'раз', 'два', 'три' ]

• slice(начало, конец) — копия части массива от индекса начало до конец, не включая его. Сам массив не меняется (в отличие от похожего по имени splice).
• join(разделитель) склеивает элементы в строку, split(разделитель) — наоборот, режет строку на массив.

Перебор: forEach

forEach вызывает функцию для каждого элемента — то же, что цикл for...of, только записанное методом. Функция получает элемент и его индекс:

const colors = ["красный", "зелёный"];

colors.forEach((color, i) => {
  console.log(i + ": " + color);
});

0: красный
1: зелёный

map, filter, reduce

Три главных метода массивов. Каждый принимает функцию (callback — из урока о функциях) и не меняет исходный массив, а возвращает новый результат.

const numbers = [3, 8, 1, 10, 5];

const doubled = numbers.map((n) => n * 2);
const big = numbers.filter((n) => n > 4);
const sum = numbers.reduce((acc, n) => acc + n, 0);

console.log(doubled);
console.log(big);
console.log(sum);
console.log(numbers);

[ 6, 16, 2, 20, 10 ]
[ 8, 10, 5 ]
27
[ 3, 8, 1, 10, 5 ]

• map — преобразовать каждый элемент. Новый массив той же длины: на месте каждого элемента — то, что вернула функция.
• filter — отобрать. В новый массив попадают только элементы, для которых функция вернула true.
• reduce — свернуть массив в одно значение: сумму, максимум, строку. Функция получает накопитель acc и очередной элемент и возвращает новое значение накопителя. Второй аргумент reduce (здесь 0) — начальное значение накопителя.

Как reduce считает сумму, по шагам:

Начальное значение лучше указывать всегда: без него reduce на пустом массиве выдаёт ошибку.

Методы можно ставить цепочкой — результат одного сразу передаётся следующему:

const marks = [5, 3, 4, 2, 5, 4];

const goodCount = marks.filter((m) => m >= 4).length;
const average = marks.reduce((acc, m) => acc + m, 0) / marks.length;
const text = marks.map((m) => "*".repeat(m)).join(" ");

console.log(goodCount);
console.log(average.toFixed(2));
console.log(text);

4
3.83
***** *** **** ** ***** ****

Проверки: some и every

• some(функция) — true, если условие верно хотя бы для одного элемента.
• every(функция) — true, если условие верно для всех.

const ages = [15, 22, 17];
console.log(ages.some((a) => a >= 18));
console.log(ages.every((a) => a >= 18));

true
false

Сортировка: ловушка с числами

sort() без аргументов сортирует элементы как строки. Для слов это то, что нужно, а для чисел — нет:

const nums = [10, 9, 1, 25];

console.log([...nums].sort());
console.log([...nums].sort((a, b) => a - b));
console.log([...nums].sort((a, b) => b - a));

[ 1, 10, 25, 9 ]
[ 1, 9, 10, 25 ]
[ 25, 10, 9, 1 ]

Числа сортируют с функцией сравнения: (a, b) => a - b — по возрастанию, (a, b) => b - a — по убыванию. Функция возвращает отрицательное число, если a должно стоять раньше b, и положительное — если позже.

sort меняет сам массив. Здесь сортируется копия: [...nums] — новый массив с теми же элементами (три точки «раскладывают» массив на элементы). Так исходный nums остаётся как был.

Коротко

• Индексы — с нуля, последний элемент — arr[arr.length - 1], за пределами — undefined.
• push/pop — конец, unshift/shift — начало, splice — середина; они меняют массив.
• includes, indexOf, find — поиск; slice — копия части; join и split — массив и строка.
• map — преобразовать, filter — отобрать, reduce — свернуть в одно значение; исходный массив не меняется.
• Числа сортируют так: sort((a, b) => a - b).

Проверьте себя

console.log([5, 20, 100].sort());