Работа с массивами в JavaScript

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

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

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

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

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

Для начала давайте создадим пустой массив без каких-либо данных. Это можно сделать двумя способами:

let mas =  new Array()

или

let mas = []

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

let mas = [“мышка”, “клавиатура”, “монитор”]

Теперь мы можем выводить элементы массива по порядковому номеру. Для этого нам нужно указать имя массива и порядковый номер элемента, который нам нужно вывести в квадратных скобках (счет порядка элементов идет с 0, поэтому для вывода первого указываем 0, для второго 1 и так далее…). Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
console.log(mas[0]) //Выведет “мышка”
console.log(mas[1]) //Выведет “клавиатура”
console.log(mas[2]) //Выведет “монитор”

Массив может содержать в себе элементы любого типа. Например:

let mas = [true, function() { console.log(mas) }, { arr: “Это элемент массива” }]
console.log(mas[0]) //Выведет true
mas[1] //Выполнится функция, выведет заданный массив
console.log(mas[2].arr) //Выведет “Это элемент массива”

Но повторюсь, что лучше использовать массивы для хранения однотипных данных.

Так как массивы могут содержать в себе элементы любого типа, то можно хранить одни массивы в других. Пример:

let mas = [[1, 2], [3, 4] ,[5, 6]]
console.log(mas[0][1])//Выведет 1

Рассмотрим один из способов добавления элемента в массив. Он имеет смысл при условии того, что порядковое место, которое мы указываем в скобках, не занято, иначе новый элемент заменит старый. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
mas[3] = “компьютер” //Получим [“мышка”, “клавиатура”, “монитор”, “компьютер”]

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

let mas = [“мышка”, “клавиатура”, “монитор”]
mas[2] = “компьютер” //Получим [“мышка”, “клавиатура”, “компьютер”]

Количество элементов мы можем узнать с помощью свойства length. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
console.log(mas.length) //Выведет 3

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

Рассмотрим пример:

let mas = []
mas[99] = “мышка”
console.log(mas.length)//Выведет 100

В данном массиве всего один элемент, но свойство length выводит число 100. Обычно в JavaScript массивы с пустыми местами не используют.

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

let mas = [“мышка”, “клавиатура”, “монитор”]
mas.length = 2
console.log(mas)//Выведет [“мышка”, “клавиатура”]

Перебор массива можно осуществлять с помощью цикла for. Пример: 

let mas = [“мышка”, “клавиатура”, “монитор”]
for (let elem of mas) {
     console.log(elem)
}
//Выведет “мышка”
//        “клавиатура”
//        “монитор”

Методы для работы с массивами

Для удаления последнего элемента массива используется метод pop. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
console.log(mas.pop()) //Выведет удаляемый элемент, то есть “монитор”
console.log(mas) //Выведет [“мышка”, “клавиатура”]

Для добавления элемента в конец массива используется метод push. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
mas.push( “компьютер”)
console.log(mas) //Выведет [“мышка”, “клавиатура”, “монитор”, “компьютер”]

Для удаления первого элемента массива используется метод shift. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
console.log(mas.shift()) //Выведет удаляемый элемент, то есть “мышка”
console.log(mas) //Выведет [“клавиатура”, “монитор”]

Для добавления элемента в начало массива используется метод unshift. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
mas.shift( “компьютер”)
console.log(mas) //Выведет [“компьютер”, “мышка”, “клавиатура”, “монитор”]

Из-за того, что методы push/pop не требуют смещения порядка элементов массива, они выполняются значительно быстрее методов shift/unshift. Особенно это заметно на примере массивов с большим количеством элементов.

С помощью метода toString мы можем получить все элементы текущего массива через запятую в виде строки. Пример:

let mas = [“мышка”, “клавиатура”, “монитор”]
console.log(mas.toString())//Выведет “мышка,клавиатура,монитор”

Итог

Мы узнали, что такое массивы в JavaScript, и научились пользоваться ими. Надеюсь, эта статья была полезна для вас. Удачи!