Array.from()

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.

mapFn Optional

Eine Funktion, die für jedes Element des Arrays aufgerufen wird. Falls angegeben, wird jeder Wert vor dem Hinzufügen zum Array an diese Funktion übergeben. Statt des ursprünglichen Werts wird der Rückgabewert von mapFn 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

Der Wert, der bei der Ausführung von mapFn als this verwendet wird.

Rückgabewert

Eine neue Array-Instanz.

Beschreibung

Mit Array.from() können Sie Array-Instanzen aus Folgendem erstellen:

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

Um ein gewöhnliches Objekt, das weder iterierbar noch arrayähnlich ist, durch Auflisten seiner Eigenschaftsschlüssel, Werte oder beider in ein Array umzuwandeln, verwenden Sie Object.keys(), Object.values() oder Object.entries(). Um ein asynchron iterierbares Objekt in ein Array umzuwandeln, verwenden Sie Array.fromAsync().

Array.from() erstellt niemals ein Array mit Lücken. Wenn dem items-Objekt Eigenschaften für bestimmte Indizes fehlen, erhalten diese im neuen Array den Wert undefined.

Array.from() hat den optionalen Parameter mapFn, mit dem Sie für jedes Element des zu erstellenden Arrays eine Funktion ausführen können, ähnlich wie bei map(). Genauer gesagt liefert Array.from(obj, mapFn, thisArg) dasselbe Ergebnis wie Array.from(obj).map(mapFn, thisArg). Allerdings wird kein Zwischenarray erstellt, und mapFn erhält nur zwei Argumente (element, index), nicht das gesamte Array, da dieses noch erstellt wird.

Die Methode Array.from() ist eine generische Factory-Methode. Wenn beispielsweise eine Unterklasse von Array die Methode from() erbt, gibt die geerbte Methode from() neue Instanzen der Unterklasse statt Array-Instanzen zurück. Tatsächlich kann der this-Wert jede Konstruktorfunktion sein, die ein einzelnes Argument für die Länge des neuen Arrays akzeptiert. Wird ein iterierbares Objekt als items übergeben, wird der Konstruktor ohne Argumente aufgerufen; bei einem arrayähnlichen Objekt wird der Konstruktor mit dessen normalisierter Länge aufgerufen. Nach Abschluss der Iteration wird die endgültige length erneut festgelegt. Ist der this-Wert keine Konstruktorfunktion, wird stattdessen der gewöhnliche 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 einer 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 ]

Pfeilfunktionen mit Array.from() verwenden

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

from() auf Konstruktoren aufrufen, die keine Array-Konstruktoren sind

Die Methode from() kann auf jeder Konstruktorfunktion aufgerufen werden, die ein einzelnes Argument für die Länge des neuen Arrays akzeptiert.

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 gewöhnliches Array-Objekt zurückgegeben.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill für Array.from in core-js
• Polyfill für Array.from von es-shims
• Leitfaden zu indizierten Sammlungen
• Array
• Array()
• Array.of()
• Array.fromAsync()
• Array.prototype.map()
• TypedArray.from()