Объект массива (Array) JavaScript

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

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

Предположим, что вы хотите хранить имена городов в JavaScript-коде. Хранение имен городов в переменных может выглядеть так:

　　let city1 = "New Delhi";
　　let city2 = "Mumbai";
　　let city3 = "Jaipur";

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

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

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

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

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

• Литейный - неявное созданиеего использование квадратными скобками: []

• Простота - прямое созданиеключевое слово new

Давайте продемонстрируем, как использовать инициализированныйКонстанта массиваСоздание fruitsМассив[]:

let fruits = ["Apple", "Mango", "Banana", "Orange"];

Декларация может распространяться на несколько строк:

let fruits = [
　　"Apple",
　　"Mango",
　　"Banana",
　　"Orange"
;

Теперь это использованиеКонструктор массиваСозданные данные идентичны, данные используются для инициализации new Array():

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

Оба метода создают массив. Однако,Литейный - неявное созданиеМетод в квадратных скобках [] более часто используется и предпочтителен, потому чтоnew Array()Методы конструктора могут давать несовместимые и неожиданные результаты.

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

Массив не имеет имен/значений пар. Вместо этого они индексируются целыми числами,开始的索引为0.

Вот пример массива, присвоенного fruits:

　　let fruits = ["Apple", "Mango", "Banana", "Orange"];

Вот разбор способа индексации каждого элемента в массиве fruits:

Первый элемент массива — "Apple", индекс равен 0.

Последний элемент — "Orange", индекс равен 3.

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

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

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0]; // Возвращает "Apple"
fruits[2]; // Возвращает "Banana"

Индекс массива в JavaScript равен 0: индекс первого элемента массива равен 0, второго элемента равен 1 и так далее.

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

fruits[7]; // Возвращает undefined

Весь массив можно получить, используя имя массива по ссылке.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

атрибут length массива

Мы можем использоватьlengthАтрибут определяет, сколько элементов содержится в массиве.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length; // Возвращает 4

Индекс последнего элемента равен значению атрибута length массива минус 1.

Этот пример использует атрибут length для отображения значения последнего элемента:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length - 1;
fruits[lastIndex];

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

В переменной fruits у нас есть четыре элемента, включая индексы от 0 до 3. Если нужно добавить новый элемент в массив, можно分配 значение для следующего индекса.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

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

fruits[6] = "Strawberry";

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

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

Также можно использоватьlengthСвойства добавляют новый элемент в массив.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length] = "Beer";

Изменение элементов массива

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

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

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

let myArray = [5, 22, "Arrow", "Bone", true, new Date()];

пройти по массиву

Мы можем использоватьforиlengthатрибуты для итерации всего массива.

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

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";
// итерация длины массива
for (let i = 0; i < fruits.length; i++) {
txt += i + " = " + fruits[i] + "<br>";
}

Мы также можем использовать следующиеArray.forEach()Метод:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
fruits.forEach(function(element) {
result.innerHTML += element + "<br>";
});

Мы также можем использоватьfor...ofЦикл для итерации массива JavaScript, это новый функционал JavaScript:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
for (let x of fruits) {
result.innerHTML += x;
}

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

Многомерный массив

Многомерный массив - это массив, содержащий один или несколько массивов.

　　let points = [
　　　[35, 28, 29, 31],
　　　[33, 24, 25, 29]
　　;

JavaScript может понимать многомерные массивы глубиной 2, 3, 4, 5 или больше уровней. Но для большинства людей трудно управлять массивами глубже трёх уровней.

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

• Для двумерного массива вам нужно два индекса для выбора элемента

• Для трёхмерного массива вам нужно три индекса для выбора элемента

Двумерный массив можно рассматривать как таблицу, где первый [ ] - это строки, а второй [ ] - это столбцы.

points[0][1]; // возвращает 28
points[1][0]; // возвращает 33

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

let points = [[35, 28, 29, 31], [33, 24, 25, 29]];
let row;
let col;
for (row = 0; row < 2; row++) {
　　　for (col = 0; col < 4; col++) {
　　document.write(row, col, points[row][col]);
　　　}
}

Конечно, вы также можете использоватьlengthПолучение размеров строк и столбцов свойств:

let points = [
　　　[10, 12, 14, 16, 18],
　　　[20, 22, 24, 26],
　　　[30, 32, 34],
　　　[32, 34]
;
points.length; // Возвращает 4 (Общее количество строк)
points[0].length; // Возвращает 5
points[1].length; // Возвращает 4
points[2].length; // Возвращает 3
points[3].length; // Возвращает 2

В большинстве случаев достаточно 2-мерного массива, хотя в некоторых местах можно использовать 3-мерный массив

Массив в JavaScript является объектом

В JavaScript массив является специфическим объектом

Оператор typeof в JavaScript возвращает «Object» для массива

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits; // Возвращает «object»

Избегайте использования new Array()

Не нужно использовать конструктор массива new Array()

Напротив, следует尽量 использовать неявное создание массива, то есть直接 использовать метод квадратных скобок [],这种方法 более распространен и популярен.

Два разных выражения создают новый пустой массив с именем scores:

　　let scores = new Array(); // Не рекомендуется этот способ
　　let scores = []; // Рекомендованный способ

Два разных выражения создают новый массив, содержащий 5 чисел:

let scores = new Array(2, 5, 10, 28, 10); // Не рекомендуется этот способ
let scores = [2, 5, 10, 28, 10]; // Рекомендованный способ

Конструктор new Array() может быть несовместим и может привести к неожиданным результатам:

let scores = new Array(10, 25); // Создание массива, содержащего два элемента (10 и 25)
let scores = new Array(10); // Создание массива, содержащего 10 неопределенных элементов

Как определить, является ли переменная массивом - Array.isArray()

Как вы знаете, оператор typeof в JavaScript возвращает «Object» для массива.

Частая проблема:Как узнать, является ли переменная массивом?

Для решения этой проблемы ECMAScript 5 определил новый методArray.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

Если объект создан с помощью данного конструктора, то можно использовать оператор instanceof для возврата true:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
　　　// выполнения инструкций
}

Передача массива функции

В следующем примере мы передадим массив функции:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
　　for (let elem of arg) {
　　document.write(elem, "<br>");
　　}
}

Возврат массива из функции

В следующем примере мы вернем массив из функции:

function myFunc() {
　　let fruits = ["Apple", "Mango", "Banana", "Orange"];
　　return fruits;
}
let myArray = myFunc();
document.write(myArray);