ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Броузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

JavaScript Arrays / Массивы


Массивы 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

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

Пример

var cars = new Array("Saab", "Volvo", "BMW");
Попробуйте сами »

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


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

Вы можете получить доступ к элементу массива, ссылаясь на index number (индексное число).

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

var name = cars[0];

Пример

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
Попробуйте сами »

Примечание: Индексы массива начинаются с 0.

[0] - это первый элемент. [1] это второй элемент.


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

Это объявление меняет значение первого элемента в 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;
Попробуйте сами »

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

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

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

Массивы используют числа для доступа к своим "элементам". В этом примере person[0] возвращает John:

Массив:

var person = ["John", "Doe", 46];
Попробуйте сами »

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

Объект:

var person = {firstName:"John", lastName:"Doe", age:46};
Попробуйте сами »

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

Переменные 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;   // длина плодов 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>";
}
text += "</ul>";
Попробуйте сами »

Также можно использовать функцию 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() method:

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // добавляет новый элемент (Lemon) к fruits
Попробуйте сами »

Новый элемент также можно добавить в массив с помощью свойства 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] = "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 вернёт 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 возвращает "object":

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

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 = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // возвращает true
Попробуйте сами »

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

Упражнение:

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

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

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