JavaScript データのフラット化の詳細な説明

JavaScript データのフラット化の詳細な説明

フラット化とは何か

配列をフラット化すると、ネストされた配列 (ネストは任意の数のレイヤーにすることができます) を 1 つのレイヤーのみを持つ配列に変換します。

たとえば、配列をフラット化できる flatten という関数があるとします。その効果は次のようになります。

var arr = [1, [2, [3, 4]]];
console.log(flatten(arr)) // [1, 2, 3, 4]
ループ配列 + 再帰
ループ配列 + 再帰

実装のアイデア: 配列をループし、データ内に配列がある場合は、flatten 関数を再帰的に呼び出し (for ループを使用して平坦化)、concat で接続し、最後に結果を返します。

関数flatten(arr){
     var 結果 = [];
     for(var i = 0, len = arr.length; i < len; i++){
         if(Array.isArray(arr[i])){
             結果 = result.concat(flatten(arr[i]));
         }それ以外{
             結果をpush(arr[i]);
         }
     }
     結果を返します。
 }
 
flatten(arr) // [1,2,3,4]

再帰

最初に考えられるのは、配列要素をループすることです。配列のままであれば、メソッドを再帰的に呼び出すことができます。

   var arr = [1, [2, [3, 4]]];
     
    関数flatten(arr){
        var 結果 = [];
        (var i = 0, len = arr.length; i < len; i++) の場合 {
            Array.isArray(arr[i]) の場合 {
                結果 = result.concat(flatten(arr[i]))
            }
            それ以外 {
                結果.push(arr[i])
            }
        }
        結果を返します。
    }
 
 
コンソールログ(フラット化(arr))

トストリング

配列の要素がすべて数値である場合は、次の理由から toString メソッドの使用を検討できます。

[1, [2, [3, 4]]].toString() // "1,2,3,4"

toString メソッドを呼び出すと、コンマで区切られたフラットな文字列が返されます。これを分割して数値に変換し、フラット化を実現できます。

// 方法 2
var arr = [1, [2, [3, 4]]];
 
関数flatten(arr){
    arr.toString().split(',').map(function(item){ を返します。
        戻る +アイテム
    })
}
 
コンソールログ(フラット化(arr))
ただし、このメソッドの使用シナリオは非常に限られています。配列が [1, '1', 2, '2'] の場合、このメソッドは間違った結果を生成します。

減らす

配列を処理して値を返すので、コードを簡素化するために、reduce の使用を検討できます。

// 方法 3
var arr = [1, [2, [3, 4]]];
 
関数flatten(arr){
    戻り値 arr.reduce(function(prev, next){
        戻り値: prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
 
コンソールログ(フラット化(arr))
ES6 では、パラメータ オブジェクトのすべてのトラバース可能なプロパティを抽出し、現在のオブジェクトにコピーするスプレッド演算子が追加されました。

var arr = [1, [2, [3, 4]]];
console.log([].concat(…arr)); // [1, 2, [3, 4]]

この方法を使用して平坦化できるのは 1 つのレイヤーだけですが、この方向で考え続けると、次のようなメソッドを記述できます。

var arr = [1, [2, [3, 4]]];
 
    関数flatten(arr){
     
        (arr.some(item => Array.isArray(item))) の間 {
            arr = [].concat(...arr);
        }
     
        arr を返します。
    }
     
    コンソールログ(フラット化(arr))

アンダーコア

では、開発を容易にするために抽象フラット関数をどのように記述すればよいでしょうか? もう一度アンダースコアをコピーする時が来ました~

ここではソース コードとコメントが直接示されていますが、ここでの flatten 関数は最終的な _.flatten ではないことに注意してください。複数の API 呼び出しを容易にするために、フラット化のためにさらに構成が行われます。

	/**
	 * 配列の平坦化 * @param {Array} 入力 処理する配列 * @param {boolean} shallow 1 つのレイヤーのみを平坦化するかどうか * @param {boolean} strict 要素を厳密に処理するかどうか (後述) * @param {Array} 出力 これは再帰の便宜のために渡されるパラメーターです */

	関数flatten(入力、浅い、厳密、出力) {

    // 出力は再帰的に使用されるときに使用されます
    出力 = 出力 || [];
    var idx = 出力の長さ;

    (var i = 0, len = input.length; i < len; i++) の場合 {

        var 値 = 入力[i];
        // 配列の場合は処理します if (Array.isArray(value)) {
            // 1 つのレイヤーのみがフラット化されている場合は、配列を走査し、それに応じて出力を入力します
            (浅い)場合{
                var j = 0、len = 値.長さ;
                while (j < len) 出力[idx++] = 値[j++];
            }
            // すべてがフラット化されている場合は、再帰して処理された出力を渡し、出力を再帰的に処理します
            それ以外 {
                flatten(値、浅い、厳密、出力);
                idx = 出力の長さ;
            }
        }
        // 配列ではないので、strictの値に基づいて処理をスキップするか出力に入れるかを決定します
        それ以外の場合 (!strict){
            出力[idx++] = 値;
        }
    }

    出力を返します。

}

strict について説明します。コードを見ると、配列要素をトラバースするときに、要素が配列でない場合は strict 否定の結果が判断されることがわかります。strict が true に設定されている場合、処理されずにスキップされるため、配列以外の要素をフィルタリングできます。例:

var arr = [1, 2, [3, 4]];
console.log(flatten(arr, true, true)); // [3, 4]

では、厳密に設定すると何の役に立つのでしょうか?心配しないでください。まずは、shallow と strct のさまざまな値に対応する結果を見てみましょう。

shallow true + strict false : 通常のフラット レイヤー

shallow false + strict false : すべてのレイヤーを通常通り平坦化する

shallow true + strict true : 配列以外の要素を削除する

shallow false + strict true :[]を返す

アンダースコアのどのメソッドが基本関数 flatten を呼び出すかを見てみましょう。

_.平坦化

1 つ目は _.flatten です。

_.flatten = 関数(配列、浅い) {
    flatten(配列、浅い、false) を返します。
};
通常のフラット化では、配列以外の要素を削除する必要はありません。

_。連合

この関数は複数の配列を受け取り、渡された配列の結合を返します。

例えば:

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]

渡されたパラメータが配列でない場合はスキップされます。

_.union([1, 2, 3], [101, 2, 1, 10], 4, 5);
=> [1, 2, 3, 101, 10]

この効果を実現するには、渡されたすべての配列をフラット化してから重複を削除します。渡すことができるのは配列のみなので、strict を直接 true に設定して、渡された配列以外の要素をスキップすることができます。

関数 unique(配列) {
   Array.from(new Set(array)) を返します。
}
 
_.union = 関数() {
    unique(flatten(arguments, true, true)) を返します。
}

_。違い

strict をいじるのは便利だと思いますか? _.difference を見てみましょう:

構文は次のとおりです。

_.difference(配列、*その他)

その効果は、他の複数の配列に存在しない要素を配列から取り出すことです。 _.union と同様に、配列ではない要素は除外されます。

例えば:

_.difference([1, 2, 3, 4, 5], [5, 2, 10], [4], 3);
=> [1, 3]

実装も非常にシンプルで、他の配列をフラット化し、フラット化された配列にない配列内の値をフィルター処理します。

関数の差(配列、...残り) {
 
    残り = 平坦化 (残り、 true、 true);
 
    配列.filter(function(item){ を返す
        rest.indexOf(item) === -1 を返します。
    })
}
もし役に立つなら、ぜひフォローしてください。一緒に議論し、学び、一緒に進歩できるように、技術ドキュメントを定期的に更新します。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

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

<<:  CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

>>:  フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

推薦する

jsを呼び出すいくつかの方法が整理され、使用が推奨されています

a タグではクリック イベントがよく使用されます。 1. href="javascript...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

CentOS7 カーネル カーネル5.0 バージョンアップグレード

アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

Reactの二次連携を実現する方法

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

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

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

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析

1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...

Win10 への MySQL 5.7 のインストール MSI 版のチュートリアル(画像とテキスト付き)

主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

MySQLクエリプランでken_lenの値を計算する方法

key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...