Тип Array — массивы в JavaScript

Тип 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 можете найти на этом странице.