Массивы в JavaScript — это мощные структуры данных, позволяющие хранить и обрабатывать наборы элементов. Они предоставляют множество методов для удобного управления данными, таких как добавление, удаление, сортировка, фильтрация и многое другое. В этом руководстве мы рассмотрим основные операции с массивами, включая создание, доступ к элементам, изменение размеров, объединение массивов и выполнение операций над ними.
Пример 1: Создание простого массива
let fruits = [«яблоко», «банан», «апельсин»];
console.log(fruits); // Выведет [«яблоко», «банан», «апельсин»]
Здесь мы создаем массив fruits, который содержит три строковых значения: «яблоко», «банан» и «апельсин». Консоль выведет весь массив целиком.
Пример 2: Доступ к элементам массива
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Выведет 1
console.log(numbers[2]); // Выведет 3
Индексы в массивах начинаются с нуля. Поэтому numbers[0] вернет первый элемент массива (то есть число 1), а numbers[2] — третий элемент (число 3).
Пример 3: Добавление элемента в конец массива
let animals = [«кошка», «собака», «кролик»];
animals.push(«попугай»);
console.log(animals); // Выведет [«кошка», «собака», «кролик», «попугай»]
Метод .push() добавляет указанный элемент в конец массива. В данном случае мы добавляем строку «попугай» в массив animals.
Пример 4: Удаление последнего элемента массива
let colors = [«красный», «синий», «зеленый»];
let removedColor = colors.pop();
console.log(colors); // Выведет [«красный», «синий»]
console.log(removedColor); // Выведет «зеленый»
Метод .pop() удаляет последний элемент массива и возвращает его. После выполнения этого метода массив colors будет содержать только два первых элемента («красный» и «синий»), а переменная removedColor получит значение удаленного элемента («зеленый»).
Пример 5: Добавление элемента в начало массива
let months = [«январь», «февраль», «март»];
months.unshift(«декабрь»);
console.log(months); // Выведет [«декабрь», «январь», «февраль», «март»]
Метод .unshift() добавляет указанный элемент в начало массива. Здесь мы добавляем строку «декабрь» в массив months, и она становится первым элементом.
Пример 6: Удаление первого элемента массива
let days = [«понедельник», «вторник», «среда»];
let removedDay = days.shift();
console.log(days); // Выведет [«вторник», «среда»]
console.log(removedDay); // Выведет «понедельник»
Метод .shift() удаляет первый элемент массива и возвращает его. В этом примере первый элемент массива days («понедельник») удаляется, и переменной removedDay присваивается его значение.
Пример 7: Изменение размера массива
let letters = [«а», «б», «в»];
letters.length = 5;
console.log(letters); // Выведет [«а», «б», «в», undefined, undefined]
Свойство .length позволяет изменять длину массива. Если установить его больше текущей длины массива, то новые элементы будут заполнены значением undefined. В нашем примере длина массива увеличивается до пяти, поэтому последние два элемента становятся undefined.
Пример 8: Слияние двух массивов
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = array1.concat(array2);
console.log(mergedArray); // Выведет [1, 2, 3, 4, 5, 6]
Метод .concat() объединяет два массива в один новый массив. В результате слияния массивов array1 и array2 создается новый массив mergedArray, содержащий все элементы обоих исходных массивов.
Пример 9: Преобразование массива в строку
let names = [«Иван», «Анна», «Сергей»];
let stringNames = names.join(«, «);
console.log(stringNames); // Выведет «Иван, Анна, Сергей»
Метод .join() преобразует массив в строку, соединяя элементы через указанный разделитель. В данном случае элементы массива names соединяются запятой и пробелом («, «), что дает результат «Иван, Анна, Сергей».
Пример 10: Перебор всех элементов массива
let numbersArray = [10, 20, 30];
numbersArray.forEach((number, index) => {
console.log(`Элемент ${index}: ${number}`);
});
/* Выведет: Элемент 0: 10 Элемент 1: 20 Элемент 2: 30 */
Метод .forEach() проходит по всем элементам массива и вызывает переданную функцию для каждого из них. В этой функции доступны текущий элемент и его индекс. Мы используем эту возможность для вывода индексов и значений элементов массива.
Пример 11: Фильтрация массива
let mixedArray = [1, «строка», 3, null, 5, {}];
let filteredArray = mixedArray.filter(item => typeof item === «number»);
console.log(filteredArray); // Выведет [1, 3, 5]
Метод .filter() создает новый массив, содержащий только те элементы, которые соответствуют указанному условию. В данном случае условие проверяет, является ли тип текущего элемента числом (typeof item === «number»). Все числовые элементы сохраняются в новом массиве filteredArray.
Пример 12: Карта массива
let prices = [100, 200, 300];
let doubledPrices = prices.map(price => price * 2);
console.log(doubledPrices); // Выведет [200, 400, 600]
Метод .map() создает новый массив, применяя указанную функцию к каждому элементу исходного массива. В данном примере функция удваивает каждое значение цены (price * 2), создавая новый массив doubledPrices.
Пример 13: Проверка наличия элемента в массиве
let pets = [«кот», «пес», «рыба»];
console.log(pets.includes(«кот»)); // Выведет true
console.log(pets.includes(«птица»));// Выведет false
Метод .includes() проверяет, содержится ли указанное значение в массиве. Он возвращает true, если элемент присутствует, и false в противном случае. В первом вызове проверка на наличие строки «кот» возвращает true, поскольку этот элемент действительно находится в массиве pets. Во втором вызове проверка на наличие строки «птица» возвращает false, потому что такого элемента нет.
Пример 14: Поиск индекса элемента в массиве
let items = [«ключ», «зонт», «часы»];
console.log(items.indexOf(«зонт»)); // Выведет 1
console.log(items.indexOf(«перо»)); // Выведет -1 (не найден)
Метод .indexOf() ищет первое вхождение указанного значения в массиве и возвращает его индекс. Если элемент не найден, возвращается значение —1. В данном примере поиск строки «зонт» возвращает индекс 1, так как этот элемент находится на второй позиции в массиве items. Поиск строки «перо» возвращает —1, так как такой элемент отсутствует.
Пример 15: Поворот массива
let reversedArray = [4, 3, 2, 1];
reversedArray.reverse();
console.log(reversedArray); // Выведет [1, 2, 3, 4]
Метод .reverse() переворачивает массив, меняя порядок его элементов на противоположный. Исходный массив изменяется непосредственно, а не создается новая копия.
Пример 16: Сортировка массива
let unsortedNumbers = [5, 3, 8, 1];
unsortedNumbers.sort();
console.log(unsortedNumbers); // Выведет [1, 3, 5, 8]
Метод .sort() сортирует элементы массива по возрастанию. По умолчанию он сравнивает элементы как строки, но в случае чисел это работает корректно. В данном примере массив unsortedNumbers сортируется от меньшего числа к большему.
Пример 17: Глубокое копирование массива
let originalArray = [true, false, null, undefined];
let copiedArray = originalArray.slice();
console.log(copiedArray); // Выведет [true, false, null, undefined]
Метод .slice() без параметров создает полную копию массива. Это полезно, когда нужно создать независимую копию массива, чтобы изменения в одной версии не влияли на другую.
Пример 18: Разворот массива
let arrayToSplice = [«a», «b», «c», «d»];
arrayToSplice.splice(1, 2, «x», «y»);
console.log(arrayToSplice); // Выведет [«a», «x», «y», «d»]
Метод .splice() позволяет вставлять, удалять и заменять элементы массива. В данном примере мы начинаем с индекса 1 и удаляем два элемента («b» и «c»). Вместо них вставляются новые элементы («x» и «y»). Таким образом, массив arrayToSplice после выполнения метода .splice() принимает вид [«a», «x», «y», «d»].
Пример 19: Редукция массива
let numbersToReduce = [10, 20, 30];
let sum = numbersToReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Выведет 60
Метод .reduce() используется для преобразования массива в одно значение путем последовательной обработки каждого элемента. В данном примере мы суммируем все элементы массива numbersToReduce, начиная с начального значения аккумулятора равным нулю. Переменная sum получает итоговую сумму всех элементов массива.
Пример 20: Объединение нескольких массивов
let arrayA = [1, 2, 3];
let arrayB = [4, 5, 6];
let combinedArray = […arrayA, …arrayB];
console.log(combinedArray); // Выведет [1, 2, 3, 4, 5, 6]
Оператор распространения (…) позволяет легко объединить несколько массивов в один. В данном примере массивы arrayA и arrayB объединяются в новый массив combinedArray, который содержит все элементы обоих исходных массивов.
Пример 21: Проверка наличия хотя бы одного элемента, соответствующего условию
let mixedArray = [1, «строка», 3, null, 5, {}];
let hasNumber = mixedArray.some(item => typeof item === «number»);
console.log(hasNumber); // Выведет true
Метод .some() проверяет, соответствует ли хотя бы один элемент массива заданному условию. В данном примере мы проверяем, есть ли в массиве mixedArray хотя бы одно число. Поскольку в массиве присутствуют числовые элементы, результат проверки будет true.
Пример 22: Проверка того, что все элементы массива соответствуют условию
let numbersArray = [1, 2, 3, 4, 5];
let allPositive = numbersArray.every(number => number > 0);
console.log(allPositive); // Выведет true
Метод .every() проверяет, соответствуют ли все элементы массива заданному условию. В данном примере мы проверяем, являются ли все элементы массива numbersArray положительными числами. Так как все элементы больше нуля, результат проверки будет true.
Пример 23: Получение уникального набора элементов массива
let duplicateArray = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
let uniqueElements = Array.from(new Set(duplicateArray));
console.log(uniqueElements); // Выведет [1, 2, 3, 4]
Для получения уникальных элементов массива можно воспользоваться объектом Set, который автоматически удаляет дубликаты. Затем с помощью конструктора Array.from() создаётся новый массив из элементов множества. В данном примере массив duplicateArray превращается в массив uniqueElements, содержащий только уникальные элементы.
Пример 24: Преобразование двумерного массива в одномерный
let twoDimensionalArray = [[1, 2], [3, 4], [5, 6]];
let flattenedArray = twoDimensionalArray.flat();
console.log(flattenedArray); // Выведет [1, 2, 3, 4, 5, 6]
Метод .flat() преобразует вложенные массивы в одномерный массив. В данном примере двумерный массив twoDimensionalArray превращается в одномерный массив flattenedArray, содержащий все элементы исходных подмассивов.
Пример 25: Фильтрация массива объектов по свойству
let users = [
{ name: «Иван», age: 30 },
{ name: «Анна», age: 25 },
{ name: «Сергей», age: 40 }
];
let adults = users.filter(user => user.age >= 18);
console.log(adults);
/* Выведет: [ { name: «Иван», age: 30 }, { name: «Анна», age: 25 }, { name: «Сергей», age: 40 } ] */
Метод .filter() также полезен при работе с массивами объектов. В данном примере мы фильтруем массив пользователей users, оставляя только тех, чей возраст (age) больше или равен 18 лет. Результат сохраняется в массиве adults.
Итог
Мы рассмотрели множество способов работы с массивами в JavaScript, включая создание, доступ к элементам, изменение размеров, фильтрацию, сортировку и многие другие операции. Эти методы позволяют эффективно управлять данными и решать разнообразные задачи программирования.
Загрузка...