JavaScript Array: создание и основные операции с массивами

В этом руководстве вы узнаете о массивах в JavaScript и основных операциях с ними.

Что такое массив в JavaScript?

Массив в JavaScript — это упорядоченный список значений. Каждое значение называется элементом, заданным индексом.

Массив JavaScript имеет следующие характеристики:

1. Во-первых, массив может содержать значения смешанных типов. Например, у вас может быть массив, в котором хранятся элементы числового, строкового и логического типов.
2. Во-вторых, размер массива является динамическим и автоматически увеличивается. Другими словами, вам не нужно заранее указывать размер массива.

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

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

let scores = new Array();

Массив scores пуст, но содержит какие-либо элементы.

Если вы знаете количество элементов, которые будет содержать массив, вы можете создать массив с начальным размером, как показано в следующем примере:

let scores = Array(10);

Чтобы создать массив и инициализировать его некоторыми элементами, вы передаете элементы в виде списка, разделенного запятыми, в конструктор Array().

Например, в следующем примере создается массив scores, состоящий из пяти элементов (или чисел):

let scores = new Array(9,10,8,7,6);

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

Однако, когда вы передаете значение другого типа, например string, в конструктор Array(), вы создаете массив с элементом этого значения. Например:

let athletes = new Array(3); // creates an array with initial size 3 
let scores = new Array(1, 2, 3); // create an array with three numbers 1,2 3 
let signs = new Array('Red'); // creates an array with one element 'Red'

JavaScript позволяет опускать оператор new при использовании конструктора Array(). Например, следующий оператор создает массив artists.

let artists = Array();

На практике вы редко будете использовать конструктор Array() для создания массива.

Более предпочтительным способом создания массива является использование литеральной записи массива:

let arrayName = [element1, element2, element3, ...];

Литеральная форма массива использует квадратные скобки [] для заключения списка элементов, разделенных запятыми.

В следующем примере создается массив colors, содержащий строковые элементы:

let colors = ['red', 'green', 'blue'];

Чтобы создать пустой массив, вы используете квадратные скобки без указания какого-либо элемента, например:

let emptyArray = [];

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

Массивы JavaScript индексируются с нуля. Другими словами, первый элемент массива начинается с индекса 0, второй элемент начинается с индекса 1 и так далее.

Чтобы получить доступ к элементу в массиве, вы указываете индекс в квадратных скобках [] :

arrayName[index]

Ниже показано, как получить доступ к элементам массива mountains :

let mountains = ['Everest', 'Fuji', 'Nanga Parbat']; 
console.log(mountains[0]); // 'Everest' 
console.log(mountains[1]); // 'Fuji' 
console.log(mountains[2]); // 'Nanga Parbat'

Чтобы изменить значение элемента, вы присваиваете это значение элементу следующим образом:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat']; 
mountains[2] = 'K2'; 
console.log(mountains);

Выход:

[ 'Everest', 'Fuji', 'K2' ]

Получение размера массива

Как правило, свойство length массива возвращает количество элементов. В следующем примере показано, как использовать свойство length :

let mountains = ['Everest', 'Fuji', 'Nanga Parbat']; 
console.log(mountains.length); // 3

Основные операции с массивами

Далее объясняются некоторые основные операции с массивами. В следующих уроках вы изучите сложные операции, такие как map(), filter() и reduce().

1) Добавление элемента в конец массива

Чтобы добавить элемент в конец массива, вы используете метод push() :

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea']; 
seas.push('Red Sea'); 
console.log(seas);

Выход:

[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

2) Добавление элемента в начало

Чтобы добавить элемент в начало массива, вы используете метод unshift() :

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea']; 
seas.unshift('Red Sea'); 
console.log(seas);

Выход:

[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]

3) Удаление элемента с конца массива

Чтобы удалить элемент из конца массива, вы используете метод pop() :

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea']; 
const lastElement = seas.pop(); 
console.log(lastElement);

Выход:

Baltic Sea

4) Удаление элемента из начала

Чтобы удалить элемент из начала массива, вы используете метод shift() :

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea']; 
const firstElement = seas.shift(); 
console.log(firstElement);

Выход:

Black Sea

5) Нахождение индекса элемента в массиве

Чтобы найти индекс элемента, вы используете метод indexOf() :

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea']; 
let index = seas.indexOf('North Sea'); 
console.log(index); // 2

6) Проверка является ли значение массивом

Чтобы проверить, является ли значение массивом, вы используете Array.isArray() :

console.log(Array.isArray(seas)); // true

Заключение

• В JavaScript массив — это упорядоченный список значений. Каждое значение называется элементом, заданным индексом.
• Массив может содержать значения смешанных типов.
• Массивы JavaScript являются динамическими, что означает, что они увеличиваются или уменьшаются по мере необходимости.