Array.from()

Статический метод Array.from() создает новый, поверхностно скопированный экземпляр Array из итерируемого или массивоподобного объекта.

Попробуйте

console.log(Array.from("foo"));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

Синтаксис

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

Параметры

items

Итерируемый или массивоподобный объект для преобразования в массив.

mapFn Необязательно

Функция, вызываемая для каждого элемента массива. Если она предоставлена, каждое значение, добавляемое в массив, сначала пропускается через эту функцию, и возвращаемое значение mapFn добавляется в массив вместо исходного. Функция вызывается со следующими аргументами:

element

Текущий обрабатываемый элемент в массиве.

index

Индекс текущего обрабатываемого элемента в массиве.

thisArg Необязательно

Значение, используемое как this при выполнении mapFn.

Возвращаемое значение

Новый экземпляр Array.

Описание

Array.from() позволяет создавать Array из:

• итерируемых объектов (таких как Map и Set); или, если объект не итерируемый,
• массивоподобных объектов (объектов со свойством length и индексированными элементами).

Чтобы преобразовать обычный объект, который не является итерируемым или массивоподобным, в массив (перечисляя его ключи свойств, значения или и то, и другое), используйте Object.keys(), Object.values(), или Object.entries(). Чтобы преобразовать асинхронный итерируемый объект в массив, используйте Array.fromAsync().

Array.from() никогда не создает разреженный массив. Если объекту items не хватает некоторых индексных свойств, они становятся undefined в новом массиве.

Array.from() имеет необязательный параметр mapFn, который позволяет выполнить функцию для каждого элемента создаваемого массива, аналогично map(). Говоря более точно, Array.from(obj, mapFn, thisArg) дает тот же результат, что и Array.from(obj).map(mapFn, thisArg), за исключением того, что он не создает промежуточный массив, а mapFn получает только два аргумента (element, index) без всего массива, поскольку массив все еще находится в процессе построения.

Метод Array.from() является обобщенным фабричным методом. Например, если подкласс Array наследует метод from(), унаследованный метод from() вернет новые экземпляры подкласса вместо экземпляров Array. Фактически, значение this может быть любой функцией-конструктором, которая принимает один аргумент, представляющий длину нового массива. Когда итерируемый объект передается как items, конструктор вызывается без аргументов; когда передается массивоподобный объект, конструктор вызывается с нормализованной длиной массивоподобного объекта. Окончательное значение length будет установлено снова, когда итерация завершится. Если значение this не является функцией-конструктором, вместо него используется обычный конструктор Array.

Примеры

Массив из строки

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

Массив из Set

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

Массив из Map

const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

Массив из NodeList

// Create an array based on a property of DOM Elements
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));

Массив из массивоподобного объекта (arguments)

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

f(1, 2, 3);

// [ 1, 2, 3 ]

Использование стрелочных функций и Array.from()

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

Генератор последовательности (диапазона)

// Sequence generator function (commonly referred to as "range", cf. Python, Clojure, etc.)
const range = (start, stop, step) =>
  Array.from(
    { length: Math.ceil((stop - start) / step) },
    (_, i) => start + i * step,
  );

// Generate a sequence of numbers from 0 (inclusive) to 5 (exclusive), incrementing by 1
range(0, 5, 1);
// [0, 1, 2, 3, 4]

// Generate a sequence of numbers from 1 (inclusive) to 10 (exclusive), incrementing by 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the Latin alphabet making use of it being ordered as a sequence
range("A".charCodeAt(0), "Z".charCodeAt(0) + 1, 1).map((x) =>
  String.fromCharCode(x),
);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Вызов from() для конструкторов, не являющихся массивами

Метод from() может быть вызван для любой функции-конструктора, которая принимает один аргумент, представляющий длину нового массива.

function NotArray(len) {
  console.log("NotArray called with length", len);
}

// Iterable
console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
// NotArray called with length undefined
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }

// Array-like
console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
// NotArray called with length 1
// NotArray { '0': 'foo', length: 1 }

Когда значение this не является конструктором, возвращается обычный объект Array.

console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]

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

Совместимость с браузерами

См. также

• Полифил Array.from в core-js
• Полифил es-shims для Array.from
• Руководство по индексированным коллекциям
• Array
• Array()
• Array.of()
• Array.fromAsync()
• Array.prototype.map()
• TypedArray.from()