Тип Array (массив) — это один из часто используемых типов в JavaScript. Массивы в JavaScript (ECMAScript — стандарт языка) отличаются отличаются от массивов в большинстве других языков программирования. Массивы в JavaScript — это упорядоченные списки данных. В большинстве языков, массивы содержат однотипные данные, но в JavaScript (ECMAScript) список данных могут быть разных типов. Это означает, что можно создать массив со строкой в первой позиции, числом во второй, объектом в третьей и т.д.
- Синтаксис
- Создание массивов
- Доступ к элементам массива
- Свойства массивов
- Методы массивов
- Экземпляры массива
Синтаксис
[element_0, element_1, ..., element_N] new Array(element_0, element_1[, ...[, element_N]]) new Array(arrayLength)
Создание (объявление) массивов
Массивы в JavaScript можно создать двумя способами.
- Первый способ — использовать конструктор Array.
- Второй способ — использовать нотацию литерала массива (array literal)
Первый способ: Создание (объявление) массива с помощью конструктора Array:
var colors = new Array();
Если известно количество элементов массива, можно передать его в конструктор, и тогда автоматически будет создано свойство length (длина массива) с этим значением. Например, следующий код создает массив со значением length, равным 25:
var colors = new Array(25);
Если в конструктор Array мы передаем одно значений (числового типа), то это значение будет считаться длинной (length) создаваемого массива, а если передать несколько элементов в конструктор, то будет создан массив с этими элементами. Например, здесь создается массив с тремя строками:
var arr0 = new Array("red", "green", "blue"); var arr1 = new Array(З); // массив с тремя элементами var arr2 = new Array("green"); // массив с одним элементом, строкой "green"
Конструктор Array можно вызвать без оператора new без изменение результата.
var arr1 = Array(З); // массив с тремя элементами var arr2 = Array("green"); // массив с одним элементом, строкой "green"
Второй способ создание массива: Массивы можно создать используя нотацию литерала массива (array literal), который представляет собой список разделенных запятыми элементов в квадратных скобках, например:
var colors = ["red ", "green"]; // массив с тремя строками var names = [ ]; // пустой массив // НЕ ДЕЛАЙТЕ ТАК! Создается массив с двумя или тремя элементами var values = [1, 2, ]; // НЕ ДЕЛАЙТЕ ТАК! Создается массив с пятью или шестью элементами var options = [ , , , , , ];
- В первой строке кода создается массив с двумя элементами строчного типа.
- В второй строке кода с помощью пустых квадратных скобок создается пустой массив.
- Следующая инструкция демонстрирует проблему, которая возникает, если ввести лишнюю запятую вслед за последним значением в литерале массива. В этом случае в браузере Internet Explorer 8 и более ранних версий будет создан массив с тремя элементами со значениями 1, 2 и undefined а в остальных браузерах будет создан массив с двумя элементами — 1 и 2.
- В последней строке кода в браузерах Internet Explorer 9+, Firefox, Opera, Safari и Chrome будет создан массив с пятью элементами, а в Internet Explorer 8 и более ранних версий — с шестью.
Если между запятыми отсутствуют значение, то каждый элемент получить значение undefined. Это тоже самое, что и вызвать конструктор Array и передать в него один параметр числового типа (будет создан массив, длина которого будет равна передаваемые число, а все значение будут undefined).
Доступ к элементам массива
Для получения и задания значений массива используется индекс с отсчетом от нуля в квадратных скобках:
var colors = ["red ", "green", "blue"]; // определение массива alert( colors[0] ); // вывод первого элемента colors[2] = "yellow"; // изменение третьего элемента colors[З] = "black"; // добавление четвертого элемента
В квадратных скобках указывается индекс элемента, к которому нужно обратиться. Например, colors[0] нам вернет первый элемент массива. Точно так же мы можем задать или изменить значение. Например, colors[3] = «black» — так как у нас массив состоит из трех элементов, а индексы этих элементов- 0, 1 и 2, то у нас в массиве будет создан новый элемент под индексом 3 с значением black. А если хотим изменить значение массива, что указываем индекс элемента, который хотим изменить. Например, colors[2] = «yellow».
Свойства массивов JavaScript
- Array.length
- Array.prototype
Методы массивов JavaScript
- Array.from()
- Array.isArray()
- Array.observe()
- Array.of()
Экземпляры массива
В языке программирование JavaScript (стандарт ECMAScript) все экземпляры наследуются от Array.prototype. Если изменить объект прототипа конструктора, то изменение затронет все экземпляры Array.
Свойства:
- Array.prototype.constructor
- Array.prototype.length
Методы изменения:
- Array.prototype.copyWithin()
- Array.prototype.fill()
- Array.prototype.pop()
- Array.prototype.push()
- Array.prototype.reverse()
- Array.prototype.shift()
- Array.prototype.sort()
- Array.prototype.splice()
- Array.prototype.unshift()
Методы доступа:
- Array.prototype.concat()
- Array.prototype.includes()
- Array.prototype.join()
- Array.prototype.slice()
- Array.prototype.toSource()
- Array.prototype.toString()
- Array.prototype.toLocaleString()
- Array.prototype.indexOf()
- Array.prototype.lastIndexOf()
Методы обхода:
- Array.prototype.forEach()
- Array.prototype.entries()
- Array.prototype.every()
- Array.prototype.some()
- Array.prototype.filter()
- Array.prototype.find()
- Array.prototype.findIndex()
- Array.prototype.keys()
- Array.prototype.map()
- Array.prototype.reduce()
- Array.prototype.reduceRight()
- Array.prototype.values()
- Array.prototype[@@iterator]()
Свойство length — длина массива
В свойстве length хранится количество элементов массива и он всегда возвращает отрицательное число.
var colors = ["red ", "green", "blue"]; // массив с тремя строками var names = [ ]; // пустой массив alert( colors.length ); //3 alert( names.length ); //0
Свойство length доступно не только для чтение, но и для записи. С помощью length можно добавлять или удалять конечные элементы с массива.
var colors = ["red ", "green", "blue"]; // массив с тремя элементами colors.length = 2; // изменяем длину массива alert(colors[2]); // undefined
Мы создали массив colors с тремя элементами. После этого мы свойство length присвоили значение 2, то есть изменили длину массива, в этом случае последний элемент (под индексом 2) будет удален. Если присвоить свойству length значение, превышающее количество элементов в массиве, новые элементы получат значения undefined:
var colors = ["red ", "green", "blue"]; // массив с тремя элементами colors.length = 4; // изменяем длину массива alert(colors[3]); // undefined
В этом случае массив содержит 3 элемента, но мы свойству length присвоили значение 4. После присвоение длина массива будет 4, но так как последний, не имеет значение, его значением будет undefined.
Также с помощью свойства length мы можем добавить элемент в конец массива:
var colors = ["red ", "green", "blue"]; // массив с тремя элементами colors[colors.length] = "yellow"; // добавление нового элемента под индексом 3 colors[colors.length] = "black"; // добавление нового элемента под индексом 4
Последний элемент массива всегда находится в позиции length — 1, так что индекс следующей ячейки равен length. Каждый раз при добавлении элемента за последним элементом массива свойство length автоматически обновляется. Это означает, что инструкция colors[colors.length] задает значение в позиции 3 во второй строке примера и в позиции 4 в последней строке. При добавлении элемента в позиции за пределами массива автоматически вычисляется его новая длина, для чего к позиции прибавляется 1, например:
var colors = ["red ", "green", "blue"]; // массив с тремя элементами colors[99] = "yellow"; alert(colors.length); // 100
В этом коде мы добавляем строковое значение в позиции 99, при этом длина становится равна 100 (99 + 1). Элементы с индексами от 3 до 98 не существуют, и при доступе к ним возвращается значение undefined.
Если у нас есть массив, длина которого мы не знаем и хотим получить последний элемент массива, то можно опять использовать свойство length.
var colors = ["red ", "green", "blue"]; // массив с тремя элементами alert(colors.length - 1); // получение последнего элемента массива
Полный список уроков JavaScript можете найти на этом странице.
Комментарии