Массивы в JavaScript: что это, индексы, length

Массив (array) - это структура данных для хранения упорядоченного списка значений. В массиве можно хранить числа, строки, объекты и даже другие массивы. Главная идея - у каждого элемента есть позиция (индекс), по которой к нему можно обратиться.

Как создать массив

Чаще всего массив создают с помощью квадратных скобок:

const nums = [10, 20, 30];
const names = ["Sam", "Alex", "Kim"];
const mixed = [1, "text", true];

Пустой массив:

const items = [];

Индексы: с чего начинается счет

Элементы массива нумеруются с нуля:

const letters = ["a", "b", "c"];

console.log(letters[0]); // "a"
console.log(letters[1]); // "b"
console.log(letters[2]); // "c"

Если обратиться к индексу, которого нет, результат будет undefined:

const letters = ["a", "b", "c"];
console.log(letters[10]); // undefined

length: количество элементов

Свойство length показывает, сколько элементов в массиве.

const letters = ["a", "b", "c"];

console.log(letters.length); // 3

Последний индекс можно получить так:

const lastIndex = letters.length - 1;
console.log(lastIndex); // 2
console.log(letters[lastIndex]); // "c"

Изменение элементов по индексу

Массив можно менять - это нормально и ожидаемо.

const nums = [10, 20, 30];

nums[1] = 99;
console.log(nums); // [10, 99, 30]

Важно: const запрещает переназначить переменную целиком, но не запрещает менять содержимое массива.

const nums = [1, 2, 3];
nums[0] = 10;

console.log(nums); // [10, 2, 3]

Добавление элементов по индексу и “дыры” в массиве

Можно записать элемент в индекс, который далеко впереди. Тогда между элементами появятся пустые места (sparse array).

const arr = [];
arr[3] = "x";

console.log(arr.length); // 4
console.log(arr);        // [ <3 empty items>, "x" ]

Такие массивы обычно неудобны. Чаще элементы добавляют методами (push, unshift), они будут дальше в модуле.

Перебор массива по индексам

Классический способ перебора - цикл for с границей i < arr.length.

const nums = [10, 20, 30];

for (let i = 0; i < nums.length; i += 1) {
  console.log(i, nums[i]);
}
// 0 10
// 1 20
// 2 30

Типичная ошибка - <= вместо <:

const nums = [10, 20, 30];

for (let i = 0; i <= nums.length; i += 1) {
  console.log(nums[i]);
}
// 10
// 20
// 30
// undefined

Массивы и ссылки: важный нюанс

Массив - это объект, поэтому переменная хранит ссылку. Если присвоить массив в другую переменную, обе переменные будут указывать на один и тот же массив.

const a = [1, 2, 3];
const b = a;

b[0] = 99;

console.log(a); // [99, 2, 3]
console.log(b); // [99, 2, 3]

Если нужно получить копию, это делают отдельно (способы будут дальше, но базовый вариант - slice()).

const a = [1, 2, 3];
const b = a.slice();

b[0] = 99;

console.log(a); // [1, 2, 3]
console.log(b); // [99, 2, 3]

Что стоит запомнить

Массив хранит упорядоченный список значений.
Индексы начинаются с 0.
length - количество элементов, последний индекс - length - 1.
Обращение к несуществующему индексу дает undefined.
Для перебора по индексам обычно используют i < arr.length.
Массивы передаются по ссылке, поэтому при присваивании создается не копия.