Понимание массивов в JavaScript

Вступление

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

Массивы очень полезны, поскольку они хранят несколько значений в одной переменной, что может сгущать и упорядочивать наш код, делая его более читаемым и обслуживаемым. Массивы могут содержать любыеdata type, включаяnumbers,strings иobjects.

Чтобы продемонстрировать, как массивы могут быть полезны, рассмотрите возможность присвоения пяти океанам мира их собственным переменным.

oceans.js

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

Этот метод очень многословен и может быстро стать сложным в обслуживании и отслеживании.

Используя массивы, мы можем упростить наши данные.

oceans.js

// Assign the five oceans
let oceans = [
    "Pacific",
    "Atlantic",
    "Indian",
    "Arctic",
    "Antarctic",
];

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

Чтобы получить доступ к определенному элементу, добавьте его индекс к переменной.

// Print out the first item of the oceans array
oceans[0];

OutputPacific

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

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

Есть два способа создать массив в JavaScript:

Литерал массива, который использует квадратные скобки.
Конструктор массива, использующий ключевое словоnew.

Давайте продемонстрируем, как создать массив видов акул, используя литерал массива, который инициализируется[].

sharks.js

// Initialize array of shark species with array literal
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

Теперь вот те же данные, созданные с помощью конструктора массива, который инициализируетсяnew Array().

sharks.js

// Initialize array of shark species with array constructor
let sharks = new Array(
    "Hammerhead",
    "Great White",
    "Tiger",
);

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

Мы можем распечатать весь массив, который будет отображать то же, что и наш ввод.

// Print out the entire sharks array
sharks;

Output[ 'Hammerhead', 'Great White', 'Tiger' ]

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

// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

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

[.note] #Note: Вы можете увидеть последний элемент в массиве с последней запятой или без нее. Это известно какtrailing comma. Обычно их пропускают, но, как правило, их предпочтительно включать в код, поскольку это делает различия в системе контроля версий более понятными и упрощает добавление и удаление элементов без ошибок. Обратите внимание, что конечные запятые не допускаются вJSON files.
#

Индексирование массивов

Если вы узнали оindexing and manipulating strings in JavaScript, возможно, вы уже знакомы с концепцией индексирования массивов, поскольку строка похожа на массив.

Массивы не имеют пар имя / значение. Вместо этого они индексируются целочисленными значениями, начинающимися с0. Вот пример массива, назначенногоseaCreatures.

seacreatures.js

let seaCreatures = [
    "octopus",
    "squid",
    "shark",
    "seahorse",
    "starfish",
];

Вот разбивка того, как индексируется каждый элемент в массивеseaCreatures.

осьминог	Кальмар	акула	морской конек	морская звезда
0	1	2	3	4

осьминог

Кальмар

акула

морской конек

морская звезда

Первым элементом массива являетсяoctopus, который индексируется как0. Последним элементом являетсяstarfish, который индексируется в4. Подсчет начинается с0 в индексах, что противоречит нашей естественной интуиции начинать отсчет с 1, поэтому следует помнить об этом с особой осторожностью, пока это не станет естественным.

Узнать, сколько элементов в массиве, можно с помощью свойстваlength.

seaCreatures.length;

Output5

Хотя индексыseaCreatures состоят от0 до4, свойствоlength будет выводить фактическое количество элементов в массиве, начиная с 1.

Если мы хотим узнать порядковый номер определенного элемента в массиве, напримерseahorse, мы можем использовать методindexOf().

seaCreatures.indexOf("seahorse");

Output3

Если номер индекса не найден, например, для несуществующего значения, консоль вернет-1.

seaCreatures.indexOf("cuttlefish");

Output-1

С индексами, которые соответствуют элементам в массиве, мы можем получить доступ к каждому элементу дискретно, чтобы работать с этими элементами.

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

Доступ к элементу в массиве JavaScript осуществляется путем обращения к номеру индекса элемента в квадратных скобках.

seaCreatures[1];

Outputsquid

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

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Outputstarfish

Попытка получить доступ к несуществующему элементу вернетundefined.

seaCreatures[10];

Outputundefined

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

let nestedArray = [
    [
        "salmon",
        "halibut",
    ],
    [
        "coral",
        "reef",
    ]
];

nestedArray[1][0];

Outputcoral

В приведенном выше примере мы обращались к массиву в позиции1 переменнойnestedArray, а затем к элементу в позиции0 во внутреннем массиве.

Добавление элемента в массив

В нашей переменнойseaCreatures у нас было пять элементов, которые состояли из индексов от0 до4. Если мы хотим добавить новый элемент в массив, мы можем присвоить значение следующему индексу.

seaCreatures[5] = "whale";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale' ]

Если мы добавим элемент и случайно пропустим индекс, он создаст неопределенный элемент в массиве.

seaCreatures[7] = "pufferfish";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish' ]

Попытка получить доступ к дополнительному элементу массива вернетundefined.

seaCreatures[6]

Outputundefined

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

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    ,
    'whale',
    'pufferfish',
    'lobster' ]

На другом конце спектра методunshift() добавит элемент в начало массива.

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish',
    'lobster' ]

Междуpush() иunshift() вы сможете добавлять элементы в начало и конец массива.

Удаление элемента из массива

Когда мы хотим удалить определенный элемент из массива, мы используем методsplice(). В массивеseaCreatures мы случайно создали неопределенный элемент массива ранее, поэтому давайте удалим его сейчас.

seaCreatures.splice(7, 1);

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish',
    'lobster' ]

В методеsplice() первый параметр означает номер индекса, который нужно удалить (в данном случае7), а второй параметр - количество элементов, которые следует удалить. Мы ставим1, что означает, что будет удален только один элемент.

Методsplice() изменит исходную переменную. Если вы хотите, чтобы исходная переменная оставалась неизменной, используйтеslice() и присвойте результат новой переменной.

let newArray = slice(7, 1);

Методpop() удалит последний элемент в массиве.

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

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

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

Используяpop() иshift(), мы можем удалять элементы из начала и конца массивов. По возможности предпочтительно использоватьpop(), так как остальные элементы в массиве сохраняют свои исходные номера индексов.

Модификация элементов в массивах

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

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

Output[ 'manatee',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

Другой способ изменить значение - использовать методsplice() с новым параметром. Если бы мы хотели изменить значениеseahorse, которое является элементом с индексом3, мы могли бы удалить его и добавить на его место новый элемент.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

Output[ 'manatee',
    'squid',
    'shark',
    'sea lion',
    'starfish',
    'whale',
    'pufferfish' ]

В приведенном выше примере мы удалилиseahorse из массива и поместили новое значение в индекс3.

Цикл по массиву

Мы можем перебрать весь массив с помощью ключевого словаfor, воспользовавшись свойствомlength. В этом примере мы можем создать массивshellfish и распечатать каждый номер индекса, а также каждое значение на консоли.

// Create an array of shellfish species
let shellfish = [
    "oyster",
    "shrimp",
    "clam",
    "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

Output0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

Мы также можем использовать циклfor...of, более новую функцию JavaScript.

// Create an array of aquatic mammals
let mammals = [
    "dolphin",
    "whale",
    "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
    console.log(mammal);
}

Outputdolphin
whale
manatee

Циклfor...of не извлекает порядковый номер элементов в массиве, но, как правило, это более простой и краткий способ перебора массива.

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

Заключение

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

Вы можете узнать больше о других типах данных в JavaScript, прочитав наш учебник «https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[Understanding Типы данных в JavaScript]».

TOC