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.

правити

Порада

Якщо вам потрібно конвертувати стандартний об'єкт, який не є ітерабельним чи схожим на масив, скористайтеся методами Object.keys(), Object.values() чи Object.entries(). Для конвертації асинхронних ітерабельних об'єктів в масив існує Array.fromAsync().

автор: Bond правити

Нотатка

Метод from() приймає додатковий аргумент mapFn, який є опціональною функцією зворотнього виклику (callback). Ця функція може бути використана для маніпулювання елементами масиву під час їх створення. Наприклад, ви можете виконати деякі операції над елементами або змінити їх значення перед додаванням до нового масиву.

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

Якщо this не представляє конструктор, за замовчуванням використовується базовий конструктор Array.

автор: Bond правити

Нотатка

Метод from() завжди створює нерозріджені масиви. Якщо у джерела відсутні деякі індекси, у новому масиві вони будуть представлені як undefined.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

arrayLike

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

автор: Bond

правити

mapFn

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

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

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

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

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

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 }

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

f(1, 2, 3);

// [ 1, 2, 3 ]

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