Array (масив)

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

Опис

У мові JavaScript масиви не є примітивами, а натомість є об'єктами класу Array, із наступними ключовими характеристиками:

• Масиви JavaScript можуть змінювати розмір і можуть містить суміш різних типів даних. (Коли ці характеристики є небажаними, слід натомість використовувати типізовані масиви.)
• Масиви JavaScript не є асоціативними, а отже – елементи масиву не можуть бути отримані з використанням рядків замість індексів, індекси масиву – лише цілі числа.
• Масиви JavaScript нумеруються від нуля (англ.): перший елемент масиву знаходиться за індексом 0, другий – за індексом 1, і так далі; останній же елемент знаходиться за індексом, рівним значенню властивості масиву length мінус 1.
• Операції копіювання масиву створюють поверхневі копії. (Усі стандартні вбудовані операції копіювання будь-яких об'єктів JavaScript створюють поверхневі, а не глибинні копії).

Індекси масиву

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

Елементи масиву є властивостями об'єкта так само, як toString (для точності, втім, слід нагадати, що toString() є методом). Попри це, спроба отримати елемент масиву у наступний спосіб призведе до синтаксичної помилки, адже таке ім'я властивості є недійсним:

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

Синтаксис JavaScript вимагає, аби до властивостей, що починаються з цифри, зверталися за допомогою запису квадратних дужок, а не запису крапки. Крім цього, можна брати в лапки індекси масивів (наприклад, years['2'] замість years[2]), хоч зазвичай для цього немає потреби.

2 в записі years[2] зводиться до рядка рушієм JavaScript шляхом неявного перетворення toString. Як наслідок, '2' і '02' вказують на дві різні комірки в об'єкті years, і результатом роботи наступного прикладу може бути true:

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

Лише years['2'] є справжнім індексом масиву. `years['02'] – звичайна рядкова властивість, котру не враховуватиме ітерація масиву.

Взаємини між length і числовими властивостями

Існує взаємозв'язок між властивістю масиву JavaScript length та його числовими властивостями.

Декілька вбудованих методів масиву (наприклад, join(), slice(), indexOf() тощо) враховують значення властивості масиву length, коли спрацьовують.

Інші методи (наприклад, push(), splice() тощо) на додачу оновлюють властивість масиву length.

const 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(fruits); // ['банан', 'яблуко', 'персик', порожнеча x 2, 'манго', порожнеча x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
console.log(fruits[8]); // undefined

Зменшення властивості length, утім, видаляє елементи.

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

Така поведінка докладніше пояснена на сторінці Array/length.

Методи масиву й порожні комірки

Порожні комірки розріджених масивів поводяться в методах масиву по-різному. Загалом, старші методи пропускають порожні комірки, а новіші – обробляють їх як undefined.

Серед методів, що ітерують багато елементів, перелічені нижче – виконують перед звертанням до індексу перевірку in і не зводять порожні комірки до undefined:

• concat()
• copyWithin()
• every()
• filter()
• flat()
• flatMap()
• forEach()
• indexOf()
• lastIndexOf()
• map()
• reduce()
• reduceRight()
• reverse()
• slice()
• some()
• sort()
• splice()

Щодо того, як саме вони обробляють порожні комірки, дивіться на їх власних сторінках.

Ці методи обробляють порожні комірки так, ніби в них undefined:

• entries()
• fill()
• find()
• findIndex()
• findLast()
• findLastIndex()
• group()
• groupToMap()
• includes()
• join()
• keys()
• toLocaleString()
• values()

Копіювальні та змінювальні методи

Частина методів не змінює наявний масив, на котрому викликали метод, а повертає новий масив. Це робиться спершу створенням нового масиву, а потім – заповненням його елементами. Копіювання завжди відбувається поверхнево: метод ніколи не копіює нічого поза початково створеним масивом. Елементи вихідного масиву (чи масивів) копіюються в новий масив так:

• Об'єкти: посилання на об'єкт копіюється в новий масив. І вихідний, і новий масиви посилаються на один об'єкт. Тобто якщо змінити цей об'єкт, то зміни будуть помітні як у новому, так і в вихідному масиві.
• Примітивні типи, як то рядки, числа й булеві значення (не об'єкти String, Number і Boolean): їхні значення копіюються в новий масив.

Решта методів змінює масив, на котрому викликано метод, у випадку чого їхнє повернене значення відрізняється залежно від методу: іноді це посилання на той самий масив, іноді – довжина нового масиву.

Наступні методи створюють нові масиви шляхом звертання до this.constructor[Symbol.species] для визначення конструктора, який буде використаний:

• concat()
• filter()
• flat()
• flatMap()
• map()
• slice()
• splice() (для створення поверненого масиву прибраних елементів)

Наступні методи завжди створюють нові масиви з базовим конструктором Array:

• toReversed()
• toSorted()
• toSpliced()
• with()

group() і groupToMap() не використовують @@species для створення нових масивів для кожного елементу групи, а завжди використовують простий конструктор Array. Концептуально, вони не є методами копіювання.

Наступна таблиця перераховує методи, які змінюють вихідний масив, і відповідні їм незмінювальні альтернативи:

Легкий спосіб замінити змінювальний метод на незмінювальний альтернативний – використати синтаксис розгортання або slice(), щоб спершу створити копію:

arr.copyWithin(0, 1, 2); // змінює arr
const arr2 = arr.slice().copyWithin(0, 1, 2); // не змінює arr
const arr3 = [...arr].copyWithin(0, 1, 2); // не змінює arr

Ітеративні методи

Чимало методів масиву приймає як аргумент функцію зворотного виклику. Вона викликається послідовно й щонайбільше раз для кожного елемента масиву, і її повернене значення використовується для визначення поверненого методом значення. Вони поділяють одну сигнатуру:

method(callbackFn, thisArg)

Де callbackFn приймає три аргументи:

element

Поточний елемент, що обробляється масивом.

index

Індекс поточного елемента, що обробляється масивом.

array

Масив, на якому було викликано метод.

Те, що має повернути callbackFn, залежить від викликаного метода масиву.

Аргумент thisArg (чиє усталене значення – undefined) використовуватиметься як значення this при виклику callbackFn. Значення this, отримане функцією callbackFn, визначається згідно зі звичними правилами: якщо callbackFn є несуворою функцією, то примітивні значення this загортаються в об'єкти, а undefined і null – замінюються на globalThis. Аргумент thisArg є беззмістовним для будь-якої callbackFn, визначеною у вигляді стрілкової функції, адже такі функції не мають власного зв'язування this.

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

Наступні методи - ітеративні:

• every()
• filter()
• find()
• findIndex()
• findLast()
• findLastIndex()
• flatMap()
• forEach()
• group()
• groupToMap()
• map()
• some()

А саме – every(), find(), findIndex(), findLast(), findLastIndex() і some() не завжди закликають callbackFn на кожному елементі: вони зупиняють ітерування, щойно повернене значення визначено.

Є два інші методи, що приймають функцію зворотного виклику й запускають її щонайбільше раз для кожного елементу в масиві, але мають дещо інакші сигнатури, ніж типові ітеративні методи (до прикладу, вони не приймають thisArg):

• reduce()
• reduceRight()

Метод sort() також приймає функцію зворотного виклику, але не є ітеративним методом. Він змінює масив на місці, не приймає thisArg і може закликати функцію зворотного виклику кілька разів на кожному індексі.

Узагальнені методи масиву

Методи масиву завжди є узагальненими: вони не звертаються до жодних прихованих даних об'єкта масиву, а звертаються лише до елементів масиву – через властивість length та елементи з індексами. Це означає, що ці методи також можуть бути викликані на масивоподібних об'єктах.

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

Нормалізація властивості length

Властивість length перетворюється на ціле число, а потім обрізається до діапазону між 0 і 2⁵³ - 1. NaN стає 0, тож навіть тоді, коли length немає або в ній undefined, це працює так, ніби довжина дорівнює 0.

Мова JavaScript уникає задання length зі значенням небезпечного цілого числа. Всі вбудовані методи викидають TypeError, коли length задається з числом, більшим за 2⁵³ - 1. Однак оскільки властивість масивів length завжди викидає помилку, коли отримує значення, більше за 2³², то зазвичай поріг небезпечних цілих чисел не досягається, якщо метод не викликається на об'єкті, що не є масивом.

Array.prototype.flat.call({}); // []

Частина методів масиву змінює властивість length об'єкта масиву. Вони завжди присвоюють значення після нормалізації, тому length завжди стає цілим числом.

const a = { length: 0.7 };
Array.prototype.push.call(a);
console.log(a.length); // 0

Масивоподібні об'єкти

Термін масивоподібний об'єкт позначає будь-який об'єкт, що не викидає помилки при процесі перетворення length, описаному вище. На практиці очікується, що такий об'єкт має властивість length, а також індексовані елементи в діапазоні від 0 до length - 1. (Якщо він має не всі індекси, то це на практиці буде рівносильно розрідженому масивові.)

Масивоподібними є чимало об'єктів DOM – наприклад, NodeList і HTMLCollection. Об'єкт arguments так само є масивоподібним. На них можна викликати методи масиву, навіть якщо вони самі цих методів не мають.

function f() {
  console.log(Array.prototype.join.call(arguments, "+"));
}
f("a", "b"); // 'a+b'

Конструктор

Array()

Створює новий об'єкт типу Array.

Статичні властивості

Array[@@species] ("вид")

Повертає конструктор Array.

Статичні методи

Array.from() ("від")

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

Array.fromAsync()

Створює новий примірник Array на основі асинхронного ітератора, ітерованого або масивоподібного об'єкта.

Array.isArray() ("чи є масивом")

Повертає true, якщо аргумент є масивом, інакше – false.

Array.of()

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

Властивості примірника

Ці властивості означені на Array.prototype і є спільними для всіх примірників Array.

Array.prototype.constructor

Функція-конструктор, котра створила об'єкт-примірник. Для примірників Array початковим значенням цієї властивості є конструктор Array.

Array.prototype[@@unscopables] ("недоступні для огляду")

Містить імена властивостей, котрі не були включені до стандарту ECMAScript до версії ES2015 та є ігнорованими інструкцією прив'язування with.

Ці властивості є власними властивостями кожного примірника Array.

length

Відображає кількість елементів у масиві.

Методи примірника

Array.prototype.at() ("за")

Повертає елемент масиву за переданим індексом. Приймає від'ємні цілі числа, для яких відлік починається з кінця масиву (-1 відповідає останньому елементові).

Array.prototype.concat() ("зв'язати")

Повертає новий масив, котрий є об'єднанням поточного масиву з масивами та окремими елементами, переданими як аргументи.

Array.prototype.copyWithin() ("копіювати в межах")

Копіює послідовність елементів масиву в інше місце в межах того самого масиву.

Array.prototype.entries() ("записи")

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

Array.prototype.every() ("кожен")

Повертає true, якщо кожен елемент поточного масиву задовольняє перевіркову функцію.

Array.prototype.fill() ("заповнити")

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

Array.prototype.filter() ("фільтрувати")

Повертає новий масив, котрий містить усі елементи поточного масиву, для котрих передана функція фільтрування повертає true.

Array.prototype.find() ("знайти")

Повертає значення першого елемента масиву, що задовольняє передану перевіркову функцію, або undefined – якщо відповідного елемента не знайдено.

Array.prototype.findIndex() ("знайти індекс")

Повертає індекс першого елемента масиву, що задовольняє передану перевіркову функцію, або -1 – якщо відповідного елемента не знайдено.

Array.prototype.findLast() ("знайти останнього")

Повертає значення останнього елемента масиву, що задовольняє передану перевіркову функцію, або undefined – якщо відповідного елемента не знайдено.

Array.prototype.findLastIndex() ("знайти останній індекс")

Повертає індекс останнього елемента масиву, що задовольняє передану перевіркову функцію, або -1 – якщо відповідного елемента не знайдено.

Array.prototype.flat() ("сплощити")

Повертає новий масив з усіма елементами підмасивів, склеєними докупи рекурсивно, до вказаної глибини.

Array.prototype.flatMap() ("сплощити та відобразити")

Повертає новий масив, утворений застосуванням переданої функції зворотного виклику до кожного елемента поточного масиву, а тоді – сплощенням результату на один рівень.

Array.prototype.forEach() ("для кожного")

Викликає функцію для кожного елемента поточного масиву.

Array.prototype.group() ("групувати")

Групує елементи масиву згідно з рядками, поверненими перевірковою функцією.

Array.prototype.groupToMap() ("групувати в Map")

Групує елементи масиву в Map згідно зі значеннями, поверненими перевірковою функцією.

Array.prototype.includes() ("включає")

Визначає, чи містить поточний масив певне значення, повертаючи true чи false відповідно.

Array.prototype.indexOf() ("індекс")

Повертає перший (якнайменший) індекс, за яким переданий елемент може бути знайдений у поточному масиві.

Array.prototype.join() ("об'єднати")

Об'єднує усі елементи масиву в рядок.

Array.prototype.keys() ("ключі")

Повертає новий ітератор масиву, що містить кожен індекс поточного масиву.

Array.prototype.lastIndexOf() ("останній індекс")

Повертає останній (якнайбільший) індекс, за яким переданий елемент може бути знайдений у поточному масиві, або -1, якщо такого індексу не знайдено.

Array.prototype.map() ("відобразити")

Повертає новий масив, що містить результати виклику функції на кожному елементі поточного масиву.

Array.prototype.pop() ("вистрелити")

Прибирає останній елемент з масиву і повертає його.

Array.prototype.push() ("запхати")

Додає один чи більше елементів у кінець масиву і повертає нове значення length масиву.

Array.prototype.reduce() ("звести")

Виконує надану користувачем функцію-редуктор над кожним елементом масиву (зліва направо), аби звести його до єдиного значення.

Array.prototype.reduceRight() ("звести справа")

Виконує надану користувачем функцію-редуктор над кожним елементом масиву (справа наліво), аби звести його до єдиного значення.

Array.prototype.reverse() ("перевернути")

Розвертає порядок елементів масиву на місці. (Перший стає останнім, останній – першим.)

Array.prototype.shift() ("зсунути")

Прибирає перший елемент з масиву і повертає його.

Array.prototype.slice() ("вирізати скибку, зріз")

Вирізає секцію з поточного масиву і повертає її як новий масив.

Array.prototype.some() ("якийсь")

Повертає true, якщо принаймні один елемент поточного масиву задовольняє передану перевіркову функцію.

Array.prototype.sort() ("сортувати")

Сортує елементи масиву на місці й повертає поточний масив.

Array.prototype.splice() ("зростити")

Додає чи прибирає елементи масиву.

Array.prototype.toLocaleString() ("до рядка за регіональними стандартами")

Повертає локалізований рядок, що представляє поточний масив та його елементи. Заміщає метод Object.prototype.toLocaleString().

Array.prototype.toReversed() ("до оберненого")

Повертає новий масив з елементами у зворотному порядку, не змінюючи вихідний масив.

Array.prototype.toSorted() ("до сортованого")

Повертає новий масив з елементами, відсортованими в порядку зростання, не змінюючи вихідний масив.

Array.prototype.toSpliced() ("до зрізаного")

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

Array.prototype.toString() ("до рядка")

Повертає рядок, що представляє поточний масив та його елементи. Заміщає метод Object.prototype.toString().

Array.prototype.unshift() ("відсунути")

Додає один чи більше елементів у початок масиву й повертає значення length масиву.

Array.prototype.values() ("значення")

Повертає новий об'єкт ітератора масиву, що містить значення за кожним індексом цього масиву.

Array.prototype.with() ("зі значенням")

Повертає новий масив, у якому елемент за певним індексом замінений заданим значенням, не змінюючи вихідний масив.

Array.prototype[@@iterator]() ("ітератор")

Усталено є псевдонімом функції values().

Приклади

Цей розділ пропонує кілька прикладів звичних операцій над масивами у JavaScript.

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

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

Цей приклад показує три способи створення нового масиву: спершу за допомогою запису літерала масиву, далі за допомогою конструктора Array(), і зрештою – за допомогою String.prototype.split() – для створення масиву з рядка.

// Масив 'fruits' створений за допомогою запису літерала масиву
const fruits = ["Яблуко", "Банан"];
console.log(fruits.length);
// 2

// Масив 'fruits2' створений за допомогою конструктора Array()
const fruits2 = new Array("Яблуко", "Банан");
console.log(fruits2.length);
// 2

// Масив 'fruits3' створений за допомогою String.prototype.split().
const fruits3 = "Яблуко, Банан".split(", ");
console.log(fruits3.length);
// 2

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

Цей приклад використовує метод join() для створення рядка з масиву fruits.

const fruits = ["Яблуко", "Банан"];
const fruitsString = fruits.join(", ");
console.log(fruitsString);
// "Яблуко, Банан"

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

Цей приклад показує, як отримати елемент масиву fruits на основі числа, що є індексом його позиції в масиві.

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

// Індекс першого елемента масиву – завжди 0.
fruits[0]; // Яблуко

// Індекс другого елемента масиву – завжди 1.
fruits[1]; // Банан

// Індекс останнього елемента масиву – завжди на одиницю
// менший за довжину масиву.
fruits[fruits.length - 1]; // Банан

// Використання індексу, більшого за довжину масиву,
// повертає 'undefined'.
fruits[99]; // undefined

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

Цей приклад використовує метод indexOf() для пошуку позиції (індексу) рядка "Банан" у масиві fruits.

const fruits = ["Яблуко", "Банан"];
console.log(fruits.indexOf("Банан"));
// 1

Перевірка присутності в масиві певного елемента

Цей приклад показує два способи перевірки того, чи містить масив fruits значення "Банан" і значення "Вишня": спершу за допомогою includes(), а тоді – методом indexOf(), із перевіркою, чи не рівний повернений індекс -1.

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

fruits.includes("Банан"); // true
fruits.includes("Вишня"); // false

// Якщо indexOf() не повертає -1, то масив містить переданий елемент.
fruits.indexOf("Банан") !== -1; // true
fruits.indexOf("Вишня") !== -1; // false

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

Цей приклад використовує метод push(), щоб докласти у масив fruits новий рядок.

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

Усунення з масиву останнього елемента

Цей приклад використовує для усунення з масиву fruits останнього елемента метод pop().

const fruits = ["Яблуко", "Банан", "Апельсин"];
const removedItem = fruits.pop();
console.log(fruits);
// ["Яблуко", "Банан"]
console.log(removedItem);
// Апельсин

Примітка: pop() може застосовуватись лише для усунення з масиву останнього елемента. Як прибрати з кінця масиву кілька елементів – дивіться наступний приклад.

Усунення з кінця масиву кількох елементів

Цей приклад використовує для усунення з масиву fruits останніх 3 елементів метод splice().

const fruits = ["Яблуко", "Банан", "Полуниця", "Манго", "Вишня"];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Яблуко", "Банан"]
console.log(removedItems);
// ["Полуниця", "Манго", "Вишня"]

Урізання масиву до його перших N елементів

Цей приклад використовує для урізання масиву fruits до його перших 2 елементів метод splice().

const fruits = ["Яблуко", "Банан", "Полуниця", "Манго", "Вишня"];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Яблуко", "Банан"]
console.log(removedItems);
// ["Полуниця", "Манго", "Вишня"]

Усунення з масиву першого елемента

Цей приклад використовує для усунення з масиву fruits першого елемента метод shift().

const fruits = ["Яблуко", "Банан"];
const removedItem = fruits.shift();
console.log(fruits);
// ["Банан"]
console.log(removedItem);
// Яблуко

Примітка: shift() може використовуватись лише для усунення з масиву першого елемента. Як прибрати з початку масиву кілька елементів – дивіться наступний приклад.

Усунення з початку масиву кількох елементів

Цей приклад використовує для усунення з масиву fruits перших 3 елементів метод splice().

const fruits = ["Яблуко", "Полуниця", "Вишня", "Банан", "Манго"];
const start = 0;
const deleteCount = 3;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Банан", "Манго"]
console.log(removedItems);
// ["Яблуко", "Полуниця", "Вишня"]

Додання в масив нового першого елемента

Цей приклад використовує метод unshift(), щоб додати (за індексом 0) новий елемент у масив fruits – роблячи його новим першим елементом цього масиву.

const fruits = ["Банан", "Манго"];
const newLength = fruits.unshift("Полуниця");
console.log(fruits);
// ["Полуниця", "Банан", "Манго"]
console.log(newLength);
// 3

Усунення одного елемента за індексом

Цей приклад використовує для усунення із масиву fruits рядка "Банан" метод splice() – шляхом вказання індексу-позиції значення "Банан".

const fruits = ["Полуниця", "Банан", "Манго"];
const start = fruits.indexOf("Банан");
const deleteCount = 1;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Полуниця", "Манго"]
console.log(removedItems);
// ["Банан"]

Усунення кількох елементів за індексом

Цей приклад використовує для усунення з масиву fruits рядків "Банан" і "Полуниця" метод splice() – шляхом вказання індексу-позиції значення "Банан", а також кількості елементів до видалення.

const fruits = ["Яблуко", "Банан", "Полуниця", "Манго"];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Яблуко", "Манго"]
console.log(removedItems);
// ["Банан", "Полуниця"]

Заміна кількох елементів масиву

Цей приклад використовує для заміни новими елементами останніх 2 елементів масиву fruits метод splice().

const fruits = ["Яблуко", "Банан", "Полуниця"];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount, "Манго", "Вишня");
console.log(fruits);
// ["Яблуко", "Манго", "Вишня"]
console.log(removedItems);
// ["Банан", "Полуниця"]

Ітерація масиву

Цей приклад використовує для ітерації масиву fruits цикл for...of, виводячи кожний елемент у консоль.

const fruits = ["Яблуко", "Манго", "Вишня"];
for (const fruit of fruits) {
  console.log(fruit);
}
// Яблуко
// Манго
// Вишня

Утім, for...of – лише один з багатьох способів ітерації будь-якого масиву; більше способів можна знайти у розділі Цикли й ітерація, а також у документації методів every(), filter(), flatMap(), map(), reduce() і reduceRight() – ну і наступному прикладі, що використовує метод forEach().

Виклик функції над кожним елементом масиву

Цей приклад використовує метод forEach(), щоб викликати функцію над кожним елементом масиву fruits; функція призводить до виведення у консоль кожного елемента поруч зі своїм індексом.

const fruits = ["Яблуко", "Манго", "Вишня"];
fruits.forEach((item, index, array) => {
  console.log(item, index);
});
// Яблуко 0
// Манго 1
// Вишня 2

Злиття кількох масивів докупи

Цей приклад використовує для злиття масиву fruits із масивом moreFruits метод concat(), щоб утворити новий масив combinedFruits. Зверніть увагу, що fruits і moreFruits залишаються незмінними.

const fruits = ["Яблуко", "Банан", "Полуниця"];
const moreFruits = ["Манго", "Вишня"];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits);
// ["Яблуко", "Банан", "Полуниця", "Манго", "Вишня"]

// Масив 'fruits' залишається незмінним.
console.log(fruits);
// ["Яблуко", "Банан", "Полуниця"]

// Масив 'moreFruits' також залишається без змін.
console.log(moreFruits);
// ["Манго", "Вишня"]

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

Цей приклад показує три способи створення нового масиву на основі наявного масиву fruits: спершу за допомогою синтаксису розгортання, далі за допомогою метода from(), а тоді – за допомогою метода slice().

const fruits = ["Полуниця", "Манго"];

// Створення копії за допомогою синтаксису розгортання.
const fruitsCopy = [...fruits];
// ["Полуниця", "Манго"]

// Створення копії за допомогою метода from().
const fruitsCopy2 = Array.from(fruits);
// ["Полуниця", "Манго"]

// Створення копії за допомогою метода slice().
const fruitsCopy3 = fruits.slice();
// ["Полуниця", "Манго"]

Усі вбудовані операції копіювання масиву (синтаксис розгортання, Array.from(), Array.prototype.slice() і Array.prototype.concat()) створюють поверхневі копії. Якщо натомість потрібна глибинна копія масиву, можна використати JSON.stringify() для перетворення масиву на рядок JSON, а тоді – JSON.parse() – для перетворення рядка на новий масив, цілком незалежний від початкового масиву.

const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

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

Врешті решт, важливо розуміти, що присвоєння наявного масиву новій змінній не створює копій ані масиву, ані його елементів. Натомість нова змінна є лишень посиланням чи псевдонімом початкового масиву; тобто початкове ім'я масиву та нове ім'я змінної є лише двома іменами одного й того ж об'єкта (і, таким чином, завжди будуть вважатись строго рівними). Отже, якщо внести будь-які зміни або у значення початкового масиву, або у значення нової змінної, то зміняться обидва:

const fruits = ["Полуниця", "Манго"];
const fruitsAlias = fruits;
// 'fruits' і 'fruitsAlias' – один і той же об'єкт, строго рівні.
fruits === fruitsAlias; // true
// Будь-які зміни масиву 'fruits' також змінять 'fruitsAlias'.
fruits.unshift("Яблуко", "Банан");
console.log(fruits);
// ['Яблуко', 'Банан', 'Полуниця', 'Манго']
console.log(fruitsAlias);
// ['Яблуко', 'Банан', 'Полуниця', 'Манго']

Групування елементів масиву

Метод Array.prototype.group() може використовуватись для групування елементів масиву за допомогою перевіркової функції, що повертає рядок, котрий вказує на відповідну групу для поточного елемента.

Нижче – простий інвентарний масив, що включає об'єкти "їжі", котрі мають поля name (ім'я) та type (тип).

const inventory = [
  { name: "холодок", type: "vegetables" },
  { name: "банани", type: "fruit" },
  { name: "коза", type: "meat" },
  { name: "вишні", type: "fruit" },
  { name: "риба", type: "meat" },
];

Для використання group() передається функція зворотного виклику, котра викликається із поточним елементом та (необов'язково) поточним індексом і всім масивом – та повертає рядок, котрий позначає групу для елемента.

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

const result = inventory.group(({ type }) => type);
console.log(result.vegetables);
// [{ name: "холодок", type: "vegetables" }]

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

Якщо не підходить використання рядка як ключа, – наприклад, якщо інформація, за якою необхідне групування, асоційована з об'єктом, котрий може змінюватися, – то натомість можна використати метод Array.prototype.groupToMap(). Він вельми подібний до group, але групує елементи масиву в Map, що може використовувати як ключі довільні (об'єктні чи примітивні) значення.

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

Створюється шахова дошка у вигляді двовимірного масиву рядків. Перший хід виконується копіюванням 'p' із board[6][4] на board[4][4]. Стара позиція, на [6][4], очищується.

const board = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"],
];

console.log(`${board.join("\n")}\n\n`);

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

Ось – вивід:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Використання масиву для зведення у таблицю низки значень

const values = [];
for (let x = 0; x < 10; x++) {
  values.push([2 ** x, 2 * x ** 2]);
}
console.table(values);

Результат:

// Перший стовпець – індекс
0  1    0
1  2    2
2  4    8
3  8    18
4  16   32
5  32   50
6  64   72
7  128  98
8  256  128
9  512  162

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

Результат збігу між RegExp та рядком може утворити масив JavaScript, котрий має властивості та елементи, що надають інформацію про збіг. Такий масив повертають методи RegExp.prototype.exec() і String.prototype.match().

Наприклад:

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

const myRe = /d(b+)(d)/i;
const execResult = myRe.exec("cdbBdbsbz");
console.log(execResult.input); // 'cdbBdbsbz'
console.log(execResult.index); // 1
console.log(execResult); // [ "dbBd", "bB", "d" ]

Більше інформації про результат збігу – на сторінках RegExp.prototype.exec() і String.prototype.match().

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

Сумісність із браузерами

Дивіться також

• Колекції з індексами
• TypedArray
• ArrayBuffer