Массивы и методы массивов

В этом уроке ты узнаешь

Создавать массив, обращаться к элементу по индексу и изменять его
Добавлять и удалять элементы с помощью push, pop, shift, unshift
Обрабатывать данные через map, filter, find и reduce

Если в классе 25 учеников, заводить 25 отдельных переменных для их оценок бессмысленно. Для этого есть массив — упорядоченный список под одним именем. Посты в ленте, товары в корзине, песни в плейлисте — в программе всё это обычно хранится в массивах.

Создание массива и элементы

Массив записывают в квадратных скобках, разделяя элементы запятыми. Как и у строк, индексы начинаются с 0, а length показывает количество элементов. Элемент можно изменить, присвоив новое значение по его индексу.

JavaScript· Измени код и запусти снова

const fruits = ['apple', 'pear', 'pomegranate'];

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

fruits[1] = 'quince';
console.log(fruits);

▸ Ожидаемый результат

apple
3
pomegranate
[ 'apple', 'quince', 'pomegranate' ]

Добавление и удаление элементов

Метод	Что делает
`push(x)`	добавляет элемент в конец
`pop()`	удаляет последний элемент и возвращает его
`unshift(x)`	добавляет элемент в начало
`shift()`	удаляет первый элемент и возвращает его
`includes(x)`	есть ли `x` в массиве — `true`/`false`
`indexOf(x)`	индекс `x` или −1

JavaScript· Измени код и запусти снова

const queue = ['Aysel', 'Murad'];

queue.push('Leyla');
queue.unshift('Elvin');
console.log(queue);

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

console.log(queue.includes('Murad'), queue.indexOf('Aysel'));

▸ Ожидаемый результат

[ 'Elvin', 'Aysel', 'Murad', 'Leyla' ]
Elvin Leyla [ 'Aysel', 'Murad' ]
true 0

forEach и map

Большинство методов массива принимают аргументом функцию и вызывают её для каждого элемента. forEach просто что-то делает с каждым элементом, например выводит его. А map преобразует каждый элемент и собирает из результатов новый массив той же длины. Исходный массив не меняется.

JavaScript· Измени код и запусти снова

const prices = [10, 25, 4];

prices.forEach((price, index) => {
  console.log(`${index}: ${price} AZN`);
});

const sale = prices.map((price) => price * 0.9);
const labels = prices.map((price) => `${price} AZN`);

console.log(sale);
console.log(labels);
console.log(prices);

▸ Ожидаемый результат

0: 10 AZN
1: 25 AZN
2: 4 AZN
[ 9, 22.5, 3.6 ]
[ '10 AZN', '25 AZN', '4 AZN' ]
[ 10, 25, 4 ]

filter, find и reduce

filter создаёт новый массив из элементов, для которых функция вернула true.
find возвращает первый подходящий элемент, а если такого нет — undefined.
reduce сводит весь массив к одному значению: сумме, максимуму, счётчику и т. д.

JavaScript· Измени код и запусти снова

const scores = [45, 92, 78, 30, 88];

const passed = scores.filter((s) => s >= 50);
const firstHigh = scores.find((s) => s > 80);
const perfect = scores.find((s) => s === 100);
const total = scores.reduce((sum, s) => sum + s, 0);

console.log(passed);
console.log(firstHigh, perfect);
console.log('Total:', total, 'Average:', total / scores.length);

▸ Ожидаемый результат

[ 92, 78, 88 ]
92 undefined
Total: 333 Average: 66.6

reduce поначалу кажется сложным. Его функция получает два значения: аккумулятор (sum) и текущий элемент (s). Второй аргумент — 0 — это начальное значение аккумулятора. На каждом шаге то, что вернула функция, становится аккумулятором для следующего шага:

Шаг	sum	s	Возвращается
1	0	45	45
2	45	92	137
3	137	78	215
4	215	30	245
5	245	88	333

Эти методы можно соединять цепочкой: каждый возвращает новый массив, поэтому следующий метод сразу вызывается на нём. Ниже мы сначала оставляем проходные баллы, а затем добавляем к ним бонус в 5 баллов.

JavaScript· Измени код и запусти снова

const scores = [45, 92, 78, 30, 88];

const bonus = scores
  .filter((s) => s >= 50)
  .map((s) => s + 5);

console.log(bonus);
console.log(scores.some((s) => s < 40));
console.log(scores.every((s) => s > 20));

▸ Ожидаемый результат

[ 97, 83, 93 ]
true
true

some проверяет, подходит ли хотя бы один элемент, а every — подходят ли все.

Сортировка: sort

JavaScript· Измени код и запусти снова

const numbers = [10, 9, 1, 100];

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

const names = ['Murad', 'Aysel', 'Leyla'];
names.sort();
console.log(names);

▸ Ожидаемый результат

[ 1, 10, 100, 9 ]
[ 1, 9, 10, 100 ]
[ 100, 10, 9, 1 ]
[ 'Aysel', 'Leyla', 'Murad' ]

[...numbers] делает копию массива, чтобы не испортить оригинал. С этим синтаксисом познакомишься в следующем уроке.

Интерактив

Загрузка симуляции…

Посмотри по шагам, как алгоритм сортировки сравнивает элементы и меняет их местами.

Задание

Оставь только чётные числа, умножь каждое на 10 и выведи новый массив через console.log. Объедини filter и map в цепочку.

Задание · JavaScript· Измени код и запусти снова

const numbers = [1, 2, 3, 4, 5, 6];
// your code here

▸ Ожидаемый результат

[ 20, 40, 60 ]

Главное

Массив — упорядоченный список; индексы начинаются с 0, length — количество элементов.
push/pop работают с концом массива, unshift/shift — с началом.
map преобразует каждый элемент, filter отбирает, find находит первый подходящий.
reduce сводит массив к одному значению с помощью аккумулятора.
Для сортировки чисел пиши sort((a, b) => a - b); sort меняет исходный массив.

Проверь себя

Вопросов: 10. Каждый правильный ответ приносит XP.

1 / 10

Если const a = [5, 10, 15];, чему равно a[1]?