Verflachen eines Arrays in JavaScript

1. Verwendung von concat() zum Flatten von Arrays in JavaScript
2. Verwenden Sie Array.reduce(), um ein mehrdimensionales Array in JavaScript zu reduzieren
3. Verwenden Sie flat(), um Arrays auf eine bestimmte Tiefenebene in JavaScript zu flatten

Dieses Tutorial erklärt, wie man ein Array in JavaScript verflacht. Wir werden lernen, wie man JavaScript-Arrays mit concat(), reduce und ECMAScript 6 Arrays.flat()-Methode, die Multi-Tiefe Ebenen unterstützt flatten. Wir werden auch eine ähnliche Methode mit einer reinen for-Schleife für diejenigen implementieren, die ECMAScript 6 nicht verwenden können.

Verwendung von concat() zum Flatten von Arrays in JavaScript

Nehmen wir an, wir haben das folgende Array:

var array1 = [['element 1'], ['element 2']];

Um das obige JavaScript-Array array1 zu verflachen, müssen wir alle Elemente der Kind-Arrays zu Elementen des Eltern-Arrays machen. Es wäre also wie ["element 1", "element 2"].

Wir können die Methode Arrays.concat() verwenden, um Arrays zu flatten.

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

Ausgabe:

["element 1", "element 2"]

Verwenden Sie Array.reduce(), um ein mehrdimensionales Array in JavaScript zu reduzieren

Die Funktion Array.reduce() ist eine der Funktionen höherer Ordnung. Sie nimmt eine auszuführende reduce()-Funktion als Argument. Um die Funktion reduce() zu verstehen, lassen Sie uns das folgende Beispiel betrachten:

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

Ausgabe:

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

Um das Array zu reduzieren, führen wir mit der Funktion reduce eine reducer-Funktion aus, die die Eingabe verkettet, falls sie kein Array war; andernfalls reduzieren wir sie wieder rekursiv.

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

Ausgabe:

["element 1", "element 2"]

Das obige Beispiel kann auch verwendet werden, um Arrays zu flatten, die aus mehr als einer Ebenentiefe bestehen.

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

Ausgabe:

["element 1", "element 2", "element 3"]

Verwenden Sie flat(), um Arrays auf eine bestimmte Tiefenebene in JavaScript zu flatten

Die Methode Array.prototype.flat() wird verwendet, um Arrays mit mehr als einer Ebenentiefe zu verflachen, indem die Tiefenebene als Argument übergeben wird. Für den Fall, dass wir die genaue Tiefenebene nicht kennen, können wir Infinity als Argument an die Funktion übergeben.

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

Ausgabe:

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]