Массивы JavaScript

JavaScript 数组用于在单一变量中存储多个值。

Пример

var cars = ["Saab", "Volvo", "BMW"];

Попробуйте сами

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var array-name = [item1, item2, ...];

Пример

var cars = ["Saab", "Volvo", "BMW"];

Попробуйте сами

空格和折行并不重要。声明可横跨多行：

Пример

var cars = [
    "Saab",
    "Volvo",
    "BMW"

Попробуйте сами

Не пишите запятую после последнего элемента (например, "BMW",).

Может быть проблема с совместимостью между браузерами.

Использование ключевого слова JavaScript new

Следующий пример также создает массив и assigns к нему значения:

Пример

var cars = new Array("Saab", "Volvo", "BMW");

Попробуйте сами

Эти два примера имеют одинаковый эффект. Не нужно использовать new Array().

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

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

Мы используем ссылкуИндекс (нижний индекс)для ссылки на элемент массива.

Эта строка доступа к значению первого элемента в cars:

var name = cars[0];

Эта строка изменяет первый элемент в cars:

cars[0] = "Opel";

Пример

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Попробуйте сами

[0] является первым элементом массива. [1] является вторым. Индексация начинается с 0.

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

Эта строка изменяет значение первого элемента в cars:

cars[0] = "Opel";

Пример

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Попробуйте сами

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

Через JavaScript, вы можете получить доступ к полному массиву по имени массива:

Пример

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Попробуйте сами

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

Массивы - это особый тип объектов. В JavaScript используется typeof Операторы возвращают "object".

Однако, лучше всего описывать JavaScript-массивы как массивы.

Использование массивачислачтобы получить доступ к его "элементам". В данном примере,person[0] Возврат Bill:

Массив:

var person = ["Bill", "Gates", 62];

Попробуйте сами

Объекты используютИмячтобы получить доступ к его "членам". В данном примере,person.firstName Возврат Bill:

Объект:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Попробуйте сами

Элементы массива могут быть объектами

Переменные JavaScript могут быть объектами. Массивы - это особый тип объектов.

Благодаря этому, вы можете хранить в одном массиве переменные различных типов.

Вы можете хранить объекты в массиве. Вы можете хранить функции в массиве. Вы даже можете хранить массивы в массиве:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Свойства и методы массива

Истинная сила JavaScript-массивов скрыта в свойствах и методах массивов:

Пример

var x = cars.length;   // Свойство length возвращает количество элементов
var y = cars.sort();   // Метод sort() сортирует массив

Мы изучим методы массивов в следующей главе.

Свойство length

length Свойство возвращает длину массива (количество элементов массива).

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // Длина массива fruits составляет 4

Попробуйте сами

length Свойство всегда больше максимального индекса массива (индекса).

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

Пример

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Попробуйте сами

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

Пример

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Попробуйте сами

пройтись по элементам массива

Наиболее безопасный способ遍历 массив - это использование "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>";
}

Попробуйте сами

Вы также можете использовать Array.foreach() Функция:

Пример

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Попробуйте сами

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

Лучшим способом добавить новый элемент в массив является использование push() Методы:

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Добавление нового элемента (Lemon) в fruits

Попробуйте сами

También se puede utilizar length Добавление нового элемента в массив:

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Добавление нового элемента (Lemon) в fruits

Попробуйте сами

Внимание!

Добавление элемента с наибольшим индексом может создать в массиве неопределенные "дыры":

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Добавление нового элемента (Lemon) в fruits

Попробуйте сами

Связанные массивы

Многие элементы программирования поддерживают массивы с именованными индексами.

Массивы с именованными индексами называются связанными массивами (или хешами).

JavaScript Поддержкаименоваными индексами.

В JavaScript массивы можно использовать только счисловые индексы.

Пример

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length возвращает 3
var y = person[0];              // person[0] возвращает "Bill"

Попробуйте сами

Внимание!

Если вы используете именованные индексы, JavaScript будет переопределять массив в стандартный объект.

После этого, все методы и свойства массивов будут генерировать неправильные результаты.

Пример:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length вернет 0
var y = person[0];              // person[0] вернет undefined

Попробуйте сами

Разница между массивами и объектами

в JavaScript,Массивиспользоватьчисловые индексы.

в JavaScript,объектиспользоватьименованные индексы.

Массивы являются особого типа объектами, имеющими числовые индексы.

Когда использовать массив, когда использовать объект?

  • JavaScript не поддерживает связанные массивы
  • Если вы хотите, чтобы имена элементов былистрока (текст)в этом случае следует использоватьобъект.
  • Если вы хотите, чтобы имена элементов быличислав этом случае следует использоватьМассив.

Избегайте new Array()

Нет необходимости использовать встроенный конструктор массивов JavaScript new Array().

Используйте [] Вместо этого!

Ниже приведены два различных выражения, создающие новый пустой массив под именем points:

var points = new Array();         // Плохая практика
var points = [];                  // Лучшая практика

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

var points = new Array(40, 100, 1, 5, 25, 10); // Плохая практика
var points = [40, 100, 1, 5, 25, 10];          // Лучшая практика

Попробуйте сами

new Ключевые слова могут усложнить код. Они также могут привести к некоторым неожиданным результатам:

var points = new Array(40, 100);  // Создает массив с двумя элементами (40 и 100)

Что会发生， если удалить один из элементов?

var points = new Array(40);       // Создает массив с 40 неопределенными элементами!!!

Попробуйте сами

Как определить массив

Часто встречающийся вопрос: как узнать, является ли переменная массивом?

Проблема заключается в операторе JavaScript typeof возвращает "объект":

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

Попробуйте сами

Оператор typeof возвращает "объект", так как массив JavaScript является объектом.

Решение 1:

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

Array.isArray(fruits);     // возвращает true

Попробуйте сами

Проблема этого решения заключается в ECMAScript 5 Не поддерживает старые браузеры.

Решение 2:

Создайте свою isArray() Функция решает эту проблему:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Попробуйте сами

Если аргумент является массивом, то функция всегда возвращает true.

或者更准确的解释是: если объект прототип содержит слово "Array", то возвращает true.

Решение 3:

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // возвращает true

Попробуйте сами