JS метод Array.join()

Опис

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

Кожен елемент масиву конвертується в рядок і додається до загального рядка. Якщо елемент має значення undefined або null, його значенням стає пуста строка, а не рядок "null" або "undefined".

Метод join використовується усередині Array.prototype.toString() без додаткових аргументів. Якщо перевизначити метод join для вашого масиву, це також змінить результат методу toString.

Array.prototype.join рекурсивно обробляє кожен елемент, включаючи інші масиви, конвертуючи їх в рядки. Рядок, який повертає Array.prototype.toString (еквівалент виклику join()), не має додаткових роздільників. Таким чином, вкладені масиви здаються сплюснутими. Роздільник першого рівня можна визначати самостійно, тоді як глибші рівні використовують кому за замовчуванням.

Розглянемо наступний код:

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.join('; ');
console.log(result);

У цьому прикладі ми маємо масив fruits, який містить три елементи. З допомогою методу join() ми об'єднуємо їх в один рядок, розділений символом "; ". В результаті отримаємо рядок: "apple; banana; cherry".

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

const arr = [];
arr.push(1, [3, arr, 4], 2);
console.log(arr.join(";")); // 1;3,,4;2

Порада:	Перш ніж користуватися методом `join()`, упевніться, що у вас є масив для роботи. Адже `join()` є методом прототипу масиву, отже, його слід викликати для конкретного масиву, наприклад: `myArray.join()`. Спроба використання цього методу на об'єкті іншого типу або без відповідного контексту призведе до помилки.
Нотатка:	Коли ви викликаєте метод `join()`, можете вказати роздільник як аргумент. Цей роздільник використовуватиметься між елементами масиву в отриманому рядку. Якщо ви нічого не передаєте, роздільником буде кома. Дозволено використовувати будь-який рядок або символ. Наприклад, `myArray.join('-')` з'єднає елементи масиву через "-". Вказавши порожній рядок як роздільник, елементи об'єднаються без додавання додаткових символів.
Нотатка:	Метод `join()` не змінює оригінальний масив; він повертає нову рядкову послідовність, утворену з елементів масиву. Тому, якщо вам потрібно зберегти результат, збережіть його в змінну або використовуйте його безпосередньо.
Нотатка:	Якщо використовуєте метод `join()` на розріджених масивах, він обробляє пусті слоти так, наче вони мають значення `undefined`.
Нотатка:	Метод `join()` є універсальним. Він очікує, що об'єкт, до якого він застосовується, матиме властивість `length` та властивості з цілими числовими ключами.

Синтаксис

join()
join(separator)

Параметри

separator: Вказує рядок, що використовується для розділення кожної пари суміжних елементів масиву. Роздільник перетворюється в рядок, якщо необхідно. Якщо він не вказаний, елементи масиву розділяються комою (",").

Return

string: Повертає рядок, в якому об'єднані всі елементи масиву. Якщо arr.length дорівнює 0, повертається порожній рядок.

Переглядачі

Переглядач
	1	1	1	4	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExOwxob">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

const a = ["Вітер", "Вода", "Вогонь"];
a.join(); // 'Вітер,Вода,Вогонь'
a.join(", "); // 'Вітер, Вода, Вогонь'
a.join(" + "); // 'Вітер + Вода + Вогонь'
a.join(""); // 'ВітерВодаВогонь'

Метод join() обробляє порожні елементи так само, як і undefined, і додає додатковий роздільник.

console.log([1, , 3].join()); // '1,,3'
console.log([1, undefined, 3].join()); // '1,,3'

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

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // проігноровано методом join(), оскільки length дорівнює 3
};

console.log(Array.prototype.join.call(arrayLike));
// 2,3,4

console.log(Array.prototype.join.call(arrayLike, "."));
// 2.3.4

JS довідник

JavaScript

Наповнення JS розділу