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

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 Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

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 Cookies

JS AJAX

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

JS JSON




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 = ;

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