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))

減らす

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

// 方法 3
var arr = [1, [2, [3, 4]]];
 
関数flatten(arr){
    戻り値 arr.reduce(function(prev, next){
        戻り値: prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
 
コンソールログ(フラット化(arr))

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 のその他のコンテンツにも注目していただければ幸いです。