Array.from() — Methode · JavaScript-Referenz

Signatur

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

Beschreibung

Die statische Methode Array.from() erzeugt eine neue, flach kopierte Array-Instanz aus einem iterable oder array-like Objekt.

Array.from() ermöglicht das Erstellen von Arrays aus:

iterable-Objekten (Objekten wie Map und Set); oder, falls das Objekt nicht iterable ist,
array-like Objekten (Objekten mit einer length-Eigenschaft und indizierten Elementen).

Um ein gewöhnliches Objekt, das weder iterable noch array-like ist, in ein Array umzuwandeln (durch Aufzählung seiner Eigenschaftsschlüssel, Werte oder beidem), verwende Object.keys(), Object.values() oder Object.entries(). Um ein async iterable in ein Array umzuwandeln, verwende Array.fromAsync().

Array.from() erzeugt niemals ein sparse array. Falls dem items-Objekt einige Index-Eigenschaften fehlen, werden sie im neuen Array zu undefined.

Array.from() hat einen optionalen Parameter mapFn, mit dem eine Funktion auf jedes Element des zu erstellenden Arrays ausgeführt werden kann, ähnlich wie map(). Genauer gesagt hat Array.from(obj, mapFn, thisArg) das gleiche Ergebnis wie Array.from(obj).map(mapFn, thisArg), außer dass kein Zwischenarray erzeugt wird und mapFn nur zwei Argumente (element, index) ohne das gesamte Array erhält, da das Array noch im Aufbau ist.

Die Methode Array.from() ist eine generische Factory-Methode. Wenn beispielsweise eine Subklasse von Array die from()-Methode erbt, gibt die geerbte from()-Methode neue Instanzen der Subklasse anstelle von Array-Instanzen zurück. Tatsächlich kann der this-Wert jede Konstruktorfunktion sein, die ein einzelnes Argument akzeptiert, das die Länge des neuen Arrays repräsentiert. Wenn ein iterable als items übergeben wird, wird der Konstruktor ohne Argumente aufgerufen; wenn ein array-like Objekt übergeben wird, wird der Konstruktor mit der normalisierten Länge des array-like Objekts aufgerufen. Die endgültige length wird nach Abschluss der Iteration erneut gesetzt. Wenn der this-Wert keine Konstruktorfunktion ist, wird stattdessen der einfache Array-Konstruktor verwendet.

Parameter

Name	Typ	Default	Beschreibung
$items Pflicht	iterable \| array-like	—	Ein iterable oder array-like Objekt, das in ein Array umgewandelt werden soll.
$mapFn	Function	—	Eine Funktion, die für jedes Element des Arrays aufgerufen wird. Wenn angegeben, wird jeder dem Array hinzuzufügende Wert zuerst durch diese Funktion geleitet, und der Rückgabewert von mapFn wird stattdessen dem Array hinzugefügt. Die Funktion wird mit den Argumenten element (das aktuell verarbeitete Element) und index (der Index des aktuell verarbeiteten Elements) aufgerufen.
$thisArg	any	—	Wert, der als this bei der Ausführung von mapFn verwendet werden soll.

Rückgabewert

Typ

Array

Beschreibung

Eine neue Array-Instanz.

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 einer NodeList

// Ein Array basierend auf einer Eigenschaft von DOM-Elementen erstellen
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-like Objekt (arguments)

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

f(1, 2, 3);

// [ 1, 2, 3 ]

Verwendung von Arrow Functions und Array.from()

// Verwendung einer Arrow Function als map-Funktion,
// um die Elemente zu manipulieren
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Eine Zahlenfolge generieren
// Da das Array an jeder Position mit `undefined` initialisiert wird,
// ist der Wert von `v` unten `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

Sequenzgenerator (range)

// Sequenzgenerator-Funktion (üblicherweise "range" genannt, vgl. Python, Clojure, etc.)
const range = (start, stop, step) =>
  Array.from(
    { length: Math.ceil((stop - start) / step) },
    (_, i) => start + i * step,
  );

// Eine Zahlenfolge von 0 (inklusiv) bis 5 (exklusiv), in Schritten von 1
range(0, 5, 1);
// [0, 1, 2, 3, 4]

// Eine Zahlenfolge von 1 (inklusiv) bis 10 (exklusiv), in Schritten von 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Das lateinische Alphabet generieren, indem es als geordnete Sequenz genutzt wird
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() auf Nicht-Array-Konstruktoren

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-Wert ist kein Konstruktor

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

// Wichtig · Fallstricke

Dieses Verhalten ist wichtiger für typed arrays, da das Zwischenarray notwendigerweise Werte abgeschnitten hätte, um in den passenden Typ zu passen. Array.from() ist so implementiert, dass es die gleiche Signatur wie TypedArray.from() hat.

Siehe auch

Array Array() Array.of() Array.fromAsync() Array.prototype.map() TypedArray.from()

← Vorheriger Eintrag Array: length Nächster Eintrag → Array.fromAsync()