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

Вступление

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

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

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

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];
Output
Pacific

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

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

Существует два способа создания массива в 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",
    ],
];

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

Примечание. Вы можете увидеть последний элемент в массиве с конечной запятой или без нее. Это называется запятой . Обычно их пропускают, но обычно они предпочитают включать их в свой код, поскольку это упрощает управление версиями, что упрощает добавление и удаление элементов без ошибок. Обратите внимание, что конечные запятые не разрешены в файлах JSON .

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

Если вы узнали об индексировании и управлении строками в 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;
Output
5

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

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

seaCreatures.indexOf("seahorse");
Output
3

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

seaCreatures.indexOf("cuttlefish");
Output
-1

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

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

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

seaCreatures[1];
Output
squid

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

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];
Output
starfish

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

seaCreatures[10];
Output
undefined

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

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

nestedArray[1][0];
Output
coral

В приведенном выше примере, мы получили доступ к массиву в положении 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]
Output
undefined

Такие проблемы можно избежать, используя 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()вы сможете apend элементов в начало и конец массива.

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

Когда мы хотим удалить определенный элемент из массива, мы используем этот 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]);
}
Output
0 '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);
}
Output
dolphin
whale
manatee

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

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

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *