フラット化とは何か配列をフラット化すると、ネストされた配列 (ネストは任意の数のレイヤーにすることができます) を 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ページに埋め込む方法
この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...
まずmysqlの圧縮バージョンをダウンロードします。公式ダウンロードアドレスは123WORDPRES...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...
目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...
目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...
1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...
簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...
目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...
*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...
必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...