意味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クエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明
React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...
少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...
関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...
Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...
目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...
CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...
目次序文1. ヌル合体演算子2. ??= 空代入演算子3. ?. オプション連鎖演算子4. ?: 三...
序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...
Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...
注意: 3 番目の方法は XSell でのみ使用され、finalsell では使用できません。方法1...
この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...
LinuxホストにSSHサーバーをインストールするには、次のターミナルコマンドを使用します: sud...
序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...