JS метод Array.from()

Опис

Array.from() - це спеціальний метод, який дозволяє формувати масиви з різних джерел:

ітерабельних об'єктів (наприклад, Map чи Set);
об'єктів, які нагадують масиви (мають властивість length та індексовані елементи).

Окрім основного завдання формування масивів, from() пропонує додатковий параметр mapFn, який дозволяє застосовувати функцію до кожного елемента масиву. Детальніше кажучи, виклик Array.from(obj, mapFn, thisArg) дорівнює Array.from(obj).map(mapFn, thisArg), проте не генерує додаткового масиву.

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

Приклад використання Array.from():

const set = new Set(["apple", "banana", "cherry"]);
const arrayFromSet = Array.from(set);
console.log(arrayFromSet); // ["apple", "banana", "cherry"]

У цьому прикладі ми конвертуємо Set в масив за допомогою методу Array.from(). Таким чином, ми отримали масив із елементами "apple", "banana", та "cherry".

Увага: Array.from() — це універсальний "фабричний" метод. Якщо підклас Array успадковує from(), цей метод буде повертати екземпляри підкласу, а не базовий Array.

Нотатка:	Метод `from()` приймає додатковий аргумент `mapFn`, який є опціональною функцією зворотнього виклику (callback). Ця функція може бути використана для маніпулювання елементами масиву під час їх створення. Наприклад, ви можете виконати деякі операції над елементами або змінити їх значення перед додаванням до нового масиву.
Нотатка:	Зверніть увагу, що метод `from()` не змінює вихідний об'єкт, але створює новий масив на основі ітерабельного об'єкта. Якщо вам потрібно змінити вихідний об'єкт, скористайтеся іншими методами маніпуляції з масивами, такими як `map()` або `filter()`.
Нотатка:	Якщо `this` не представляє конструктор, за замовчуванням використовується базовий конструктор `Array`.
Порада:	Якщо вам потрібно конвертувати стандартний об'єкт, який не є ітерабельним чи схожим на масив, скористайтеся методами `Object.keys()`, `Object.values()` чи `Object.entries()`. Для конвертації асинхронних ітерабельних об'єктів в масив існує `Array.fromAsync()`.
Нотатка:	Метод `from()` завжди створює нерозріджені масиви. Якщо у джерела відсутні деякі індекси, у новому масиві вони будуть представлені як `undefined`.

Синтаксис

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

Параметри

*arrayLike

Ітерабельний або об'єкт, подібний до масиву, який буде перетворено на масив.

mapFn

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

Функція mapFn викликається з наступними аргументами:

element: поточний елемент, який обробляється у масиві;
index: індекс поточного елемента, який обробляється у масиві.

thisArg

Значення, яке буде використовуватися як this під час виконання функції mapFn.

Return

array: Новий екземпляр масиву.

Переглядачі

Переглядач
	45	32	9	32	12

Переглядач
	45	45	32	9

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

Приклади

У цьому прикладі метод Array.from() використовується для створення масиву із рядка та масиву з використанням функції перетворення. Результати виводяться на екран.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/XWyabMm">
  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>.

У цьому прикладі за допомогою методу Array.from() створюється масив з рядка "foo". Кожен символ рядка стає окремим елементом масиву.

Array.from("foo");
// [ "f", "o", "o" ]

У цьому прикладі за допомогою методу Array.from() створюється масив з множини (Set). Множина містить значення "foo", "bar", "baz", але оскільки множина не може містити повторюваних значень, дублікат "foo" видаляється. Отриманий масив містить унікальні значення множини.

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

У цьому прикладі за допомогою методу Array.from() створюється масив із об'єкту, схожого на масив - arguments. Функція f() приймає довільну кількість аргументів, і всі ці аргументи стають елементами масиву, який повертається.

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

У цьому прикладі метод from() викликається на конструкторній функції NotArray. Цей метод може перетворити ітерований об'єкт (Set) або об'єкт, схожий на масив, у новий масив.

function NotArray(len) {
  console.log("NotArray викликано з довжиною", len);
}

// Ітерований об'єкт
console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
// NotArray викликано з довжиною undefined
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }

// Об'єкт, схожий на масив
console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
// NotArray викликано з довжиною 1
// NotArray { '0': 'foo', length: 1 }

JS довідник

JavaScript

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