JavaScript Массивы - используются для хранения нескольких значений в одной переменной.
var cars = ["Сааб", "Вольво", "БМВ"];
Попробуйте сами »
Что такое массив?
Массив - это специальная переменная, которая может одновременно содержать более одного значения.
Если у вас есть список элементов (например, список названий автомобилей), хранение автомобилей в отдельных переменных может выглядеть следующим образом:
var car1 = "Сааб";
var car2 = "Вольво";
var car3 = "БМВ";
Однако что, если вы хотите просмотреть машины и найти конкретную? А если бы у вас было не 3 машины, а 300?
Решение - массива!
Массив может содержать много значений под одним именем, и вы можете получить доступ к значениям, указав номер индекса.
Создание массива
Использование литерала массива - это самый простой способ создать массив JavaScript.
Синтаксис:
var array_name = [item1, item2, ...];
var cars = ["Сааб", "Вольво", "БМВ"];
Попробуйте сами »
Пробелы и перенос строки не важны. Объявление может занимать несколько строк:
var cars = [
"Сааб",
"Вольво",
"БМВ"
];
Попробуйте сами »
Использование ключевого слова new
В следующем примере также создается массив и присваиваются ему значения:
var cars = new Array("Сааб", "Вольво", "БМВ");
Попробуйте сами »
Два приведенных выше примера делают то же самое. Нет необходимости использовать new Array().
Для простоты, удобочитаемости и скорости выполнения используйте первый (метод литерала массива).
Доступ к элементам массива
Вы получаете доступ к элементу массива, ссылаясь на номер индекса.
Этот оператор обращается к значению первого элемента в cars:
var name = cars[0];
var cars = ["Сааб", "Вольво", "БМВ"];
document.getElementById("demo").innerHTML = cars[0];
Попробуйте сами »
Примечание: Индексы массивов начинаются с 0.
[0] это первый элемент. [1] второй элемент.
Изменение элемента массива
Оператор изменяет значение первого элемента в cars:
cars[0] = "Опель";
var cars = ["Сааб", "Вольво", "БМВ"];
cars[0] = "Опель";
document.getElementById("demo").innerHTML = cars[0];
Попробуйте сами »
Получить весь массив
С помощью JavaScript весь массив можно получить, сославшись на имя массива:
var cars = ["Сааб", "Вольво", "БМВ"];
document.getElementById("demo").innerHTML = cars;
Попробуйте сами »Массивы - объекты
Массивы - особый тип объектов. Оператор typeof в JavaScript возвращает "объект" для массивов.
Но JavaScript массивы лучше всего описывать как массивы.
Массивы используют числа для доступа к своим "элементам". В этом примере person[0] возвращает Щипунов:
Объекты используют имена для доступа к своим "участникам".
В этом примере person.firstName возвращает Щипунов:
Элементы массива могут быть объектами
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 = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.length; // длина плодов 4
Попробуйте сами »
Свойство length всегда больше, чем один максимальный индекс массива.
Доступ к первому элементу массива
fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var first = fruits[0];
Попробуйте сами »
Доступ к последнему элементу массива
fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var last = fruits[fruits.length - 1];
Попробуйте сами »
Зацикливание элементов массива
Самый безопасный способ перебрать массив - использовать for цикл:
var fruits, text, fLen, i;
fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Попробуйте сами »
Вы также можете использовать Array.forEach() функцию:
var fruits, text;
fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Попробуйте сами »
Добавление элементов массива
Самый простой способ добавить новый элемент в массив - использовать push() метод:
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.push("Лимон"); // добавляет к фруктам новый элемент(Лимон)
Попробуйте сами »
Новый элемент также можно добавить в массив с помощью length свойства:
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[fruits.length] = "Лимон"; // добавляет новый элемент (Лимон) к фруктам
Попробуйте сами »
ВНИМАНИЕ!
Добавление элементов с высокими индексами может создать неопределенные "дыры" в массиве:
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[6] = "Лимон"; // добавляет новый элемент (Лимон) к фруктам
Попробуйте сами »
Ассоциативные массивы
Многие языки программирования поддерживают массивы с именованными индексами.
Массивы с именованными индексами называются ассоциативными массивами (или хэшами).
JavaScript не поддерживает массивы с именованными индексами.
В JavaScript массивы всегда используют нумерованные индексы.
var person = [];
person[0] = "Щипунов";
person[1] = "Андрей";
person[2] = 46;
var x = person.length;
// person.length вернет 3
var y = person[0];
// person[0] вернет "Щипунов"
Попробуйте сами »
ВНИМАНИЕ!
Если вы используете именованные индексы, JavaScript переопределит массив в стандартный объект.
После этого некоторые методы и свойства массива будут давать неверные результаты.
Пример:
var person = [];
person["firstName"] = "Щипунов";
person["lastName"] = "Андрей";
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 = ["Банан", "Апельсин", "Яблоко", "Манго"];
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 возвращает истину , если объект создается с помощью данного конструктора:
var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits instanceof Array; // возвращает true
Попробуйте сами »