使用JavaScript怎么實(shí)現(xiàn)一個(gè)無(wú)限層級(jí)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

目前成都創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、農(nóng)安網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

js代碼：把扁平數(shù)據(jù)轉(zhuǎn)成樹(shù)形數(shù)據(jù)

function setTreeData(source){
  let cloneData = JSON.parse(JSON.stringify(source))   // 對(duì)源數(shù)據(jù)深度克隆
  return cloneData.filter(father=>{           // 循環(huán)所有項(xiàng)，并添加children屬性
    let branchArr = cloneData.filter(child=> father.id == child.parentId);  // 返回每一項(xiàng)的子級(jí)數(shù)組
    branchArr.length>0 ? father.children=branchArr : ''  //給父級(jí)添加一個(gè)children屬性，并賦值
    return father.parentId==0;   //返回第一層
  });
}

根據(jù)網(wǎng)友給我指出的問(wèn)題，之前的算法會(huì)影響到源數(shù)據(jù)，之后我對(duì)獲取的數(shù)據(jù)進(jìn)行了深度克隆，完美解決。

封裝函數(shù)：

function treeData(source, id, parentId, children){  
  let cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(father=>{
    let branchArr = cloneData.filter(child => father[id] == child[parentId]);
    branchArr.length>0 ? father[children] = branchArr : ''
    return father[parentId] == 0    // 如果第一層不是parentId=0，請(qǐng)自行修改
  })
}
 
// 調(diào)用時(shí)，字段名以字符串的形式傳參，如treeData(source, 'id', 'parentId', 'children')

實(shí)例1：使用element-ui的組件制作一個(gè)樹(shù)形多級(jí)嵌套伸縮菜單欄

實(shí)現(xiàn)效果：

vue組件：

看完上述內(nèi)容，你們掌握使用JavaScript怎么實(shí)現(xiàn)一個(gè)無(wú)限層級(jí)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！