JavaScript Массивы
Массивы JavaScript используются для хранения нескольких значений в одной переменной.
Пример
var cars = ["Saab", "Volvo", "BMW"];
Что такое массив?
Массив — это специальная переменная, которая может содержать более одного значения за раз.
Если у вас есть список элементов (список названий автомобилей, например), хранение автомобилей в одиночных переменных может выглядеть так:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Однако, что, если вы хотите, чтобы петля через автомобили и найти конкретный один? А что, если у вас не 3 машины, но 300?
Решение представляет собой массив!
Массив может содержать много значений под одним именем, и вы можете получить доступ к значениям, ссылаясь на номер индекса.
Создание массива
Использование литерала массива является самым простым способом создания массива JavaScript.
Синтаксис:
var array_name = [item1, item2, ...];
Пример
var cars = ["Saab", "Volvo", "BMW"];
Пробелы и разрывы строк не важны. Объявление может охватывать несколько строк:
Пример
var cars = [
"Saab",
"Volvo",
"BMW"
];
Ввод запятой после последнего элемента (например, "BMW") не согласуется между браузерами.
IE 8 и более ранних версий не удастся.
Использование ключевого слова JavaScript New
В следующем примере также создается массив и присваиваются ему значения:
Пример
var cars = new Array("Saab", "Volvo", "BMW");
Два приведенных выше примера делают то же самое. Нет необходимости использовать новый массив ().
Для простоты, удобочитаемости и скорости выполнения используйте первый (метод литерала массива).
Доступ к элементам массива
Вы ссылаетесь на элемент массива, ссылаясь на номер индекса.
Эта инструкция обращается к значению первого элемента в автомобилях:
var
name = cars[0];
Этот оператор изменяет первый элемент в автомобилях:
cars[0] = "Opel";
Пример
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
[0] — первый элемент массива. [1] является вторым. Индексы массива начинаются с 0.
Доступ к полному массиву
С помощью JavaScript можно получить доступ к полному массиву, ссылаясь на имя массива:
Пример
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Массивы — это объекты
Массивы представляют собой особый тип объектов. Оператор typeof в JavaScript возвращает "Object" для массивов.
Но массивы JavaScript лучше всего описывают как массивы.
Массивы используют номера для доступа к своим "элементам". В этом примере Person [0] возвращает John:
Массив:
var person = ["John", "Doe", 46];
Объекты используют имена для доступа к своим "членам". В этом примере Person. имя возвращает John:
Object:
var person = {firstName:"John", lastName:"Doe", age:46};
Элементы массива могут быть объектами
JavaScript-переменные могут быть объектами. Массивы — это специальные виды объектов.
Из-за этого можно иметь переменные различных типов в одном массиве.
Объекты можно иметь в массиве. Можно иметь функции в массиве. Массивы можно иметь в массиве:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Свойства и методы массива
Реальная мощь массивов JavaScript — это встроенные свойства и методы массива:
Примеры
var x = cars.length; // The length property returns the number of elements
var y = cars.sort(); // The sort() method sorts arrays
Методы массива рассматриваются в следующих главах.
Свойство Length
Свойство length массива возвращает длину массива (количество элементов массива).
Пример
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Свойство Length всегда является одним больше, чем самый высокий индекс массива.
Циклические элементы массива
Лучший способ перебора массива — использовать цикл «for»:
Пример
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i <fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
Добавление элементов массива
Самый простой способ добавить новый элемент в массив — использовать метод Push:
Пример
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits
Новый элемент также может быть добавлен в массив с помощью свойства Length:
Пример
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
Предупреждение!
Добавление элементов с высокими индексами может создать неопределенные «дыры» в массиве:
Пример
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits
Ассоциативные массивы
Многие языки программирования поддерживают массивы с именованными индексами.
Массивы с именованными индексами называются ассоциативными массивами (или хэшами).
JavaScript не поддерживает массивы с именованными индексами.
В JavaScript массивы всегда используют пронумерованные индексы.
Пример
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John"
Предупреждение!!
При использовании именованных индексов JavaScript будет переопределять массив в стандартный объект.
После этого некоторые методы и свойства массива будут давать неверные результаты.
Пример:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined
Разница между массивами и объектами
В JavaScript массивы используют пронумерованные индексы.
В JavaScript объекты используют именованные индексы.
Массивы представляют собой особый вид объектов с пронумерованными индексами.
Когда следует использовать массивы. Когда следует использовать объекты.
- JavaScript не поддерживает ассоциативные массивы.
- Следует использовать объекты , если требуется, чтобы имена элементов были строками (текстом).
- Массивы следует использовать, если необходимо, чтобы имена элементов номера.
Избегайте нового массива ()
Нет необходимости использовать встроенный конструктор массива в JavaScript Новый массив ().
Вместо этого используйте [].
Эти две различные инструкции создают новый пустой массив с именем Points:
var points = new Array();
// Bad
var points = [];
// Good
Эти две различные инструкции создают новый массив, содержащий 6 чисел:
var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10]; // Good
Ключевое слово New усложняет только код. Он также может привести к неожиданным результатам:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)
Что делать, если удалить один из элементов?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!!
Как распознать массив
Обычно возникает вопрос: как узнать, является ли переменная массивом?
Проблема в том, что оператор JavaScript typeof возвращает "Object":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object
Оператор typeof возвращает объект, так как массив JavaScript является объектом.
Решение 1:
Для решения этой проблемы ECMAScript 5 определяет новый метод Array.-Array ():
Array.isArray(fruits); // returns true
Проблема с этим решением заключается в том, что ECMAScript 5 не поддерживается в старых браузерах.
Решение 2:
Для решения этой проблемы вы можете создать свою собственную функцию-массив ():
function isArray(x) {
return x.constructor.toString().indexOf("Array")> -1;
}
Функция выше всегда возвращает значение true, если аргумент является массивом.
Или точнее: он возвращает true, если прототип объекта содержит слово "Array".
Решение 3:
Оператор instanceof возвращает значение true, если объект создан заданным конструктором:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true
