意味Reduce() メソッドは、配列内の各要素に対して (昇順で) 指定したリデューサー関数を実行し、結果を 1 つの戻り値にまとめます。 Reduce() は、forEach()、map()、filter() と同様に、配列内の各項目を走査しますが、reduce() は、以前に走査した配列項目の結果と現在走査している項目を操作できます。 文法配列.reduce(関数(前, 現在, インデックス, 配列){ ... }, 初期化); コールバック関数のパラメータ:
共通パラメータ: prev と cur 注: コールバック関数が初めて実行される場合、prev と cur の値には 2 つのケースがあります。reduce() が呼び出されたときに初期値 init が指定されている場合、prev は init 値を取得し、cur は配列の最初の値を取得し、インデックスは 0 から始まります。初期値 init が指定されていない場合、prev は配列の最初の値を取得し、cur は配列の 2 番目の値を取得し、インデックスは 1 から始まります。 例1. 初期値initが渡されない定数arr = [1, 3, 5, 7] arr.reduce(関数(prev, cur, index, arr){ console.log(前、現在、インデックス) 前へ + 次へ }) 各呼び出しのパラメータと戻り値は次のとおりです。
初期値が渡されていないため、インデックスは 1 から始まります。コールバックは 3 回呼び出されます。最初は、配列の最初の項目である prev の値が 1 で、cur の値が 3 です。これらを加算した後、戻り値 4 が次のコールバックの prev 値として使用されます。その後、次のコールバックのラウンドが完了して返されるまで、次のラウンドのコールバックが続行されます。 2. 初期値を渡す場合定数arr = [1, 3, 5, 7] arr.reduce(関数(prev, cur, index, arr){ console.log(前、現在、インデックス) 前へ + 次へ }, 10) 各呼び出しのパラメータと戻り値は次のとおりです。
3. アレイの重複排除定数 arr = ['ab'、'v'、'd'、'ab'、'h'、'e'、'dc'、'e'、'e'、'f'] const newArr = arr.reduce(function(prev, cur){ !prev.includes(cur) && prev.push(cur) 前へ戻る }, []) console.log(newArr) // ["ab", "v", "d", "h", "e", "dc", "f"] 実行する手順は次のとおりです。
4. Reduceを使用して配列内のオブジェクトをグループ化して結合する//背景からオブジェクト配列を取得し、オブジェクトの種類に応じてグループ化し、ツリーにマージしてデータを表示します。const dataArr = [ { タイプ: 'ガバナンス レイヤー'、名前: 'hive_82'、予約: '2'、ID: 1 }、 { タイプ: 'オリジナル データ レイヤー'、名前: 'qwe'、予約: '1'、ID: 2 }、 { タイプ: 'ソースレイヤー'、名前: 'mysql_exchangis'、予約: '3'、ID: 3 }、 { タイプ: 'ガバナンス レイヤー'、名前: 'links_188'、予約: '1'、ID: 4 }、 { タイプ: 'ソース レイヤー'、名前: 'mysql_ces'、予約: '2'、ID: 5 } ] const treeData = dataArr.reduce((cur, next) => { const obj = cur.find(curItem => curItem.label === next.type) もし(オブジェクト){ if (obj.children.indexOf(next.id) === -1) { //重複排除 obj.children.push({ ...次、 ラベル: next.name }) } } それ以外 { 定数newObj = { ラベル: next.type, 子供たち: [{ ...次、 ラベル: next.name }] } cur.push(新しいオブジェクト) } 戻る }, []) // マージ後の結果: ツリーデータ = [ { ラベル: 「ガバナンス」、 子供たち: [ { タイプ: 'ガバナンス レイヤー'、名前: 'hive_82'、予約: '2'、ID: 1、ラベル: 'hive_82' }, { タイプ: 'ガバナンス レイヤー'、名前: 'links_188'、予約: '1'、ID: 4、ラベル: 'links_188' } ] }, { ラベル: '元のデータ レイヤー'、 子供たち: [ { タイプ: 'オリジナル データ レイヤー'、名前: 'qwe'、予約: '1'、ID: 2、ラベル: 'qwe' } ] }, { ラベル: 'ソース レイヤー'、 子供たち: [ { タイプ: 'ソースレイヤー'、名前: 'mysql_exchangis'、予約: '3'、ID: 3、ラベル: 'mysql_exchangis' }, { タイプ: 'ガバナンス レイヤー'、名前: 'mysql_ces'、予約: '2'、ID: 5、ラベル: 'mysql_ces' } ] } ] 5. メニューバックエンドから返されたメニュー構造をreduceで処理するこのデータは、parentId に基づいて階層構造に変換する必要があります。 方法1: 定数データArr = [ {id: '18'、name: 'パスワードのリセット'、parentId: '30'、parentName: 'ユーザー管理'}、 {id: '13'、名前: '監査ログ'、親 ID: '29'、親名: 'システム管理'}、 {id: '29'、名前: 'システム管理'、親 ID: '0'、親名: null}、 {id: '14'、名前: '変更'、親 ID: '33'、親名: '部門管理'}、 {id: '2'、名前: 'ユーザーリスト'、親ID: '30'、親名: 'ユーザー管理'}、 {id: '30'、名前: 'ユーザー管理'、親 ID: '29'、親名: 'システム管理'}、 {id: '33'、名前: '部門管理'、親 ID: '0'、親名: null}、 {id: '37'、名前: 'ユーザーの追加'、親 ID: '30'、親名: 'ユーザー管理'}、 {id: '6'、名前: '追加'、親ID: '33'、親名: '部門管理'}、 {id: '7'、name: '削除'、parentId: '33'、parentName: '部門管理'} ] //メニューIDのマッピング関係を作成する const idMapping = dataArr.reduce((prev, next, i) => { 前[次.id] = i 前へ戻る }, {}) 定数ツリーデータ = [] dataArr.map(el => { // 最初のレベルのメニューif (el.parentId === '0') { treeData.push(el) 戻る } // マッピングを通じて親要素を見つける const parentEl = dataArr[idMapping[el.parentId]] // 現在の要素を親要素の `children` 配列に追加します。parentEl.children = [...(parentEl.children || []), el] }) コンソールログ(ツリーデータ) 方法2: //parentIdに基づいてマッピング関係を作成する const result = dataArr.reduce((prev, next) => { prev[next.parentId] ? prev[next.parentId].push(next) : prev[next.parentId] = [next]; 前に戻る; }, {}); Object.keys(結果).map(キー => { 結果[キー].map((item, i) => { 結果[item.id] ? item.children = 結果[item.id] : '' }); }) this.treeData = 結果[0] コンソールログ(ツリーデータ) これは再帰によっても実現できますが、これについては詳細には説明しません。 最終的なデータ構造を次の図に示します。 以上が、JS が Reduce() メソッドを使用してツリー構造データを処理する方法の詳細です。JS の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
>>: MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明
マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...
目次1. オプションの連鎖演算子 [? .】 2. 論理的な空の代入 (?? =) 3. 論理和代入...
最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...
参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...
MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...
1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...
多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...
システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...
以前、https://www.jb51.net/article/205922.htm で、Docke...
Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...
この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...
mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...
序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...
この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...