Массивы JavaScript
Массив — это специальная переменная, которая может содержать более одного значения:
const cars = ["Saab", "Volvo", "BMW"];
Зачем использовать массив?
Если у вас есть список элементов (например, список названий автомобилей), хранение автомобилей в отдельных переменных может выглядеть следующим образом:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Однако что, если вы хотите перебрать все машины и найти конкретную? А если бы у вас было не 3 машины, а 300?
Решение представляет собой массив!
Массив может содержать множество значений под одним именем, и вы можете получить доступ к значениям, обратившись к номеру индекса.
Создание массива
Использование литерала массива — это самый простой способ создать массив JavaScript.
Синтаксис:
const array_name = [item1, item2, ...];
Общепринятой практикой является объявление массивов с помощью ключевого слова const .
Узнайте больше о const с массивами в главе: JS Array Const .
Пример
const cars = ["Saab", "Volvo", "BMW"];
Пробелы и переносы строк не важны. Объявление может занимать несколько строк:
Пример
const cars = [
"Saab",
"Volvo",
"BMW"
];
Вы также можете создать массив, а затем предоставить элементы:
Пример
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Использование ключевого слова JavaScript new
В следующем примере также создается массив и присваиваются ему значения:
Пример
const cars = new Array("Saab", "Volvo", "BMW");
Два приведенных выше примера делают то же самое.
Нет необходимости использовать new Array()
.
Для простоты, удобочитаемости и скорости выполнения используйте литеральный метод массива.
Доступ к элементам массива
Вы получаете доступ к элементу массива, обращаясь к номеру индекса :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Примечание. Индексы массива начинаются с 0.
[0] — первый элемент. [1] — второй элемент.
Изменение элемента массива
Этот оператор изменяет значение первого элемента в cars
:
cars[0] = "Opel";
Пример
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Доступ к полному массиву
С помощью JavaScript доступ к полному массиву можно получить, обратившись к имени массива:
Пример
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Массивы — это объекты
Массивы — это особый тип объектов. Оператор typeof
в JavaScript возвращает «объект» для массивов.
Но массивы JavaScript лучше всего описывать как массивы.
Массивы используют числа для доступа к своим «элементам». В этом примере person[0]
возвращает John:
Множество:
const person = ["John", "Doe", 46];
Объекты используют имена для доступа к своим «членам». В этом примере
person.firstName
возвращает John:
Объект:
const person = {firstName:"John", lastName:"Doe", age:46};
Элементы массива могут быть объектами
Переменные JavaScript могут быть объектами. Массивы — это особые виды объектов.
Из-за этого вы можете иметь переменные разных типов в одном и том же массиве.
Вы можете иметь объекты в массиве. Вы можете иметь функции в массиве. Вы можете иметь массивы в массиве:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Свойства и методы массива
Настоящей силой массивов JavaScript являются встроенные свойства и методы массива:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Методы массива рассматриваются в следующих главах.
Свойство длины
Свойство length
массива возвращает длину массива (количество элементов массива).
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Свойство length
всегда на единицу больше, чем самый высокий индекс массива.
Доступ к первому элементу массива
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Доступ к последнему элементу массива
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Зацикливание элементов массива
Один из способов перебрать массив — использовать for
цикл:
Пример
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let 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"); // Adds a new element (Lemon) to fruits
Новый элемент также можно добавить в массив с помощью length
свойства:
Пример
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
ПРЕДУПРЕЖДЕНИЕ !
Добавление элементов с высокими индексами может создать неопределенные «дыры» в массиве:
Пример
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Ассоциативные массивы
Многие языки программирования поддерживают массивы с именованными индексами.
Массивы с именованными индексами называются ассоциативными массивами (или хэшами).
JavaScript не поддерживает массивы с именованными индексами.
В JavaScript массивы всегда используют нумерованные индексы .
Пример
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
ПРЕДУПРЕЖДЕНИЕ !!
Если вы используете именованные индексы, JavaScript переопределит массив в объект.
После этого некоторые методы и свойства массива будут давать некорректные результаты .
Пример:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
Разница между массивами и объектами
В JavaScript массивы используют нумерованные индексы .
В JavaScript объекты используют именованные индексы .
Массивы — это особый вид объектов с пронумерованными индексами.
Когда использовать массивы. Когда использовать объекты.
- JavaScript не поддерживает ассоциативные массивы.
- Вы должны использовать объекты , когда хотите, чтобы имена элементов были строками (текстом) .
- Вы должны использовать массивы , когда хотите, чтобы имена элементов были числами .
Новый массив JavaScript()
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
слово может привести к неожиданным результатам:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Распространенная ошибка
const points = [40];
не то же самое, что:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Как распознать массив
Распространенный вопрос: как узнать, является ли переменная массивом?
The problem is that the JavaScript operator typeof
returns
"object
":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray()
:
Array.isArray(fruits);
Solution 2:
The instanceof
operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.