配列をフラット化する 5 つの JavaScript の方法

1. 配列の平坦化の概念

配列の平坦化は、多次元配列を 1 次元配列に変換するプロセスです。

[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

2. 実装

1. 減らす

配列内の各項目を走査します。値が配列の場合は再帰的に走査し、それ以外の場合はconcat 。

関数flatten(arr){  
    戻り値 arr.reduce((結果, 項目)=> {
        結果を返します。concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

reduce 、関数を累算器として受け取り、配列内の各値 (左から右へ) を単一の値に減らす Array のメソッドです。
reduceは2つのパラメータ、コールバック関数、 totalに渡される初期値が含まれます。

// 配列内の値の合計を求めます: 
arr.reduce((total, item)=> { // total は前の計算結果、item は配列内の各項目の値です。 return total + item;
}, 0);

2. toString と split

配列のtoStringメソッドを呼び出して配列を文字列に変換し、splitを使用して配列に戻します。

関数flatten(arr){
    arr.toString().split(',').map(function(item) { を返します。
        Number(item)を返します。
    })
}

分割後に形成される配列内の各項目は文字列であるため、配列を走査して各項目を数値型に変換するには map メソッドが必要です。

3. 結合と分割

上記のtoStringと同様に、 join配列を文字列に変換することもできます。

関数flatten(arr){
    戻り値 arr.join(',').split(',').map(function(item) {
        parseInt(item) を返します。
    })
}

4. 再帰

各項目を再帰的に走査し、配列の場合は走査を続行し、そうでない場合はconcat

関数flatten(arr){
    var res = [];
    arr.map(アイテム => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } それ以外 {
            res.push(アイテム);
        }
    });
    res を返します。
}

5. スプレッド演算子

es6のスプレッド演算子は2次元配列を1次元配列に変換できる

[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]

この結果に基づいて、トラバーサルを行うことができます。arr arr配列が含まれている場合は、配列がなくなるまで拡張演算子を 1 回使用します。

関数flatten(arr){
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    arr を返します。
}

要約:

これで、配列をフラット化する 5 つのJavaScript方法についての記事は終了です。JavaScript で配列をフラットJavaScriptする方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: