Массив в JS

В этой статье вы подробнее узнаете о массивах в JavaScript.

Массив — это объект, который может хранить несколько значений одновременно.

Например, здесь words — это массив, в котором хранятся 3 строковые значения:

const words = ['привет', 'мир', 'Андрей'];

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

В JavaScript создать массив можно двумя способами.

1. С помощью квадратных скобок `[]`

Самый простой способ создать массив — перечислить значения в квадратных скобках []. Например, вот так:

const array1 = ["есть", "спать"];

2. С помощью ключевого слова `new`

Еще один способ — использовать ключевое слово new. Например, вот так:

const array2 = new Array("есть", "спать");

В обоих примерах выше мы создали массив с двумя значениями.

Совет. Лучше создавать массив с помощью квадратных скобок. Так код лучше читается.

Вот еще несколько примеров массивов:

// пустой массив
const myList = [ ];

// массив чисел
const numberArray = [2, 4, 6, 8];

// массив строк
const stringArray = [ 'есть', 'работать', 'спать'];

// массив с разными типами данных
const newData = ['работать', 'заниматься', 1, true];

Внутри массива можно также хранить массивы, функции и другие объекты. Например, вот так:

const newData = [
    {'задание1': 'спорт'},
    [1, 2 ,3],
    function hello() { console.log('привет')}
];

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

Получить элемент массива можно обратившись к нему по индексу.

const myArray = ['п', 'р', 'и', 'в', 'е', 'т'];

// первый элемент
console.log(myArray[0]);  // Вывод: "п"

// второй элемент
console.log(myArray[1]); // Вывод: "р"

Примечание. Индексы начинаются с 0 — не с 1.

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

Для добавления элементов в массив можно использовать встроенные методы push() и unshift().

• Метод push() добавляет элемент в конец массива.

let dailyActivities = ['есть', 'спать'];

// добавляем элемент в конец массива
dailyActivities.push('спорт');

console.log(dailyActivities); // Вывод: ['есть', 'спать', 'спорт']

• Метод unshift() добавляет элемент в начало массива.

let dailyActivities = ['есть', 'спать'];

// добавляем элемент в начало массива
dailyActivities.unshift('работать'); 

console.log(dailyActivities); // Вывод: ['работать', 'есть', 'спать']

Изменение элементов массива

Изменять элементы массива можно обращаясь к ним по индексу.

let dailyActivities = [ 'есть', 'спать'];

// добавляем новый элемент 'спорт' на позицию с индексом 2
dailyActivities[2] = 'спорт';

console.log(dailyActivities); // Вывод: ['есть', 'спать', 'спорт']

Теперь представим, что у нас есть массив из двух элементов. Если попытаться добавить элемент по индексу 3 (это четвертый элемент), то третий элемент получит значение undefined.

let dailyActivities = ['есть', 'спать'];

// добавляем новый элемент 'спорт' на позицию с индексом 3
dailyActivities[3] = 'спорт';

console.log(dailyActivities); // Вывод: ["есть", "спать", undefined, "спорт"]

Так работает всегда. Все элементы с индексами между текущим последним индексом и индексом, по которому добавляется новый элемент, получат значение undefined.

Удаление элемента из массива

Для удаления элемента используют методы pop() и shift().

• Метод pop() удаляет последний элемент из массива и возвращает значение этого элемента.

let dailyActivities = ['работать', 'есть', 'спать', 'спорт'];

// удаляем последний элемент
dailyActivities.pop();
console.log(dailyActivities); // Вывод: ['работать', 'есть', 'спать']

// удаляем последний элемент 'спать' и записываем его в переменную
let removedElement = dailyActivities.pop();

// выводим удаленный элемент
console.log(removedElement); // Вывод: 'спать'
console.log(dailyActivities);  // Вывод: ['работать', 'есть']

• Метод shift() удаляет первый элемент из массива и возвращает значение этого элемента.

let dailyActivities = ['работать', 'есть', 'спать'];

// удаляем первый элемент
dailyActivities.shift();

console.log(dailyActivities); // Вывод: ['есть', 'спать']

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

Узнать длину массива (количество элементов в массиве) можно с помощью свойства length.

const dailyActivities = ['есть', 'спать'];

// возвращает количество элементов в массиве — его длину
console.log(dailyActivities.length); // 2

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

В JavaScript существуют различные методы массивов, которые облегчают часто используемые действия.

Вот некоторые из них:

Метод	Описание
`concat()`	Соединяет два или больше массивов в один и возвращает результат.
`indexOf()`	Возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.
`find()`	Возвращает значение первого найденного в массиве элемента, которое удовлетворяет заданному условию.
`findIndex()`	Возвращает индекс в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае возвращает -1.
`forEach()`	Выполняет указанную функцию один раз для каждого элемента в массиве.
`includes()`	Определяет, содержит ли массив определённый элемент. Возвращает true или false.
`push()`	Добавляет один или более элементов в конец массива и возвращает новую длину массива.
`unshift()`	Добавляет один или более элементов в начало массива и возвращает новую длину массива.
`pop()`	Удаляет последний элемент из массива и возвращает его значение.
`shift()`	Удаляет первый элемент из массива и возвращает его значение. Этот метод изменяет длину массива.
`sort()`	Сортирует элементы массива и возвращает отсортированный массив.
`slice()`	Возвращает новый массив, содержащий копию части исходного массива.
`splice()`	Изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Пример. Используе методы массива

let dailyActivities = ['спать', 'работать', 'спорт']
let newRoutine = ['есть'];

// сортируем элементы в алфавитном порядке
dailyActivities.sort();
console.log(dailyActivities); // Вывод: ['работать', 'спать', 'спорт']

// ищем индекс по значению
const position = dailyActivities.indexOf('работать');
console.log(position); // Вывод: 0

// используем слайсы
const newDailyActivities = dailyActivities.slice(1);
console.log(newDailyActivities); // Вывод: [ 'спать', 'спорт']

// соединяем два массива
const routine = dailyActivities.concat(newRoutine);
console.log(routine); // Вывод: ["работать", "спать", "спорт", "есть"]

Массив — это объект

В JavaScript массив — это объект. А индексы массивов — это ключи объектов. Поэтому работать с массивами можно так же, как с объектами.

Поскольку массивы являются объектами, элементы массива хранятся по ссылке. Следовательно, когда значение массива копируется, любое изменение в скопированном массиве отразится и в исходном массиве.

let arr = ['п', 'р'];
let arr1 = arr;
arr1.push('и');

console.log(arr); // Вывод: ["п", "р", "и"]
console.log(arr1); // Вывод: ["п", "р", "и"]

Хранить значения также можно, передавая именованный ключ в массив. Например, вот так:

let arr = ['п', 'р'];
arr.name = 'Дима';

console.log(arr); // Вывод: ["п", "р"]
console.log(arr.name); // Вывод: "Дима"
console.log(arr['name']); // Вывод: "Дима"

Совет. Не рекомендуется хранить значения, передавая произвольные имена в массиве. Массив лучше использовать, если значения находятся в упорядоченной коллекции. В противном случае — лучше использовать объект с { }.