Die statische MethodeArray.from() erstellt eine neue, flach kopierteArray-Instanz von einemiterierbaren oderarray-ä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 umgewandelt werden soll.

mapFnOptional

Eine Funktion, die auf jedes Element des Arrays aufgerufen wird. Falls angegeben, wird jeder Wert, der zum Array hinzugefügt werden soll, zuerst durch diese Funktion geleitet, und der Rückgabewert vonmapFn 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.

thisArgOptional

Der Wert, der alsthis verwendet wird, wennmapFn ausgeführt wird.

Rückgabewert

Eine neueArray-Instanz.

Beschreibung

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

• iterierbaren Objekten (Objekte wieMap undSet); oder, wenn das Objekt nicht iterierbar ist,
• array-ähnlichen Objekten (Objekte mit einerlength-Eigenschaft und indizierten Elementen).

Um ein gewöhnliches Objekt, das weder iterierbar noch array-ähnlich ist, in ein Array zu konvertieren (durch Aufzählung seiner Eigenschaftsschlüssel, -werte oder beider), verwenden SieObject.keys(),Object.values(), oderObject.entries(). Um einasynchron iterierbares Objekt in ein Array zu konvertieren, verwenden SieArray.fromAsync().

Array.from() erstellt niemals ein spärliches Array. Wenn demitems-Objekt einige Indizeigenschaften fehlen, werden sie im neuen Array zuundefined.

Array.from() verfügt über einen optionalen ParametermapFn, der es Ihnen ermöglicht, eine Funktion auf jedes Element des erstellten Arrays auszuführen, ähnlich wiemap(). Genauer gesagt hatArray.from(obj, mapFn, thisArg) dasselbe Ergebnis wieArray.from(obj).map(mapFn, thisArg), außer dass kein Zwischenarray erstellt wird undmapFn nur zwei Argumente erhält (element,index) ohne das ganze Array, da das Array noch im Aufbau ist.

DieArray.from()-Methode ist eine generische Fabrikmethode. Wenn z. B. eine Unterklasse vonArray diefrom()-Methode erbt, wird die geerbtefrom()-Methode neue Instanzen der Unterklasse anstelle vonArray-Instanzen zurückgeben. Tatsächlich kann derthis-Wert jede Konstruktorfunktion sein, die ein einzelnes Argument akzeptiert, das die Länge des neuen Arrays darstellt. Wenn ein iterierbares Objekt alsitems übergeben wird, wird der Konstruktor ohne Argumente aufgerufen; wenn ein array-ähnliches Objekt übergeben wird, wird der Konstruktor mit dernormalisierten Länge des array-ähnlichen Objekts aufgerufen. Die endgültigelength wird erneut festgelegt, wenn die Iteration abgeschlossen ist. Wenn derthis-Wert keine Konstruktorfunktion ist, wird stattdessen der einfacheArray-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 einer NodeList

// Create an array based on a property of DOM Elementsconst 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 elementsArray.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 1range(0, 5, 1);// [0, 1, 2, 3, 4]// Generate a sequence of numbers from 1 (inclusive) to 10 (exclusive), incrementing by 2range(1, 10, 2);// [1, 3, 5, 7, 9]// Generate the Latin alphabet making use of it being ordered as a sequencerange("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

Diefrom()-Methode kann auf jeder 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);}// Iterableconsole.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-likeconsole.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));// NotArray called with length 1// NotArray { '0': 'foo', length: 1 }

Wenn derthis-Wert kein Konstruktor ist, wird ein einfachesArray-Objekt zurückgegeben.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill vonArray.from incore-js
• es-shims Polyfill vonArray.from
• Indizierte Sammlungen Leitfaden
• Array
• Array()
• Array.of()
• Array.fromAsync()
• Array.prototype.map()
• TypedArray.from()