Array.from()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die Array.from() statische Methode erstellt eine neue, flachkopierte Array-Instanz aus einem iterierbaren oder array-ähnlichen Objekt.

Probieren Sie es aus

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]

Syntax

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

Parameter

items

Ein iterierbares oder array-ähnliches Objekt, das in ein Array konvertiert werden soll.

mapFn Optional

Eine Funktion, die für jedes Element des Arrays aufgerufen wird. Wenn angegeben, wird jeder Wert, der zum Array hinzugefügt werden soll, zuerst durch diese Funktion geleitet, und der Rückgabewert von mapFn wird stattdessen zum Array hinzugefügt. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element: Das aktuelle Element, das im Array verarbeitet wird.
index: Der Index des aktuellen Elements, das im Array verarbeitet wird.

thisArg Optional

Wert, der als this beim Ausführen von mapFn verwendet wird.

Rückgabewert

Eine neue Array Instanz.

Beschreibung

Array.from() ermöglicht es Ihnen, Arrays zu erstellen aus:

iterierbaren Objekten (Objekte wie Map und Set); oder, wenn das Objekt nicht iterierbar ist,
array-ähnlichen Objekten (Objekte mit einer length-Eigenschaft und indizierten Elementen).

Um ein gewöhnliches Objekt, das weder iterierbar noch array-ähnlich ist, in ein Array zu konvertieren (indem Sie seine Eigenschaften, Werte oder beides aufzählen), verwenden Sie Object.keys(), Object.values(), oder Object.entries(). Um ein asynchron iterierbares in ein Array zu konvertieren, verwenden Sie Array.fromAsync().

Array.from() erstellt niemals ein spärliches Array. Wenn beim items Objekt einige Index-Eigenschaften fehlen, werden diese im neuen Array zu undefined.

Array.from() hat einen optionalen Parameter mapFn, der es Ihnen ermöglicht, eine Funktion auf jedes Element des erstellten Arrays auszuführen, ähnlich wie map(). Genauer gesagt hat Array.from(obj, mapFn, thisArg) das gleiche Ergebnis wie Array.from(obj).map(mapFn, thisArg), mit dem Unterschied, dass es kein Zwischenarray erstellt und mapFn nur zwei Argumente (element, index) erhält, ohne das gesamte Array, da das Array noch in der Erstellung ist.

Hinweis: Dieses Verhalten ist bei typisierten Arrays wichtiger, da das Zwischenarray notwendigerweise Werte hätte, die in den entsprechenden Typ gekürzt sind. Array.from() ist so implementiert, dass es die gleiche Signatur wie TypedArray.from() hat.

Die Array.from() Methode ist eine generische Fabrikmethode. Wenn zum Beispiel eine Unterklasse von Array die from() Methode erbt, wird die geerbte from() Methode neue Instanzen der Unterklasse statt von Array-Instanzen zurückgeben. Tatsächlich kann der this Wert jede Konstruktorfunktion sein, die ein einzelnes Argument akzeptiert, das die Länge des neuen Arrays darstellt. Wenn ein Iterierbares als items übergeben wird, wird der Konstruktor ohne Argumente aufgerufen; wenn ein array-ähnliches Objekt übergeben wird, wird der Konstruktor mit der normalisierten Länge des array-ähnlichen Objekts aufgerufen. Die endgültige Länge wird erneut festgelegt, wenn die Iteration abgeschlossen ist. Ist der this Wert keine Konstruktorfunktion, wird stattdessen der einfache Array Konstruktor verwendet.

Beispiele

Array aus einem String

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

Array aus einem Set

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

Array aus einer 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'];

Array aus einem 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://"));

Array aus einem array-ähnlichen Objekt (arguments)

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

f(1, 2, 3);

// [ 1, 2, 3 ]

Verwendung von Pfeilfunktionen und 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]

Sequenzgenerator (Bereich)

// 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"]

Aufruf von from() bei nicht-Array-Konstruktoren

Die from() Methode kann auf jede Konstruktorfunktion aufgerufen werden, die ein einzelnes Argument akzeptiert, das die Länge des neuen Arrays darstellt.

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 }

Wenn der this Wert kein Konstruktor ist, wird ein einfaches Array Objekt zurückgegeben.

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

Spezifikationen

Specification
ECMAScript® 2026 Language Specification # sec-array.from