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]
コンソールログ(ツリーデータ)

これは再帰によっても実現できますが、これについては詳細には説明しません。

最終的なデータ構造を次の図に示します。