JavaScript | Как обратиться к элементу массива?

Обращение к любому элементу массива осуществляется при помощи квадратных скобок и целочисленного значения индекса элемента.

Очень часто в программировании на JavaScript нужно получать первый элемент массива или последний элемент массива. Это популярные задачи т. к. на них работает большое количество логики алгоритмов.

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

 

Видео инструкция

В этом видео приводится пример обращения к элементу массива JavaScript. Массив создан литерально при помощи квадратных скобок. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

 

Сложность 0 — однородные одноуровневые элементы

У нас есть полный массив из строковых элементов:

var massiv = ["ффф","ыыы","ввв","ааа","ппп","ррр","ооо","ллл"]

Как нам получить «ппп»? Значение «ппп» находится под индексом 4. Обращение к элементу будет выглядеть так:

massiv[4]

 

Сложность 1 — многоуровневый массив

Массив со смешанными данными и разными уровнями вложенности:

var massiv1 = [["ввв","ааа"],["ффф","ыыы",[456,522,[89,"qwerty"],25,878]],["ппп",["ррр","ооо"],"ллл"]]

Как получить значение «qwerty»? Для начала найдём элементы первого уровня вложенности (самый верхний уровень). Раскидаем элементы построчно.

Массив massiv1 состоит из трёх элементов:

[
   ["ввв","ааа"],
   ["ффф","ыыы",[456,522,[89,"qwerty"],25,878]],
   ["ппп",["ррр","ооо"],"ллл"]
]

Искомое «qwerty» находится во втором элементе. Обратимся ко второму элементу основного массива при помощи индекса 1:

massiv1[1]

Эта команда вернёт нам массив т. к. второй элемент основного массива также является массивом — (уровень 2):

["ффф","ыыы",[456,522,[89,"qwerty"],25,878]]

В этом массиве нам нужно обратиться уже к третьему элементу — это индекс 2. То есть к первой команде massiv1[1] нам нужно добавить новую команду [2]:

massiv1[1][2]

Эта команда вернёт нам массив т. к. третий элемент массива уровня 2 также является массивом — (уровень 3):

[456,522,[89,"qwerty"],25,878]

В этом массиве нам нужно обратиться тоже к третьему элементу — это индекс 2. То есть к первой команде massiv1[1] нам нужно добавить вторую команду [2], и третью — [2]:

massiv1[1][2][2]

Эта команда вернёт нам массив т. к. третий элемент массива уровня 3 также является массивом — (уровень 4):

[89,"qwerty"]

В этом массиве нам нужно обратиться ко второму элементу — это индекс 1. То есть к первой команде massiv1[1] нам нужно добавить вторую команду [2], третью — [2] и четвёртую [1]:

massiv1[1][2][2][1]

Итоговый результат:

"qwerty"

 

Сложность 2

У нас есть полный массив из всевозможных элементов:

var massiv2 = [["ффф","ыыы",[456,522,[89,"qwerty"],25,878]],[[false],"ввв","ааа"],{x2:true, rr11:[2010], KdvwQs:["sdfiyhHIYgRFrsD",true,{qwerty:{sdsd:"ASDF", de54:["efim360.ru"]}}], lk:false},["ппп",{},["ррр","ооо"],"ллл"]]

Массив massiv2 состоит из 4 элементов:

[
   ["ффф","ыыы",[456,522,[89,"qwerty"],25,878]],
   [[false],"ввв","ааа"],
   {x2:true, rr11:[2010], KdvwQs:["sdfiyhHIYgRFrsD",true,{qwerty:{sdsd:"ASDF", de54:["efim360.ru"]}}], lk:false},
   ["ппп",{},["ррр","ооо"],"ллл"]
]

Как нам получить строку «efim360.ru«? Из прошлой сложности вам должно быть понятно описание, поэтому в этом примере затронем вопрос обращения к элементам объекта.

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

massiv2[2]

{x2:true, rr11:[2010], KdvwQs:["sdfiyhHIYgRFrsD",true,{qwerty:{sdsd:"ASDF", de54:["efim360.ru"]}}], lk:false}

Из объекта достаём массив:

massiv2[2].KdvwQs

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

Получаем массив:

["sdfiyhHIYgRFrsD",true,{qwerty:{sdsd:"ASDF", de54:["efim360.ru"]}}]

Достаём из него последний элемент — нашем случае он третий, значит индекс равен 2:

massiv2[2].KdvwQs[2]

Получаем объект, который состоит из одного элемента (одной пары «ключ/значение»):

{qwerty:{sdsd:"ASDF", de54:["efim360.ru"]}}

Достаём значение единственного элемента по его ключу — qwerty:

massiv2[2].KdvwQs[2].qwerty

Снова получаем объект:

{sdsd:"ASDF", de54:["efim360.ru"]}

Вытаскиваем значение второго элемента объекта:

massiv2[2].KdvwQs[2].qwerty.de54

 

Нам возвращается массив из одного элемента со строковым значением — искомым значением:

["efim360.ru"]

Достаём строку из массива:

massiv2[2].KdvwQs[2].qwerty.de54[0]

Получаем нужную нам строку:

"efim360.ru"

 

Итоговая картинка сложности 2:

 

Обращение к элементу массива через переменную

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

Представим, что у нас есть переменная «qwe» в которой хранится число 2. Также у нас есть массив «arr«, который состоит из 5 элементов.

let qwe = 2;
let arr = [12, 23, 34, 45, 56];

В этом случае мы можем обратиться к индексу массива через значение в переменной:

arr[qwe];
34

Результат в консоли браузера:

 

Ссылки

JavaScript | Массивы (Array)

JavaScript | Как получить первый элемент массива?

JavaScript | Как получить последний элемент массива?

JavaScript | Как изменить длину массива?

JavaScript | Как увеличить длину массива?

JavaScript | Как уменьшить длину массива?

ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array-objects