Array

Array є глобальним об'єктом, що використовується для створення масивів; які є високорівневими, спископодібними об'єктами.

Створення масиву

var fruits = ["Яблуко", "Банан"];

console.log(fruits.length);
// 2

Доступ до елементів масиву (за індексом)

var first = fruits[0];
// Яблуко

var last = fruits[fruits.length - 1];
// Банан

Обхід елементів масиву

fruits.forEach(function (item, index, array) {
  console.log(item, index);
});
// Яблуко 0
// Банан 1

Додавання в кінець масиву

var newLength = fruits.push("Апельсин");
// ["Яблуко", "Банан", "Апельсин"]

Видалення елемента з кінця масиву

var last = fruits.pop(); // видалити Апельсин (з кінця)
// ["Яблуко", "Банан"];

Видалення елемента з початку масиву

var first = fruits.shift(); // видалити Яблуко з початку
// ["Банан"];

Додавання елемента до початку масиву

var newLength = fruits.unshift("Полуниця") // додади до початку
// ["Полуниця", "Банан"];

Пошук індексу елемента в масиві

fruits.push("Манго");
// ["Полуниця", "Банан", "Манго"]

var pos = fruits.indexOf("Банан");
// 1

Видалення елемента масиву за його індексом (позицією)

var removedItem = fruits.splice(pos, 1); // ось, як видаляється елемент
// ["Полуниця", "Манго"]

Видалення елементів починаючи з певного індексу

var vegetables = ['Капуста', 'Ріпа', 'Редька', 'Морква'];
console.log(vegetables);
// ["Капуста", "Ріпа", "Редька", "Морква"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n);
// ось так видаляються елементи, n визначає кількість елементів на видалення,
// від цієї позиції (pos) в напрямку кінця масиву.

console.log(vegetables);
// ["Капуста", "Морква"] (початковий масив змінено)

console.log(removedItems);
// ["Ріпа", "Редька"]

Копіювання масиву

var shallowCopy = fruits.slice(); // ось так робиться копія
// ["Полуниця", "Манго"]

Синтаксис

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

Параметри

elementN

Масив у JavaScript ініціалізується за допомогою наперед заданих елементів, за виключенням тієї ситуації коли в конструктор Array передається тільки один аргумент і він є числом (див. параметр arrayLength нижче). Зверніть увагу на те, що це спрацьовує лише у тому випадку, якщо масив створено за допомогою  конструктора Array, а не через літерали масивів створених з допомогою синтаксу квадратних дужок.

arrayLength

Якщо єдиним аргументом (вхідним параметром) конструктора Array є ціле число від 0 до 2³²-1 (включно), буде повернено новий JavaScript-масив з властивістю length рівною цьому числу.  Зверніть увагу, що цей масив матиме пусті слоти, а не слоти зі значеннями undefined. Якщо аргументом буде будь-яке інше число, виникне виняток RangeError.

Опис

Масиви - це спископодібні об'єкти, чий прототип має методи для операцій обходу та зміни масиву. Ані довжина масиву, ані типи його елементів не є незмінними. Довжина масиву може змінитись будь-коли, як і позиція даних в масиві; тому їх використання залежить від рішення програміста. Взагалі, це зручні характеристики; але якщо ці особливості не є бажаними для ваших конкретних цілей, ви можете розглянути можливість використання типізованих масивів.

Масиви не можуть використовувати рядки у якості індексів елементів (як асоціативні масиви), а тільки цілі числа(індекси). Присвоєння або звернення через не цілочисельні значення, з використанням квадратних дужок (або через крапку), не присвоїть або не отримає елемент з самого списку масиву, але присвоїть чи отримає доступ до змінної, пов'язаної з колекцією властивостей об'єкта(властивості) цього масиву. Об'єктні властивості масиву та список елементів масиву є відокремленими, і операції обходу та зміни цього масиву не застосовуються до цих іменованих властивостей.

Доступ до елементів масиву

Масиви в JavaScript індексуються з нуля: перший елемент масиву має індекс, який дорівнює 0, а індекс останнього елемента відповідає значенню властивості масиву length мінус 1. Використання неправильного індексу повертає undefined.

var arr = ['це перший елемент', 'це другий елемент'];
console.log(arr[0]);              // виводить 'це перший елемент'
console.log(arr[1]);              // виводить 'це другий елемент'
console.log(arr[arr.length - 1]); // виводить 'це другий елемент'

Елементи масиву є властивостями об'єкта, так само, як toString є властивістю, але спроби звернутися до елемента масиву наступним чином згенерує синтаксичну помилку через неправильне ім'я властивості:

console.log(arr.0); // є синтаксична помилка

В масивах JavaScript немає нічого особливого, що призводить до цього. До властивостей JavaScript, які починаються з цифри, не можна звертатися через крапку; необхідно звертатися через квадратні дужки. Наприклад, якщо ви маєте об'єкт з властивістю під назвою '3d', до неї можна звертатися тільки через квадратні дужки. Приклад:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // є синтаксична помилка
console.log(years[0]);  // працює вірно

renderer.3d.setTexture(model, 'character.png');     // є синтаксична помилка
renderer['3d'].setTexture(model, 'character.png');  // працює вірно

Зверніть увагу, що '3d' має писатися в лапках. Індекси масивів JavaScript також можна писати в лапках (напр., years['2'] замість years[2]), хоча це не обов'язково. Індекс 2 у years[2] примусово перетворюється на рядок рушієм JavaScript через неявне перетворення toString. Саме через це '2' та '02' займали б два різні слоти в об'єкті years і наступний приклад дорівнював би true:

console.log(years['2'] != years['02']);

Схожим чином до властивостей об'єкта, які є зарезервованими словами (!) можна звертатися тільки через рядкові значення у квадратних дужках (але до них можна звертатися через крапку у firefox 40.0a2 наприклад):

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['array']);

Зв'язок між length та числовими властивостями

У масивах JavaScript властивість length та числові властивості взаємопов'язані. Декілька з вбудованих методів масивів (напр., join, slice, indexOf, і т.д.) враховують значення властивості length під час виконання. Інші методи (напр., push, splice, і т.д.) призводять до зміни властивості масиву length.

var fruits = [];
fruits.push('банан', 'яблуко', 'персик');

console.log(fruits.length); // 3

Присвоєння властивості до масиву JavaScript змінить властивість масиву length відповідним чином, якщо властивість є коректним індексом масиву, і цей індекс знаходиться поза поточними межами масиву:

fruits[5] = 'манго';
console.log(fruits[5]); // 'манго'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

Збільшення значення length.

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

Однак, зменшення значення властивості length видаляє елементи.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Це пояснюється далі на сторінці Array.length.

Створення масиву з використанням результату пошуку збігів

Пошук збігів між регулярним виразом та рядком може створити масив JavaScript. Цей масив має властивості та елементи, які надають інформацію про збіг. Такий масив повертається методами RegExp.exec, String.match та String.replace. Щоб краще пояснити ці властивості та елементи, подивіться на наступний приклад, а тоді зверніться до таблиці нижче:

// Пошук послідовності з однієї d, далі одна або більше b, далі одна d
// Запам'ятати всі b і d, яка йде за ними
// Ігнорувати регістр

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

Властивості та елементи, які повертаються в результаті даного пошуку збігів:

Властивості

Array.length

Властивість length конструктора Array, дорівнює 1.

Array.prototype

Дозволяє додавати властивості до усіх масивів.

Методи

Array.from()

Створює новий екземпляр Array з подібного до масиву або ітерабельного об'єкта.

Array.isArray()

Повертає true, якщо змінна є масивом, якщо ні, то повертає false.

Array.of()

Створює новий екземпляр Array з кількістю аргументів, заданих через змінну, незважаючи на кількість або тип аргументів.

Екземпляри Array

Всі екземпляри Array наслідуються від Array.prototype. Прототип конструктора Array може бути змінений, що вплине на всі екземпляри Array.

Властивості

Методи

Методи модифікації

Методи доступу

Методи перебору

Загальні методи масивів

Іноді ви б хотіли застосувати методи масивів на рядках або інших подібних до масиву об'єктах (таких як arguments у функції). В такому випадку, ви розглядаєте рядок як масив символів (чи не об'єкт масиву як масив). Наприклад, для того, щоб перевірити, що кожний символ у змінній str є літерою, ви б написали:

function isLetter(character) {
  return character >= 'a' && character <= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("Рядок '" + str + "' містить тільки літери!");
}

Такий запис є доволі марнотратним, і у JavaScript 1.6 було запроваджено загальне скорочення:

if (Array.every(str, isLetter)) {
  console.log("Рядок '" + str + "' містить тільки літери!");
}

Загальні методи також доступні у рядках.

Вони не є частиною стандартів ECMAScript і не підтримуються не Gecko оглядачами. У якості стандартної альтернативи, ви можете перетворити ваш об'єкт на справжній масив з допомогою методу Array.from(); хоча цей метод може не підтримуватися у старих оглядачах:

if (Array.from(str).every(isLetter)) { 
  console.log("Рядок '" + str + "' містить тільки літери!"); 
}

Приклади

Створення масиву

Наступний приклад створює масив msgArray довжиною 0, потім додає значення елементам msgArray[0] та msgArray[99], змінюючи довжину масиву на 100.

var msgArray = [];
msgArray[0] = 'Привіт';
msgArray[99] = 'світ';

if (msgArray.length === 100) {
  console.log('Довжина масиву 100.');
}

Створення двовимірного масиву

Наступний код створює шахівницю у вигляді двовимірного масиву рядків. Перший хід робиться копіюванням 'п' з (6,4) до (4,4). Стара позиція (6,4) робиться порожньою.

var board = [ 
  ['Т','Н','С','Ф','К','С','Н','Т'],
  ['П','П','П','П','П','П','П','П'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['п','п','п','п','п','п','п','П'],
  ['т','н','с','ф','к','с','н','т'] ];

console.log(board.join('\n') + '\n\n');

// Перемістити королівського пішака вперед на 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

Ось результат:

Т,Н,С,Ф,К,С,Н,Т
П,П,П,П,П,П,П,П
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
п,п,п,п,п,п,п,п
т,н,с,ф,к,с,н,т

Т,Н,С,Ф,К,С,Н,Т
П,П,П,П,П,П,П,П
 , , , , , , , 
 , , , , , , , 
 , , , ,п, , , 
 , , , , , , , 
п,п,п,п, ,п,п,п
т,н,с,ф,к,с,н,т

Специфікації

Сумісність з веб-оглядачами

Див. також

• JavaScript Guide: “Indexing object properties”
• JavaScript Guide: “Predefined Core Objects: Array Object”
• Array comprehensions
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Типізовані масиви