JavaScript-Thema 8: Array-Flattening

Verzeichnis

2. Apply+some

• 5. toString
• 7. Implementieren Sie Ihr eigenes The Flat Tool -Methode
• wurde am Ende geschrieben (kostenlose Lernempfehlung:
• javaScript Video Tutorial
• )
• 1. Rekursion

FOR Loop ist, wenn wir Array -Operationen ausführen Am einfachsten ist es, sich vorzustellen, dass die Rekursion die perfekte Wahl sein sollte, wenn die Komplexität von Zeit und Raum nicht berücksichtigt wird!

Beispiel:

输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

Code:

function flatten(arr) {
    let res = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            // 因为函数返回的是数组，所以要做拼接处理
            res = res.concat(flatten(arr[i]));
        } else {
            res.push(arr[i])
        }
    }
    return res;}

Hinweis:

Bestimmen Sie den Grundtyp der Elemente im Array

Wenn es sich nicht um ein Array handelt: Speichern Sie es direkt im neuen Array

Wenn es sich um ein Array handelt: Wiederholen Sie den ersten Schritt für Schritt, bis das letzte Element, das kein Array ist, im neuen Array gespeichert ist

2. Reduzieren

Schauen wir uns zunächst an, was reduce ist führt Folgendes aus: reduce() Die -Methode führt eine von Ihnen bereitgestellte Reduzierfunktion (in aufsteigender Reihenfolge) für jedes Element im Array aus und fasst ihre Ergebnisse in einer einzigen Rückgabe zusammen Wert.

Beispiel:

输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

Code:

function flatten(arr) {
    return arr.reduce((prev, next) => {
        // prev表示上一次操作的结果
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
    // 注意reduce的初始值应该是[]，否则无法进行拼接}

3. Hinweis:

   Vergleichen Sie sorgfältig Methode 1

   und

   Methode 2reduce是做什么的：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

   示例：

   function flatten(arr) {
       while (arr.some(item => Array.isArray(item))) {
           // 只要存在数组类型的元素，就抹平一层
           arr = [].concat.apply([], arr)
       }
       return arr;}

   代码：

   let res = [];res  = res.concat({});// 等价于[].concat.apply([], [{}])

   注意：

   仔细对照方法一和方法二，两者思路完全一致——找到数据类型是数组的子元素，对其进行抹平处理，只不过实现的细节略有不同。

   唯一需要注意的地方就是拼接时数据的基本类型要以数组开始。

   三、apply+some

   既然方法二是方法一的变式，那个方法三也可以说是方法二的变式，但不在采用递归的方式，而是一层一层“拆除”嵌套的方式

   先来看看用到的API：

   • apply：调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。
   • some：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

   代码：

   arr = [].concat.apply([], arr);// 等价于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)

   注意：

   大家疑惑的点主要在apply，其实主要目的就是减少括号

   function flatten(arr) {
       while (arr.some(item => Array.isArray(item))) {
           // 只要存在数组类型的元素，就抹平一层
           arr = [].concat(...arr)
       }
       return arr;}

   在本例中：

   function flatten(arr) {
       return arr.toString().split(',').map(function(item){
           return +item    })}

   四、ES6展开运算符

   大家可能业也注意到了，方法一到方法三 我们不断的借助现有方法，以精简我们的代码量，本方法也是如此～

   我们利用ES6的展开运算符（用于取出参数对象的所有可遍历属性，拷贝到当前对象之中），继续精简方法三：

   代码：

   function flatten(arr) {
       return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}

   五、toString

   如果前面四个方法是我们可以实现的主流的方式，那么接下来的几个就是我们可以实现的“非主流”方式，直接上代码！

   function flatten(arr) {
       return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}

   注意：

   将数据转换类型存在类型的限制，如果原始数据是这样的：[1, ‘2’]，那么就会出现问题

   六、正则

   假如我们默认了类型会被转换这一缺陷，那么还可以通过更暴力里的方式来将数组扁平化：

    /*
    * @private
    * @param {Array} array 需要扁平化的数组
    * @param {number} depth 最多处理几层
    * @param {boolean} [isStrict] 是否严格处理函数
    * @param {Array} [result=[]] 输出的数组
    * @returns {Array}
    */function flatten(array, depth, isStrict, result) {
       result || (result = [])
       // 边界
       if (array == null) return result;
   
       for (const value of array) {
           if (depth > 0 && Array.isArray(value)) {
               if (depth > 1) {
                   flatten(value, depth - 1, isStrict, result)
               } else {
                   result.push(...value); // 只拆1层
               }
           } else if (!isStrict) {
               result[result.length] = value        }
       }
       return result;}

   注意：

   如果是纯数组，貌似没什么问题

   const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]

   但如果数组内存在对象，就需要消除JSON后的后果，这样更严谨一些～

   到这里，六种方法算是包括了大部分数组扁平化的实现，那么如果希望将我们的方法“升级”成工具怎么办？这时候我们就要“抄袭”一下loadsh了~

   

   七、实现自己的扁平化工具方法

   这里我们简化了loadsh里的flatten函数，具体改动我们来看代码：

   const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]

   1. 该方法提供了扁平化层数
   rrreee
   2. 该方法提供了扁平化后相反的效果
   rrreee

   isStrict, die beiden Ideen sind genau gleich – finden Sie die Unterelement des Arrays Der Datentyp ist Smooth it out, die Implementierungsdetails unterscheiden sich jedoch geringfügig.

   Das Einzige, worauf Sie achten müssen, ist, dass der Grundtyp der Daten beim Spleißen mit einem Array beginnen muss.

   Drei, wenden Sie + etwas anDa Methode zwei eine Variation von Methode eins ist, kann Methode drei auch als Variation von Methode zwei bezeichnet werden, sie ist jedoch nicht mehr rekursiv, sondern wird Schicht für Schicht „zerlegt“. Verschachtelungsmethode Werfen wir zunächst einen Blick auf die verwendete API: apply: Rufen Sie eine Funktion mit einem gegebenen Wert auf und stellen Sie ihn in Form eines Arrays (oder eines Array-ähnlichen Objekts) bereit. Parameter.

   some: Testet, ob mindestens ein Element im Array den bereitgestellten Funktionstest besteht. Es wird ein boolescher Wert zurückgegeben. Code: 🎜🎜rrreee 🎜 In diesem Beispiel: 🎜rrreee🎜🎜Vier. ES6-Spread-Operator🎜🎜🎜Vielleicht haben Sie bemerkt, dass wir von Methode eins bis Methode drei weiterhin vorhandene Methoden verwenden, um den Umfang unseres Codes zu optimieren ~🎜 🎜Wir verwenden den Spread-Operator von ES6 (wird verwendet, um alle übertragbaren Attribute des Parameterobjekts herauszunehmen und in das aktuelle Objekt zu kopieren), um die Optimierung von Methode drei fortzusetzen: 🎜🎜🎜Code: 🎜🎜rrreee🎜🎜5 🎜🎜Wenn die ersten vier Methoden die Mainstream-Methoden sind, die wir implementieren können, dann sind die nächsten paar die „Nicht-Mainstream“-Methoden, die wir implementieren können. Gehen Sie einfach zum Code! 🎜rrreee🎜🎜Hinweis: 🎜🎜🎜Bei der Konvertierung von Daten gibt es Typbeschränkungen: [1, '2'], dann gibt es Probleme🎜🎜🎜6. Regelmäßigkeit🎜🎜🎜Wenn wir Standard sind Zusätzlich zu dem Fehler, dass der Typ konvertiert wird, können Sie das Array auch auf gewalttätigere Weise reduzieren: 🎜rrreee🎜🎜Hinweis: 🎜🎜🎜Wenn es sich um ein reines Array handelt, scheint es kein Problem zu geben🎜rrreee🎜Aber Wenn das Array Objekte enthält, müssen die Konsequenzen von JSON beseitigt werden, damit es strenger ist ~ 🎜🎜 Zu diesem Zeitpunkt umfassen die sechs Methoden den größten Teil der Implementierung der Array-Reduzierung. Was ist also, wenn wir „ „Upgrade“ unserer Methode in ein Tool? Zu diesem Zeitpunkt müssen wir Lasten „plagiieren“sh~🎜🎜🎜🎜🎜7. Implementieren Sie Ihre eigene Flattening-Tool-Methode
   🎜Diese Methode sorgt nach dem Reduzieren für den gegenteiligen Effekt🎜🎜rrreee🎜Nachdem der Parameter isStrict aktiviert wurde, bleiben die freigelegten Elemente nach dem Reduzieren erhalten und die flachen Schichten werden entfernt . Element. 🎜🎜Beim Schreiben haben wir die Ideen zur flachen Verarbeitung verstanden und verfügen über bestimmte Implementierungsmöglichkeiten. Wenn Sie den obigen Code vollständig verstehen, sollte der flache Teil meiner Meinung nach für Sie nicht schwierig sein. Wir werden ihn im nächsten Artikel weiter untersuchen Methode des Ladensh~🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜Javascript🎜🎜🎜 (Video) 🎜🎜🎜

   Das obige ist der detaillierte Inhalt vonJavaScript-Thema 8: Array-Flattening. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!