フラット化とは何か配列をフラット化すると、ネストされた配列 (ネストは任意の数のレイヤーにすることができます) を 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 メソッドの使用を検討できます。
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 では、パラメータ オブジェクトのすべてのトラバース可能なプロパティを抽出し、現在のオブジェクトにコピーするスプレッド演算子が追加されました。
この方法を使用して平坦化できるのは 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 に設定されている場合、処理されずにスキップされるため、配列以外の要素をフィルタリングできます。例:
では、厳密に設定すると何の役に立つのでしょうか?心配しないでください。まずは、shallow と strct のさまざまな値に対応する結果を見てみましょう。
アンダースコアのどのメソッドが基本関数 flatten を呼び出すかを見てみましょう。 _.平坦化1 つ目は _.flatten です。 _.flatten = 関数(配列、浅い) { flatten(配列、浅い、false) を返します。 }; 通常のフラット化では、配列以外の要素を削除する必要はありません。 _。連合この関数は複数の配列を受け取り、渡された配列の結合を返します。 例えば:
渡されたパラメータが配列でない場合はスキップされます。
この効果を実現するには、渡されたすべての配列をフラット化してから重複を削除します。渡すことができるのは配列のみなので、strict を直接 true に設定して、渡された配列以外の要素をスキップすることができます。 関数 unique(配列) { Array.from(new Set(array)) を返します。 } _.union = 関数() { unique(flatten(arguments, true, true)) を返します。 } _。違いstrict をいじるのは便利だと思いますか? _.difference を見てみましょう: 構文は次のとおりです。
その効果は、他の複数の配列に存在しない要素を配列から取り出すことです。 _.union と同様に、配列ではない要素は除外されます。 例えば:
実装も非常にシンプルで、他の配列をフラット化し、フラット化された配列にない配列内の値をフィルター処理します。 関数の差(配列、...残り) { 残り = 平坦化 (残り、 true、 true); 配列.filter(function(item){ を返す rest.indexOf(item) === -1 を返します。 }) } もし役に立つなら、ぜひフォローしてください。一緒に議論し、学び、一緒に進歩できるように、技術ドキュメントを定期的に更新します。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ
>>: フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法
a タグではクリック イベントがよく使用されます。 1. href="javascript...
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...
アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...
1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...
主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...
序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...
この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...
mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...