Массивы в JavaScript: создание, доступ и методы с примерами

Массивы в JavaScript являются объектами, которые используются для хранения упорядоченных коллекций данных. Они позволяют хранить несколько значений под одним именем переменной и получать доступ к ним по индексу. В этой статье мы рассмотрим создание массивов, доступ к их элементам и основные методы работы с массивами в JavaScript.

Создание массивов

В JavaScript существует несколько способов создания массивов:

1. Литеральная нотация массива

Это наиболее распространенный и предпочтительный способ создания массива. Элементы заключаются в квадратные скобки [ ] и разделяются запятыми:

let fruits = ['Яблоко', 'Банан', 'Апельсин'];
let numbers = [1, 2, 3, 4, 5];
let mixed = ['Строка', 42, true, null];

2. Конструктор Array()

Массивы также можно создавать с помощью конструктора Array(). Однако этот способ менее предпочтителен, так как он менее читаем и может привести к непреднамеренным результатам при передаче одного числового аргумента.

let fruits = new Array('Яблоко', 'Банан', 'Апельсин'); // ['Яблоко', 'Банан', 'Апельсин']
let numbers = new Array(5); // [undefined, undefined, undefined, undefined, undefined]

3. Метод Array.from()

Этот метод позволяет создавать массивы из итерируемых объектов, таких как строки, массивоподобные объекты и объекты, реализующие интерфейс итератора.

let text = 'Привет';
let chars = Array.from(text); // ['П', 'р', 'и', 'в', 'е', 'т']

let set = new Set(['Яблоко', 'Банан', 'Апельсин']);
let fruits = Array.from(set); // ['Яблоко', 'Банан', 'Апельсин']

Доступ к элементам массива

Элементы массива доступны по их индексу, который начинается с 0 для первого элемента. Вы можете получить доступ к элементам массива, используя квадратные скобки [ ] и указав индекс элемента:

let fruits = ['Яблоко', 'Банан', 'Апельсин'];

console.log(fruits[0]); // 'Яблоко'
console.log(fruits[1]); // 'Банан'
console.log(fruits[2]); // 'Апельсин'

Вы также можете изменить значение элемента массива, присвоив новое значение по его индексу:

fruits[1] = 'Груша'; // ['Яблоко', 'Груша', 'Апельсин']

Длина массива

Свойство length возвращает количество элементов в массиве:

let fruits = ['Яблоко', 'Банан', 'Апельсин'];
console.log(fruits.length); // 3

Вы также можете изменить длину массива, присвоив новое значение свойству length. Если новая длина больше текущей, массив будет заполнен undefined до новой длины. Если новая длина меньше текущей, массив будет усечен до новой длины.

fruits.length = 5; // ['Яблоко', 'Банан', 'Апельсин', undefined, undefined]
fruits.length = 2; // ['Яблоко', 'Банан']

Основные методы массивов

JavaScript предоставляет множество встроенных методов для работы с массивами. Вот некоторые из наиболее часто используемых методов:

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

• push(element1, element2, …) — добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
• pop() — удаляет последний элемент из массива и возвращает его значение.
• unshift(element1, element2, …) — добавляет один или несколько элементов в начало массива и возвращает новую длину массива.
• shift() — удаляет первый элемент из массива и возвращает его значение.

let fruits = ['Яблоко', 'Банан'];

fruits.push('Апельсин'); // ['Яблоко', 'Банан', 'Апельсин']
fruits.pop(); // ['Яблоко', 'Банан']

fruits.unshift('Груша'); // ['Груша', 'Яблоко', 'Банан']
fruits.shift(); // ['Яблоко', 'Банан']

Объединение и разделение массивов

• concat(value1, value2, …) — создает новый массив, объединяя исходный массив с другими массивами или значениями.
• slice(start, end) — создает новый массив, содержащий копию части исходного массива от start до end (не включая end).
• splice(start, deleteCount, item1, item2, …) — изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

let fruits = ['Яблоко', 'Банан'];
let citrus = ['Апельсин', 'Лимон'];

let combined = fruits.concat(citrus); // ['Яблоко', 'Банан', 'Апельсин', 'Лимон']
let sliced = combined.slice(1, 3); // ['Банан', 'Апельсин']

combined.splice(2, 0, 'Грейпфрут'); // ['Яблоко', 'Банан', 'Грейпфрут', 'Апельсин', 'Лимон']
combined.splice(1, 2); // ['Яблоко', 'Апельсин', 'Лимон']

Итерация и преобразование массивов

• forEach(callback(currentValue, index, array), thisArg) — выполняет предоставленную функцию один раз для каждого элемента массива.
• map(callback(currentValue, index, array), thisArg) — создает новый массив с результатами вызова указанной функции для каждого элемента массива.
• filter(callback(currentValue, index, array), thisArg) — создает новый массив, содержащий все элементы, прошедшие проверку, реализованную в функции-обратном вызове.
• reduce(callback(accumulator, currentValue, index, array), initialValue) — применяет функцию против аккумулятора и каждого элемента массива (слева направо) для получения одного значения.

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8, 10

let doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

let evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

let sum = numbers.reduce((acc, num) => acc + num, 0); // 15

Другие полезные методы массивов в JavaScript

В дополнение к рассмотренным ранее методам, JavaScript предоставляет множество других полезных методов для работы с массивами. Ниже приведены некоторые из них с примерами использования:

indexOf() и lastIndexOf()

Эти методы возвращают индекс первого или последнего вхождения указанного элемента в массиве соответственно. Если элемент не найден, возвращается -1.

let fruits = ['Яблоко', 'Банан', 'Апельсин', 'Яблоко'];

console.log(fruits.indexOf('Яблоко')); // 0
console.log(fruits.lastIndexOf('Яблоко')); // 3

find() и findIndex()

Методы find() и findIndex() возвращают первое значение или индекс элемента соответственно, который удовлетворяет предоставленной функции-предикату.

let numbers = [4, 9, 16, 25];

let firstEven = numbers.find(num => num % 2 === 0); // 4
let firstEvenIndex = numbers.findIndex(num => num % 2 === 0); // 0

every() и some()

Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в предоставленной функции-предикате. Метод some() проверяет, удовлетворяет ли хотя бы один элемент массива условию.

let numbers = [1, 3, 5, 7, 9];

console.log(numbers.every(num => num % 2 !== 0)); // true
console.log(numbers.some(num => num % 2 === 0)); // false

reverse()

Метод reverse() меняет порядок элементов массива на обратный и возвращает ссылку на изменённый массив.

let numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // [5, 4, 3, 2, 1]

sort()

Метод sort() сортирует элементы массива по возрастанию или убыванию, в зависимости от предоставленной функции сравнения.

let numbers = [5, 2, 8, 1, 9];

numbers.sort(); // [1, 2, 5, 8, 9] (сортировка как строк)
numbers.sort((a, b) => a - b); // [1, 2, 5, 8, 9] (числовая сортировка)

Изучение и использование этих и других методов массивов позволит вам эффективно манипулировать данными, хранящимися в массивах, и решать различные задачи программирования.