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

配列をフラット化する 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS配列重複排除の詳細
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • JavaScript 配列重複排除問題の詳細な研究
  • JavaScript 配列重複排除ソリューション
  • jsは配列の平坦化を実装します
  • JavaScript データのフラット化の詳細な説明
  • JavaScript インタビュー: 配列の平坦化メソッドを実装する方法
  • JavaScript 配列の重複排除とフラット化関数の紹介

<<:  docker-compose が遅すぎる場合の解決策の詳細な説明

>>:  MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。

推薦する

Dockerコンテナを停止および削除できない問題の解決策

実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

HTMLページ間で値を渡す問題の解決策

初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...

Kali Linux Vmware 仮想マシンのインストール (図とテキスト)

準備: 1. VMwareワークステーションソフトウェアをインストールする2. Kali Linux...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

JS のあらゆる場所で絶対等価演算子の使用をやめる

目次概要1. NULL値のテスト2. ユーザー入力を読み取る導入事実の根源はどこにあるのでしょうか?...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...

MySQL トリガー: 複数のトリガー操作の作成例の分析

この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...

docker コンペ応募でよく使われるコマンドのまとめ

アカウントにログイン DOCKER_REGISTRY=registry.cn-hangzhou.al...

JavaScriptのプリミティブ値とラッパーオブジェクトの詳細な紹介

目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...