JavaScript | Array | from

Метод from — это свойство конструктора Array. То есть этот метод можно вызвать только у конструктора Array, а не у объектов-прототипов.

C его помощью можно создавать массивы из массивов, а также других типов данных. Ещё можно создавать массивы из массиво-подобных объектов, таких как HTMLCollection, NodeList, String.

 

Синтаксис метода from

Array.from ( items [ , mapfn [ , thisArg ] ] )

items — Массиво-подобный или итерируемый объект, который можно преобразовать в массив.

mapfn — Функция, вызываемая для каждого элемента из items.

thisArg — Значение, используемое в качестве this при выполнении функции mapfn.

Логика работы метода from

1. Пусть C будет значением этого this.
2. Если mapfn является undefined, пусть сопоставление mapping будет ложным false.
3. Иначе,
   a. Если IsCallable(mapfn) имеет значение false, выбросить исключение TypeError.
   b. Пусть сопоставление mapping будет истинным true.
4. Пусть usingIterator будет ? GetMethod (items, @@iterator).
5. Если usingIterator не undefined, тогда
   a. Если IsConstructor(C) истинно true, то
      i. Пусть А будет ? Construct(С).
   b. Иначе,
      i. Пусть A будет ! ArrayCreate(0).
   c. Пусть iteratorRecord будет ? GetIterator(items, sync, usingIterator).
   d. Пусть k будет 0.
   e. Повторять,
      i. Если k ≥ 253 - 1, тогда
         1. Пусть ошибка error будет ThrowCompletion(вновь созданный объект TypeError).
         2. Вернуть ? IteratorClose(iteratorRecord, error).
      ii. Пусть Pk будет ! ToString(𝔽(k)).
      iii. Пусть next будет ? IteratorStep(iteratorRecord).
      iv. Если next ложно false, то
         1. Выполнить ? Set(A, "length", 𝔽(k), true).
         2. Вернуть A
      v. Пусть nextValue будет ? IteratorValue(next).
      vi. Если сопоставление mapping верно true, то
         1. Пусть mappedValue будет вызовом Call(mapfn, thisArg, « nextValue, 𝔽(k) »).
         2. Если mappedValue является внезапным завершением, вернуть ? IteratorClose(iteratorRecord, mappedValue).
         3. Установить mappedValue на mappedValue.[[Value]].
      vii. Иначе, пусть mappedValue будет nextValue.
      viii. Пусть defineStatus будет CreateDataPropertyOrThrow(A, Pk, mappedValue).
      ix. Если defineStatus является внезапным завершением, вернуть ? IteratorClose(iteratorRecord, defineStatus).
      x. Установить k на k + 1.
6. ПРИМЕЧАНИЕ: items не является Iterable, поэтому предположим, что это объект, подобный массиву.
7. Пусть arrayLike будет ! ToObject(items).
8. Пусть len будет ? LengthOfArrayLike(arrayLike).
9. Если IsConstructor(C) является true, тогда
   a. Пусть A будет ? Construct(C, « 𝔽(len) »).
10. Иначе,
   a. Пусть A будет ? ArrayCreate(len).
11. Пусть k будет 0.
12. Повторять, пока k < len,
   a. Пусть Pk будет ! ToString(𝔽(k)).
   b. Пусть kValue будет ? Get(arrayLike, Pk).
   c. Если mapping является true, тогда
      i. Пусть mappedValue будет ? вызовом Call(mapfn, thisArg, « kValue, 𝔽(k) »).
   d. Иначе, пусть mappedValue будет kValue.
   e. Выполнить ? CreateDataPropertyOrThrow(A, Pk, mappedValue).
   f. Установить k на k + 1.
13. Выполнить ? Set(A, "length", 𝔽(len), true).
14. Вернуть A.

 

Примечание

Функция from — это намеренно общий фабричный метод; это не требует, чтобы это значение было конструктором массива. Следовательно, он может быть передан или унаследован любым другим конструктором, который может быть вызван с одним числовым аргументом.

 

Вызов from без параметров

Попытка вызвать функцию from() без параметров приведёт к появлению ошибки.

Array.from()

Это говорит нам о том, что в функцию from() всегда нужно передавать данные.

 

Вызов from с одним параметром — items

Передача строки:

Array.from("efim360.ru")

Данная команда вернёт нам массив элементов, где каждая буква строки будет значением одного элемента массива

 

Передача числа:

Array.from(12345)

Вернёт массив нулевой длины без элементов

 

Передача массива:

var m1 = [1, 2, 3]

var m2 = Array.from(m1)

var m1 = [5, 5, 5]

m2
[1, 2, 3]

В этом случае мы получим совершенно новый массив, который будет копией передаваемого массива. Мы создали массивы m1 и m2, чтобы показать как метод from делает копию.

 

Передача объекта:

Array.from({a:"b"})

Вернёт массив нулевой длины без элементов

 

Вызов from с двумя параметрами — items и mapfn

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

Например, у нас есть массив:

var massiv = [5, 4, 3, 2, 1]

Мы умножим каждое значение элемента массива на 10.

Array.from(massiv, (i)=>i*10)

На каждой итерации создания нового массива над элементом будет осуществляться преобразование — умножение его значения на 10.

 

Вызов from с тремя параметрами — items, mapfn и thisArg

Третий параметр thisArg — это контекст. Например это тот объект, который будет участвовать в функции. То есть мы можем использовать this внутри функции, если для метода from определим третий параметр.

Предположим у нас есть массив (подставится в первый аргумент from):

var massiv = [3, 5, 12]

Предположим у нас есть объект (подставится в третий аргумент from):

var mnojitel = {multiply: 2}

Теперь мы можем передать этот объект для управления функцией внутри метода from. Мы явно указываем контекст this для работы функции

Array.from(massiv, function(i){return i * this.multiply}, mnojitel)
--итог работы from--
[6, 10, 24]

Вывод в консоль браузера:

Это простой пример для того, чтобы просто понять принцип работы метода from с тремя параметрами.
 

Информационные ссылки

JavaScript | Массивы (Array)

Стандарт ECMAScript — Раздел «23.1.2.1 Array.from ( items [ , mapfn [ , thisArg ] ] )» — https://tc39.es/ecma262/#sec-array.from

Стандарт ECMAScript — Раздел «22.1 Array Objects» — https://tc39.es/ecma262/#sec-array-objects

Стандарт ECMAScript — https://tc39.es/ecma262/