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

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

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

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

//背景からオブジェクト配列を取得し、オブジェクトの種類に応じてグループ化し、ツリーにマージしてデータを表示します。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' }
        ]
    }
]

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

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