配列をフラット化する 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) の違いと概要について簡単に説明します。

推薦する

Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード

1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

ページリファクタリングスキル - コンテンツ

雑談はここまでにして、インターネット上で見つかる高性能な Yahoo ウェブサイトを構築するための数...

Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

Mysql 日付クエリの詳細な紹介

現在の日付を照会する CURRENT_DATE() を選択します。 CURDATE() を選択する;...

MySQL 5.7.17 winx64 のインストールと設定のチュートリアル

今日、MySQL データベースをコンピューターに再度インストールしました。システムを再インストールす...

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)

オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...