Fünf super nützliche Verwendungsmöglichkeiten von Array.from() (ausführliche Erklärung)

Jede Programmiersprache verfügt über Funktionalitäten, die über die grundlegende Verwendung hinausgehen, und sie profitiert von einem erfolgreichen Design und den Versuchen, eine Vielzahl von Problemen zu lösen.

In JavaScript gibt es eine solche Funktion: Array.from: Ermöglicht nützliche Konvertierungen für JavaScript-Sammlungen (z. B. Arrays, arrayähnliche Objekte oder iterierbare Objekte wie Zeichenfolgen, Karten, Mengen usw.).

【Verwandte Kursempfehlung: JavaScript-Video-Tutorial】

In diesem Artikel werde ich 5 nützliche und interessante Array.from()Anwendungsfälle beschreiben.

1. Einführung

Bevor wir beginnen, erinnern wir uns an die Rolle von Array.from(). Syntax:

Array.from(arrayLike[, mapFunction[, thisArg]])

• arrayLike: Erforderlicher Parameter, das Pseudo-Array-Objekt oder iterierbare Objekt, das Sie in ein Array konvertieren möchten.

• mapFunction: Optionaler Parameter, mapFunction(item, index){...} ist die Funktion, die für jedes Element in der Sammlung aufgerufen wird. Der zurückgegebene Wert wird in die neue Sammlung eingefügt.

• thisArg: Optionaler Parameter, dieses Objekt beim Ausführen der Callback-Funktion mapFunction. Dieser Parameter wird selten verwendet.

Multiplizieren wir zum Beispiel jedes Element des Klassenarrays mit 2:

const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]

2 Konvertieren Sie das Klassenarray in ein Array

Array.from()Erste Verwendung: Array-ähnliche Objekte in Arrays umwandeln.

Normalerweise werden Sie auf Array-ähnliche Objekte stoßen: das Schlüsselwort arguments in einer Funktion oder eine DOM-Sammlung.

Im folgenden Beispiel summieren wir die Argumente einer Funktion:

function sumArguments() {
    return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6

Array.from(arguments) Wandeln Sie das Array-ähnliche Objekt arguments in ein Array um und verwenden Sie dann die reduce-Methode des Arrays Summe.

Darüber hinaus kann der erste Parameter von Array.from() ein beliebiges iterierbares Objekt sein:

Array.from('Hey');                   // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']

const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

Klonen eines Arrays

Es gibt viele Möglichkeiten, Arrays in JavaScript zu klonen. Wie Sie sich vorstellen können, erleichtert Array.from() das Erstellen flacher Kopien von Arrays.

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);

numbers === numbersCopy; // => false

Array.from(numbers) erstellt eine flache Kopie des numbers-Arrays, und das Ergebnis von numbers === numbersCopy ist false, was bedeutet, dass numbers und numbersCopy zwar dieselben Elemente haben, dies aber der Fall ist anderes Array-Objekt.

Ist es möglich, mit Array.from() einen Klon eines Arrays zu erstellen, einschließlich aller verschachtelten Arrays? Fordern Sie sich selbst heraus!

function recursiveClone(val) {
    return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}

const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);

numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false

recursiveClone() kann eine tiefe Kopie eines Arrays erstellen, indem es beurteilt, ob das item des Arrays ein Array ist. Rufen Sie weiterhin recursiveClone() auf, um eine tiefe Kopie von zu erhalten das Array.

Können Sie eine kürzere tiefe Kopie eines Arrays schreiben als mit einer Array.from() rekursiven Kopie? Wenn Sie können, schreiben Sie bitte in den Kommentarbereich unten.

4. Füllen Sie das Array mit Werten

Wenn Sie das Array mit denselben Werten initialisieren müssen, dann würde Array.from() dies tun sei eine gute Wahl.

Definieren wir eine Funktion, die ein Array erstellt, das mit denselben Standardwerten gefüllt ist:

const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]

result ist ein neues Array, seine Länge beträgt 3 und jedes Element des Arrays ist 0. Rufen Sie die Methode Array.from() auf und übergeben Sie ein Array-ähnliches Objekt { length } und eine Funktion mapFunction, die den initialisierten Wert zurückgibt.

Es gibt jedoch eine Alternative array.fill(), die die gleiche Funktionalität erreicht.

const length = 3;
const init   = 0;
const result = Array(length).fill(init);

fillArray2(0, 3); // => [0, 0, 0]

fill() füllt das Array korrekt mit Anfangswerten.

4.1 Füllen des Arrays mit Objekten

Wenn beim Initialisieren jedes Elements des Arrays ein neues Objekt sein soll, ist Array.from() eine bessere Lösung. Lösung:

const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

Das von Array.from zurückgegebene resultA wird mit einer anderen leeren Objektinstanz initialisiert. Dies liegt daran, dass mapFunction, also hier () => ({}), bei jedem Aufruf ein neues Objekt zurückgibt.

Anschließend wird das von der fill()-Methode erstellte resultB mit derselben leeren Objektinstanz initialisiert. Leere Elemente werden nicht übersprungen.

4.2 Wie wäre es mit der Verwendung von array.map? Kann

mit der Methode array.map() umgesetzt werden? Versuchen wir es:

const length = 3;
const init   = 0;
const result = Array(length).map(() => init);

result; // => [undefined, undefined, undefined]

map() Die Methode scheint abnormal zu sein. Das erstellte Array ist nicht das erwartete [0, 0, 0], sondern ein Array mit 3 leeren Elementen.

Das liegt daran, dass Array(length) ein Array mit 3 leeren Elementen erstellt (auch als Sparse-Array bezeichnet), die map()-Methode die leeren Elemente jedoch überspringt.

5. Nummernkreis generieren

你可以使用 Array.from() 生成值范围。例如，下面的 range 函数生成一个数组，从0开始到 end - 1。

function range(end) {
    return Array.from({ length: end }, (_, index) => index);
}
range(4); // => [0, 1, 2, 3]

在 range() 函数中，Array.from() 提供了类似数组的 {length：end} ，以及一个简单地返回当前索引的 map 函数 。这样你就可以生成值范围。

6.数组去重

由于 Array.from() 的入参是可迭代对象，因而我们可以利用其与 Set 结合来实现快速从数组中删除重复项。

function unique(array) {
  return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。

因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。

这样，我们就实现了数组去重。

7.结论

Array.from() 方法接受类数组对象以及可迭代对象，它可以接受一个 map 函数，并且，这个 map 函数不会跳过值为 undefined 的数值项。这些特性给 Array.from() 提供了很多可能。

如上所述，你可以轻松的将类数组对象转换为数组，克隆一个数组，使用初始化填充数组，生成一个范围，实现数组去重。

实际上，Array.from() 是非常好的设计，灵活的配置，允许很多集合转换。

英文原文地址：https://dmitripavlutin.com/javascript-array-from-applications/

本文来自 js教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt vonFünf super nützliche Verwendungsmöglichkeiten von Array.from() (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!