JSはreduce()メソッドを使用してツリー構造データを処理します

JSはreduce()メソッドを使用してツリー構造データを処理します

意味

Reduce() メソッドは、配列内の各要素に対して (昇順で) 指定したリデューサー関数を実行し、結果を 1 つの戻り値にまとめます。

Reduce() は、forEach()、map()、filter() と同様に、配列内の各項目を走査しますが、reduce() は、以前に走査した配列項目の結果と現在走査している項目を操作できます。

文法

配列.reduce(関数(前, 現在, インデックス, 配列){
    ...
}, 初期化);

コールバック関数のパラメータ:

  • prev 必須です。コールバックが呼び出されたときの戻り値、または初期値 init を示します。
  • cur 必須。現在の要素を表します。
  • インデックス オプション。現在の要素のインデックスを示します。
  • 配列は元の配列を表します。
  • init オプション。コールバック関数の最初の呼び出しの最初の引数として使用される初期値。

共通パラメータ: 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回目1 3 1 [1、3、5、7] 4
2回目4 5 2 [1、3、5、7] 9
3位9 7 3 [1、3、5、7] 16

初期値が渡されていないため、インデックスは 1 から始まります。コールバックは 3 回呼び出されます。最初は、配列の最初の項目である prev の値が 1 で、cur の値が 3 です。これらを加算した後、戻り値 4 が次のコールバックの prev 値として使用されます。その後、次のコールバックのラウンドが完了して返されるまで、次のラウンドのコールバックが続行されます。

2. 初期値を渡す場合

定数arr = [1, 3, 5, 7]
arr.reduce(関数(prev, cur, index, arr){
    console.log(前、現在、インデックス)
    前へ + 次へ
}, 10)

各呼び出しのパラメータと戻り値は次のとおりです。

折り返し電話前へ索引配列戻り値
1回目10 1 0 [1、3、5、7] 11
2回目11 3 1 [1、3、5、7] 14
3位14 5 2 [1、3、5、7] 19
4番目19 7 3 [1、3、5、7] 26

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"]

実行する手順は次のとおりです。

  • 空の配列を初期化する
  • 初めて呼び出されたとき、prev は初期値、つまり空の配列であり、cur は配列の最初の項目 arr[1] です。次に、cur がすでに存在するかどうかを確認するために prev を検索します。存在しない場合は、項目を prev に追加し、prev は戻って次のコールバックに入ります。
  • 2 番目のコールバックでは、prev は最初のコールバックの戻り値、cur は配列 arr[2] の 2 番目の項目です。次に、cur がすでに存在するかどうかを確認するために prev を検索します。存在しない場合は、項目を prev に追加し、prev が戻って次のコールバックに入ります。
  • 最後に、前の配列を返します

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 の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • JavaScript データ構造: ハッシュテーブルの作成 (1)
  • JavaScript データ構造辞書メソッド
  • JavaScript データ構造コレクションの作成 (2)
  • JavaScript データ構造コレクションの作成 (1)
  • JavaScript におけるマップデータ構造の詳細な説明
  • Go言語のデータ構造をJSONに変換する
  • フラットデータをツリー構造に変換するための JavaScript の効率的なアルゴリズム
  • js は無限階層ツリーデータ構造を実現します (革新的なアルゴリズム)
  • JavaScript データ構造: ハッシュテーブルの作成 (2)

<<:  MySQL挿入パフォーマンスを最適化する方法の例

>>:  MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明

推薦する

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...

JavaScript演算子の使用に関するヒントをいくつか共有します

目次1. オプションの連鎖演算子 [? .】 2. 論理的な空の代入 (?? =) 3. 論理和代入...

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

MySQL 8.0.22 のダウンロード、インストール、設定方法のグラフィックチュートリアル

参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...

MySQLでデータをエクスポートするいくつかの方法の詳細な説明

MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...

HTML の順序なしリストタグと順序付きリストタグの使用例

1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...

ウェブデザイナーもウェブコーディングを学ぶ必要がある

多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...

例を通してMySQLの更新がテーブルをロックするかどうかを判定する

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...

Linux でタスク用のカスタム システム トレイ インジケーターを作成する

システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...

DockerコンテナにNFS共有ディレクトリをマウントする実装

以前、https://www.jb51.net/article/205922.htm で、Docke...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

星のきらめき効果を実現するネイティブ js

この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...

時間のかかるMySQLレコードのSQL例の詳細な説明

mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Excel ファイルを MySQL データベースにインポートする方法

この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...