前端js重組樹形結構數據方法封裝

　　不知道大家平時工作中，有沒有遇到這樣一種情況：后端接口返回的數據，全都是一維的數組，都是平鋪直敘式的數據，業務需求卻要你實現樹形結構的功能。那么，針對這種情況該怎么辦呢？是跟后台好好溝通一下呢，還是溝通一下呢 :）

　　下面我將封裝一種重組樹形結構數據的方法，希望能夠給大家帶來一點幫助！

/**
 * 
 * @param {Array} data 
 * @param {string} pid 子樹找父級的標識，這里面默認子樹的標識為id,如果不為id，就再傳一個子樹id        
                       標識
 * @param {string} child 自定義子樹字段名稱
 * @returns 
 */
export function makeTree(data,pid,child){
  let parents = data.filter(p => p[pid] === 0),
      children = data.filter(c => c[pid] !== 0);
  dataToTree(parents, children);
  return parents;
 
  function dataToTree(parents, children){
    parents.map(p => {
      children.map((c, i) => {
        if(c[pid] === p.id){
          let _children = JSON.parse(JSON.stringify(children));
          _children.splice(i, 1);
          dataToTree([c], _children);
          if(p[child]){
            p[child].push(c);
          }else{
            p[child] = [c];
          }
        }
      })
    })
  }
}

效果：

 

 

 輸出：

 

 

 以上就完成對樹形結構數據的封裝啦！下一篇是對樹形結構數據降維的方法封裝：https://www.cnblogs.com/coder--wang/p/15042154.html

更多項目中常見的方法封裝，傳送門：https://github.com/wangruibin666/wang-utils 

 

腳踏實地行，海闊天空飛~