JavaScript Массивы
Массивы JavaScript используются для хранения нескольких значений в одной переменной.
Что такое массив?
Массив - это специальная переменная, которая может содержать более одного значения одновременно.
Если у вас есть список элементов (например, список названий автомобилей), хранение автомобилей в отдельных переменных может выглядеть следующим образом:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
А если вы хотите перебрать машины и найти конкретную? А если бы у вас было не 3 машины, а 300?
Решение - массив!
Массив может содержать множество значений под одним именем, и вы можете получить доступ к значениям, лишь указав номер индекса.
Создание массива
Использование литерала массива - самый простой способ создать массив JavaScript.
Синтаксис:
const array_name = [item1, item2, ...];
Пробелы и перенос строки не важны. Объявление может занимать несколько строк:
Вы также можете создать массив, а затем предоставить элементы:
Использование JavaScript ключевого слова new
В следующем примере также создается массив и присваиваются ему значения:
Два приведенных выше примера делают то же самое.
Нет необходимости использовать new Array().
Для простоты, удобочитаемости и скорости выполнения используйте первый (метод литерала массива).
Доступ к элементам массива
Вы получаете доступ к элементу массива, ссылаясь на номер индекса:
const cars = ["Saab", "Volvo", "BMW"];
let x = cars[0]; // x = "Saab"
Попробуйте сами »
Примечание: Индексы массива начинаются с 0.
[0] - это первый элемент. [1] - это второй элемент.
Изменение элемента массива
Эта инструкция изменяет значение первого элемента в cars:
cars[0] = "Opel";
Доступ к полному массиву
С помощью JavaScript можно получить доступ к полному массиву, указав имя массива:
Пример
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Попробуйте сами »Массивы - это объекты
Массивы - это особый тип объектов. Оператор typeof в JavaScript возвращает "объект" для массивов.
Но массивы JavaScript лучше всего описывать как массивы.
Массивы используют числа для доступа к своим "элементам". В этом примере person[0] возвращает John:
Объекты используют имена для доступа к своим "членам". В этом примере person.firstName возвращает John:
Элементы массива могут быть объектами
Переменные JavaScript могут быть объектами. Массивы - это особые виды объектов.
Из-за этого в одном массиве могут быть переменные разных типов.
Вы можете иметь объекты в массиве. Вы можете иметь функции в массиве. Вы можете иметь массивы в массиве:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Свойства и методы массива
Настоящая сила массивов JavaScript - это встроенные свойства и методы массива:
cars.length // Возвращает количество элементов
cars.sort() // Сортирует массив
Методы массивов рассматриваются в следующих главах.
Свойство length (длины)
Свойство length массива возвращает длину массива (количество элементов массива).
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // Возвращает 4
Попробуйте сами »
Свойство length всегда на единицу больше, чем самый высокий индекс массива.
Доступ к первому элементу массива
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0]; // Возвращает "Banana"
Попробуйте сами »
Доступ к последнему элементу массива
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length - 1]; // Возвращает "Mango"
Попробуйте сами »
Зацикливание элементов массива
Самый безопасный способ перебрать массив - это использовать цикл for:
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
Попробуйте сами »
Вы также можете использовать функцию Array.forEach():
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
Попробуйте сами »
Добавление элементов массива
Самый простой способ добавить новый элемент в массив - использовать метод push():
Пример
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Добавляет новый элемент (Lemon) к fruits
Попробуйте сами »
Новый элемент также можно добавить в массив с помощью свойства length:
Пример
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Добавляет "Lemon" к fruits
Попробуйте сами »
ПРЕДУПРЕЖДЕНИЕ!
Добавление элементов с высокими индексами может создать неопределенные (undefined) "дыры" в массиве:
Пример
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Создание undefined "дыр" в fruits
Попробуйте сами »
Ассоциативные массивы
Многие языки программирования поддерживают массивы с именованными индексами.
Массивы с именованными индексами называются ассоциативными массивами (или хэшами).
JavaScript не поддерживает массивы с именованными индексами.
В JavaScript массивы всегда используют нумерованные индексы.
Пример
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Вернёт 3
person[0]; // Вернёт "John"
Попробуйте сами »
ПРЕДУПРЕЖДЕНИЕ!!
Если вы используете именованные индексы, JavaScript переопределит массив на объект.
После этого некоторые методы и свойства массива будут давать неверные результаты.
Пример:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Вернёт 0
person[0]; // Вернёт undefined
Попробуйте сами »
Разница между массивами и объектами
В JavaScript массивы используют нумерованные индексы.
В JavaScript объекты используют именованные индексы.
Массивы - это особый вид объектов с пронумерованными индексами.
Когда использовать массивы? Когда использовать объекты?
- JavaScript не поддерживает ассоциативные массивы.
- Вы должны использовать объекты, если хотите, чтобы имена элементов были строками (текстом).
- Вы должны использовать массивы, если хотите, чтобы имена элементов были числами.
Избегайте new Array()
Нет необходимости использовать встроенный JavaScript конструктор массива new Array().
Используйте [] вместо этого.
Эти два разных оператора создают новый пустой массив с именем points:
const points = new Array(); // Плохо
const points = []; // Хорошо
Эти два разных оператора создают новый массив, содержащий 6 чисел:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Попробуйте сами »
Ключевое слово new только усложняет код. Это также может привести к неожиданным результатам:
// Это создает массив с двумя элементами (40 и 100):
const points = new Array(40, 100);
А что, если удалить один из элементов?
// Это создает массив с 40 undefined элементами!!
const points = new Array(40);
Попробуйте сами »
Как распознать массив
Распространенный вопрос: как узнать, является ли переменная массивом?
Проблема в том, что JavaScript оператор typeof возвращает object:
const fruits = ["Banana", "Orange", "Apple"];
typeof fruits; // возвращает object
Попробуйте сами »
Оператор typeof возвращает object, потому что массив JavaScript является объектом.
Решение 1:
Для решения этой проблемы ECMAScript 5 определяет новый метод Array.isArray():
Array.isArray(fruits); // возвращает true
Попробуйте сами »
Решение 2:
Оператор instanceof возвращает true, если объект создан данным конструктором:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array; // возвращает true
Попробуйте сами »
