САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

JavaScript Массивы



JavaScript массивы используются для хранения нескольких значений в одной переменной.

Пример

var cars = ["Сааб", "Вольво", "БМВ"];
Редактор кода »

Что такое массив?

Массив - это специальная переменная, которая может содержать несколько значений одновременно.

Если у вас есть список элементов (например, список названий автомобилей), автомобили в одиночных переменных могут выглядеть следующим образом:

var car1 = "Сааб";
var car2 = "Вольво";
var car3 = "БМВ";

Однако, что делать, если вы хотите, чтобы весь цикл прошел через car и нашел конкретный автомобиль? А что, если бы у вас было не 3 машины, а 300?

Решением является массив!

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


Создать массив

Использование литералов в массива - самый простой способ создания JavaScript массива.

Синтаксис:

var массив_имя = [массив1, массив2, ...];

Пример

var cars = ["Сааб", "Вольво", "БМВ"];
Редактор кода »

Пробелы и разрывы строк не важно. Объявление может занимать несколько строк:

Пример

var cars = [
    "Сааб",
    "Вольво",
    "БМВ"
];
Редактор кода »

Ставить запятую после последнего элемента (например, "БМВ",) непоследовательно в разных браузерах.

IE 8 и более ранних не удастся.

JavaScript new Array()

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

Пример

var cars = new Array("Сааб", "Вольво", "БМВ");
Редактор кода »

Два приведенных выше примера делают то же самое. Нет необходимости использовать new Array().
Для простоты, удобочитаемости и скорости выполнения используйте первый (метод литералов массива).


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

Вы ссылаетесь на элемент массива, ссылаясь на индекс числа.

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

var name = cars[0];

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

cars[0] = "Сааб";

Пример

var cars = ["Сааб", "Вольво", "БМВ"];
document.getElementById("demo").innerHTML = cars[0];
Редактор кода »

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


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

С помощью JavaScript можно получить доступ к полному массиву, обратившись к имени массива:

Пример

var cars = ["Сааб", "Вольво", "БМВ"];
document.getElementById("demo").innerHTML = cars;
Редактор кода »

Массивы - это объекты

Массивы - это особый тип объектов. Оператор typeof возвращает в JavaScript "объект" для массивов.

Но JavaScript массивы лучше всего описывать как массивы.

Использование чисел массивов для доступа к "элементам". В этом примере, person[0] возвращает "Андрей":

Массив:

var person = ["Андрей", "Щипунов", 49];
Редактор кода »

Использование объектов чисел для доступа к "члены". В этом примере, person.firstName возвращает "Андрей":

Объекты:

var person = {firstName:"Андрей", lastName:"Щипунов", лет:49};
Редактор кода »

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

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

Из-за этого в одном массиве могут быть переменные разных типов.

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

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

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

Реальной силой JavaScript массивов являются встроенные свойства массива и методы:

Примерs

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

Методы массива рассматриваются в следующих главах.


Свойство length

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

Пример

var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.length;                       // length 4 фрукта
Редактор кода »

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


Циклические элементы массива

Лучший способ, чтобы цикл был через массив, использовать цикл for:

Пример

var fruits, text, fLen, i;

fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
Редактор кода »

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

Самый простой способ добавить новый элемент в массив с помощью метода push:

Пример

var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.push("Лимон");                // добавляет новый элемент (Лимон) к фруктам
Редактор кода »

Новый элемент также можно добавить в массив с помощью свойства length:

Пример

var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[fruits.length] = "Лимон";     // добавляет новый элемент (Лимон) fruits
Редактор кода »

ВНИМАНИЕ!

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

Пример

var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[6] = "Лимон";                 // добавляет новый элемент (Лимон) fruits
Редактор кода »

Ассоциативный массив

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

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

JavaScript Щипунов нет массива с индексами.

В JavaScript, массив всегда использовать нумерованные индексы.

Пример

var person = [];
person[0] = "Андрей";
person[1] = "Щипунов";
person[2] = 49;
var x = person.length;         // person.length вернется 3
var y = person[0];             // person[0] вернется "Андрей"
Редактор кода »

ВНИМАНИЕ!
Если вы используете именованные индексы, JavaScript переопределит массив в стандартный объект.
После этого некоторые методы и свойства массива будут производить неправильный результат.

 Пример:

var person = [];
person["firstName"] = "Андрей";
person["lastName"] = "Щипунов";
person["age"] = 49;
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 = [];                  // Хорошо

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

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 = ["Банан", "Апельсин", "Яблоко", "Манго"];

typeof fruits;             // возвращаемый объект
Редактор кода »

Оператор 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, если аргумент является массивом.

Или точнее: возвращает true, если прототип объекта содержит слово "Array".

Решение 3:

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

var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];

fruits instanceof Array     // вернет true
Редактор кода »

Проверьте себя с помощью упражнений!

Упражнение:

Получить значение "Вольво" из массива cars.

var cars = ["Сааб", "Вольво", "БМВ"];
var x = ;

Начните упражнения