Массивы в JavaScript

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

Для решения этого неудобства в программировании был изобретен специальный тип данных, который называется массив.

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

Для создания массива используются квадратные скобки:

let arr = []; // создаем массив arr

Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

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

Элементы разделяются между собой запятой. После этой запятой можно ставить пробелы, а можно и не ставить (более принято ставить, ставьте).

Обратите внимание на то, что названия дней недели представляют собой строки и поэтому взяты в кавычки. Кроме строк в массиве можно хранить числа, и их в кавычки мы не берем:

let arr = [1, 2, 3];

Кроме строк и чисел в массиве можно хранить все допустимые типы данных JavaScript, а также смешивать их между собой в одном массиве, пример:

let arr = [1, 2, 'a', 'b', null, true, false];

Создайте массив с элементами 'a', 'b' и 'c'. Выведите его на экран с помощью функции alert, а также выведите его в консоль с помощью console.log.

Как вывести отдельный элемент массива

Обращение к элементам массива осуществляется подобно обращениям к символам строки:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']; console.log(arr[0]); // выведет 'пн' console.log(arr[1]); // выведет 'вт' console.log(arr[2]); // выведет 'ср'

Как вы видите, каждый элемент массива имеет свой номер: первый элемент - номер 0, второй - номер 1 и так далее. Эти номера называются ключами элементов массива.

Создайте массив с элементами 'a', 'b', 'c'. Выведите на экран каждый из этих элементов.

Создайте массив с элементами массив с элементами 'a', 'b', 'c', 'd'. Выведите с его помощью на экран строку 'a+b+c+d'.

Создайте массив с элементами 1, 2 и 3. Выведите на экран сумму этих элементов.

Создайте массив с элементами 2, 5, 3, 9. Умножьте первый элемент массива на второй, а третий элемент на четвертый. Результаты сложите, присвойте переменной result. Выведите на экран значение этой переменной.

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

Длина массива, так же, как и длина строки находится с помощью свойства length:

let arr = [1, 2, 3]; console.log(arr.length) // выведет 3

Создайте массив с произвольными элементами. Выведите на экран количество элементов в этом массиве.

Последний элемент массива

Последний элемент массива также получается аналогично последнему символу строки:

let arr = [1, 2, 3]; console.log(arr[arr.length - 1]) // выведет 3

Создайте массив с произвольными элементами. Выведите на экран последний элемент этого массива.

Изменение массива

Элементы массивов, в отличие от символов строк, можно изменять:

let arr = ['a', 'b', 'c']; arr[0] = '!'; console.log(arr); // выведет ['!', 'b', 'c']

Создайте массив с элементами 'a', 'b', 'c'. Запишите вместо первого элемента число 1, вместо второго - 2, вместо третьего - 3.

Перезапись элементов

Можно также прочитывать текущее значение элемента, выполнять с ним какие-то операции и записывать измененное значение обратно в этот элемент:

let arr = ['a', 'b', 'c']; arr[0] = arr[0] + '!'; arr[1] = arr[1] + '!'; arr[2] = arr[2] + '!'; console.log(arr); // выведет ['a!', 'b!', 'c!']

Предыдущий код можно переписать через оператор +=:

let arr = ['a', 'b', 'c']; arr[0] += '!'; arr[1] += '!'; arr[2] += '!'; console.log(arr); // выведет ['a!', 'b!', 'c!']

Создайте массив с числами. Прибавьте к каждому элементу массива число 3. Выведите на экран измененный массив.

Инкремент и декремент

Можно также применять операции инкремента и декремента:

let arr = [1, 2, 3, 4]; arr[0]++; ++arr[1]; arr[2]--; --arr[3]; console.log(arr); // выведет [2, 3, 2, 3]

Создайте массив с элементами 1, 2 и 3. С помощью оператора ++ увеличьте каждый элемент массива на единицу.

Заполнение массива

Элементы в массив не обязательно добавлять сразу в момент объявления этого массива.

Можно вначале объявить этот массив пустым, а затем добавить в него необходимые элементы, вот так:

let arr = []; // создаем пустой массив arr[0] = 'a'; // в ключ 0 добавим элемент 'a' arr[1] = 'b'; // в ключ 1 добавим элемент 'b' arr[2] = 'c'; // в ключ 2 добавим элемент 'c' console.log(arr); // выведет ['a', 'b', 'c']

Массив не обязательно должен быть изначально пустым - там уже что-то может быть, но мы все равно можем добавлять новые элементы:

let arr = ['a', 'b', 'c']; // объявляем массив с элементами arr[3] = 'd'; // добавляем еще один элемент console.log(arr); // выведет ['a', 'b', 'c', 'd']

С помощью описанного приема создайте массив с элементами 1, 2 и 3.

Пусть дан такой массив:

let arr = [1, 2, 3];

Добавьте ему в конец элементы 4 и 5.

Несуществующие элементы

Обращение к несуществующему элементу массива вернет undefined. Никакой ошибки при этом не будет. Давайте посмотрим на примере.

Пусть у нас в массиве 3 элемента. Давайте обратимся к несуществующему элементу, например, к элементу с номером 10:

let arr = ['a', 'b', 'c']; console.log(arr[10]); // выведет undefined

Разреженный массив

Пусть у нас есть некоторый пустой массив:

let arr = [1, 2, 3];

Давайте добавим к этому массиву еще один элемент:

let arr = [1, 2, 3]; arr[3] = '!'; console.log(arr); // выведет [1, 2, 3, '!']

Давайте проговорим то, каким образом мы добавили новый элемент в массив: мы знаем, что в нем 3 элемента, и, так как нумерация элементов начинается с нуля, то следующий по порядку элемент будет иметь ключ 3, поэтому мы записывали новое значение в элемент с этим ключом.

Но что будет, если взять не следующий по порядку ключ, а какой-то другой?

В этом случае нас ждет интересное поведение. Давайте посмотрим на примере.

Запишем значение в элемент с ключом 4:

let arr = [1, 2, 3]; arr[4] = '!'; console.log(arr); // выведет [1, 2, 3, undefined, '!']

А теперь запишем значение в элемент с ключом 5:

let arr = [1, 2, 3]; arr[5] = '!'; console.log(arr); // выведет [1, 2, 3, undefined, undefined, '!']

Как вы видите, новое значение добавляется в конец массива, но между уже существующими значениями и новым появляется дыра, которая заполняется значением undefined!

На практике это означает увеличение длины массива:

let arr = [1, 2, 3]; arr[5] = '!'; console.log(arr.length); // выведет 6, хотя в нем 4 элемента!

Такие массивы, в которых присутствуют дыры, называются разреженными.