Heim > Web-Frontend > js-Tutorial > Was ist JS-Array-Flattening? Implementierung der JS-Array-Flattening (mit Code)

Was ist JS-Array-Flattening? Implementierung der JS-Array-Flattening (mit Code)

不言
Freigeben: 2018-08-06 13:58:16
Original
2481 Leute haben es durchsucht

In diesem Artikel erfahren Sie, was JS-Array-Flattening ist. Die Implementierung der js-Array-Abflachung (mit Code) hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

1. Was ist Array-Flattening?

  1. Flattening dient, wie der Name schon sagt, der Reduzierung der Komplexität Dekoration und Dinge herstellen Es ist prägnanter und einfacher und hebt das Thema hervor.

  2. Array-Flattening besteht, wie Sie oben bereits wissen, darin, ein komplex verschachteltes mehrschichtiges Array Schicht für Schicht in ein Array mit weniger Ebenen oder nur einem Array von Ebenen umzuwandeln.

Ps: flatten kann das Array reduzieren, der Effekt wird wie folgt sein:

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr)); // [1, 2, 3, 4]
Nach dem Login kopieren

Wie man nach der Verwendung von flatten sehen kann Verarbeitung Das Array hat nur eine Ebene. Versuchen wir, es zu implementieren.

2. Einfache Implementierung

2.1 Gewöhnliche Rekursion

  • Dies Es ist die einfachste Methode, die man sich vorstellen kann, einfach und klar!

/* ES6 */
const flatten = (arr) => {
  let result = [];
  arr.forEach((item, i, arr) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(arr[i])
    }
  })
  return result;
};

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
Nach dem Login kopieren
/* ES5 */
function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]))
    }
    else {
      result.push(arr[i])
    }
  }
  return result;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
Nach dem Login kopieren

2.2 toString()

  • Diese Methode verwendet toString, um das Array in einen durch Kommas getrennten String umzuwandeln , durchlaufen Sie dann das Array und konvertieren Sie jedes Element wieder in seinen ursprünglichen Typ.

Sehen wir uns zunächst an, wie toString ein Array in einen String umwandelt

[1, [2, 3, [4]]].toString()
// "1,2,3,4"
Nach dem Login kopieren

Vollständige Anzeige

/* ES6 */
const flatten = (arr) => arr.toString().split(',').map((item) => +item);

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
Nach dem Login kopieren
/* ES5 */
function flatten(arr) {
  return arr.toString().split(',').map(function(item){
    return +item;
  });
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
Nach dem Login kopieren

Diese Methode wird verwendet Das Szenario ist sehr begrenzt, und alle Elemente im Array müssen Zahl sein.
Es können auch alle Strings sein, und Sie können die spezifische Implementierung selbst realisieren.

2.3 [].concat.apply + some

  • Verwenden Sie arr.some, um festzustellen, ob ein Array im Array vorhanden ist, und rufen Sie es auf Flat-Funktion (unter Verwendung von flatten Flattening), verbunden mit [].concat.apply, gibt schließlich concat;arr

/* ES6 */
const flatten = (arr) => {
  while (arr.some(item => Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));
Nach dem Login kopieren
rrree

2.4 Reduce

  • selbst ist ein iterativer Looper, der normalerweise zur Akkumulation verwendet wird. Basierend auf dieser Funktion gibt es daher Folgendes:

    reduce

    /* ES5 */
    /**
    * 封装Array.some
    * @param {function} callback    - 回调函数
    * @param {any}      currentThis - 回调函数中this指向
    */
    Array.prototype.some = function (callback, currentThis){
      let context = this;
      let flag = false;
      currentThis = currentThis || this;
      for (var i = 0, len = context.length; i < len; i++) {
        const res = callback.call(currentThis, context[i], i, context);
        if (res) {
          flag = true;
        } else if (!flag) {
          flag = false;
        }
      }
      return flag;
    }
    
    function flatten(arr){
      while(arr.some(item => Array.isArray(item))){
        arr = [].concat.apply([], arr);
      }
      return arr;
    }
    
    const arr = [1, [2, [3, 4]]];
    console.log(flatten(arr));
    Nach dem Login kopieren
Destrukturierung in ES6 2.5 Operatoren...

  • kann jedes Mal nur das äußerste Array erweitern. Nach

    wird ... einmal abgeflacht. [].concatarr

    function flatten(arr){
      return arr.reduce(function(prev, cur){
        return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
      }, [])
    }
    
    const arr = [1, [2, [3, 4]]];
    console.log(flatten(arr));
    Nach dem Login kopieren
  • Empfohlene verwandte Artikel:

Mit Javascript vier lexikalische Analysen des arithmetischen Compilers schreiben

js How den Code zum Scrollen und Klicken implementieren, um weitere Daten zu laden?

Das obige ist der detaillierte Inhalt vonWas ist JS-Array-Flattening? Implementierung der JS-Array-Flattening (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage