Массивы в языке JavaScript: синтаксис, методы и практические приёмы
Основы работы с массивами в JavaScript
Массив (array) это упорядоченная коллекция элементов любого типа. Каждый элемент имеет индекс, начиная с нуля.
Как создать массив в JavaScript?
Самый простой способ - литерал квадратных скобок:
const fruits = ['яблоко', 'банан', 'апельсин'];Js array (массивы в javascript)
Можно использовать конструктор new Array(), но он менее удобен:
const arr = new Array(1, 2, 3);Ошибка: если передать одно число, создаётся массив с пустыми слотами:
Проблема: new Array(5) создаёт массив длины 5, но без реальных элементов. Метод fill исправляет ситуацию.
Рекомендуемый способ - литерал []. Он короче, читаемее и не имеет побочных эффектов конструктора.
const numbers = [10, 20, 30];Как получить длину массива?
Свойство length показывает количество элементов. Можно изменять его, укорачивая массив.
const arr = [1, 2, 3, 4];
console.log(arr.length); // 4
arr.length = 2;
console.log(arr); // [1, 2]Уменьшение длины удаляет элементы с конца. Увеличение создаёт пустые слоты.
Как добавить элемент в конец массива?
Метод push добавляет один или несколько элементов в конец и возвращает новую длину.
const arr = [1, 2];
arr.push(3, 4);
console.log(arr); // [1, 2, 3, 4]Альтернатива - присвоение по индексу arr[arr.length] = value:
const arr = [1, 2];
arr[arr.length] = 3;
console.log(arr); // [1, 2, 3]Как удалить последний элемент?
Метод pop() удаляет последний элемент и возвращает его.
const arr = [1, 2, 3];
const last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2]Можно изменить length:
const arr = [1, 2, 3];
arr.length = arr.length - 1;
console.log(arr); // [1, 2]Важно: изменение length не возвращает удалённый элемент.
Как добавить или удалить элемент в начале?
unshift добавляет в начало, shift удаляет первый элемент.
const arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]
const first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3]Можно использовать splice:
const arr = [2, 3];
arr.splice(0, 0, 1);
console.log(arr); // [1, 2, 3]splice медленнее для вставки в начало, так как сдвигает все элементы. Для частых операций лучше использовать unshift.
Как перебрать массив?
Метод forEach выполняет функцию для каждого элемента.
const arr = [10, 20, 30];
arr.forEach((item, index) => {
console.log(`Индекс ${index}: ${item}`);
});
// Вывод:
// Индекс 0: 10
// Индекс 1: 20
// Индекс 2: 30Цикл for...of также позволяет перебирать значения:
for (const value of arr) {
console.log(value);
}Для получения индекса можно использовать entries():
for (const [index, value] of arr.entries()) {
console.log(index, value);
}Цикл for...in не предназначен для массивов, так как перебирает ключи-строки и может включать прототипные свойства.
Как найти элемент в массиве?
Метод find возвращает первый элемент, удовлетворяющий условию.
const users = [{id: 1}, {id: 2}];
const user = users.find(u => u.id === 2);
console.log(user); // {id: 2}Метод filter возвращает все подходящие элементы:
const numbers = [1, 2, 3, 4];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]Как преобразовать массив?
map создаёт новый массив, применяя функцию к каждому элементу.
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]reduce сворачивает массив в одно значение:
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6Как клонировать массив?
С помощью оператора spread (...) создаётся поверхностная копия.
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]Метод slice() без аргументов также создаёт копию:
const copy2 = original.slice();Оба способа делают поверхностное копирование. Для вложенных объектов требуется глубокое клонирование.
Как объединить массивы?
С помощью spread:
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]Метод concat:
const merged2 = a.concat(b);Как проверить, является ли переменная массивом?
Используется Array.isArray().
console.log(Array.isArray([1, 2])); // true
console.log(Array.isArray({})); // falseПроверка typeof не подходит, так как для массива возвращает 'object'.
Ошибка: typeof [] === 'object' верно, но не отличает массив от объекта.
Как удалить элемент по индексу?
Метод splice удаляет и возвращает удалённые элементы.
const arr = [10, 20, 30, 40];
const removed = arr.splice(1, 2);
console.log(arr); // [10, 40]
console.log(removed); // [20, 30]delete оставляет дырку (undefined), не меняет длину:
const arr = [10, 20, 30];
delete arr[1];
console.log(arr); // [10, empty, 30]
console.log(arr.length); // 3Использование delete не рекомендуется, так как массив остаётся разреженным.
Расширенные примеры работы с массивами
Использование flat и flatMap для вложенных массивов
const nested = [[1, 2], [3, [4, 5]]];
console.log(nested.flat()); // [1, 2, 3, [4, 5]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5]
const strings = ['hello world', 'foo bar'];
const words = strings.flatMap(str => str.split(' '));
console.log(words); // ['hello', 'world', 'foo', 'bar']Результат: [1, 2, 3, [4, 5]] [1, 2, 3, 4, 5] ['hello', 'world', 'foo', 'bar']
Деструктуризация массива с rest-элементами
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // 10
console.log(second); // 20
console.log(rest); // [30, 40, 50]10 20 [30, 40, 50]
Сортировка массива объектов по нескольким полям
const people = [
{ name: 'Иван', age: 25 },
{ name: 'Мария', age: 20 },
{ name: 'Иван', age: 30 }
];
// Сначала по имени, затем по возрасту
people.sort((a, b) => {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return a.age - b.age;
});
console.log(people);[
{ name: 'Иван', age: 25 },
{ name: 'Иван', age: 30 },
{ name: 'Мария', age: 20 }
]Группировка массива по ключу с помощью reduce
const items = [
{ type: 'fruit', name: 'яблоко' },
{ type: 'vegetable', name: 'морковь' },
{ type: 'fruit', name: 'банан' }
];
const grouped = items.reduce((acc, item) => {
(acc[item.type] = acc[item.type] || []).push(item.name);
return acc;
}, {});
console.log(grouped);{
fruit: ['яблоко', 'банан'],
vegetable: ['морковь']
}Проверка наличия элемента с помощью includes, some, every
const numbers = [1, 2, 3, 4];
console.log(numbers.includes(3)); // true
console.log(numbers.some(n => n > 3)); // true
console.log(numbers.every(n => n > 0)); // true
console.log(numbers.every(n => n % 2 === 0)); // false (1 нечётное)true true true false
Перебор массива с разрывом (использование for с break)
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 3) break;
console.log(arr[i]);
}
// Вывод: 1, 21 2
Создание массива заданной длины с заполнением
const filled = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(filled); // [0, 2, 4, 6, 8]
const zeros = new Array(4).fill(0);
console.log(zeros); // [0, 0, 0, 0][0, 2, 4, 6, 8] [0, 0, 0, 0]
Удаление дубликатов из массива
const dup = [1, 2, 2, 3, 1, 4];
const unique = [...new Set(dup)];
console.log(unique); // [1, 2, 3, 4][1, 2, 3, 4]
Проверка на массив с помощью instanceof
console.log([] instanceof Array); // true
console.log({} instanceof Array); // false
// Но не работает в разных фреймах (iframes), поэтому предпочтительнее Array.isArraytrue false