js樹形數據結構的扁平化

前面我們封裝了一維數組(具備樹形結構相關屬性)處理成樹形結構的方法:https://www.cnblogs.com/coder--wang/p/15013664.html

接下來我們來一波反向操作，封裝一個可以將樹形結構的數據扁平化的方法。這種場景在業務中還是很常見的，比如一個級聯選擇器，有時候你需要判斷某個id或者某個字段，是否存在於該級聯選擇器的多維數組中，亦或者你需要將該多維數組中的字段進行處理，那么此時，對這個樹形的復雜數組進行降維就顯得很有必要了！下面直接上代碼：

/**
 * 
 * @param {Array} arrs 樹形數據
 * @param {string} childs 樹形數據子數據的屬性名,常用'children'
 * @param {Array} attrArr 需要提取的公共屬性數組(默認是除了childs的全部屬性)
 * @returns 
 */
function extractTree(arrs,childs,attrArr){
  let attrList = [];
  if(!Array.isArray(arrs)&&!arrs.length)return [];
  if(typeof childs !== 'string')return [];
  if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
    attrList = Object.keys(arrs[0]);
    attrList.splice(attrList.indexOf(childs), 1);
  }else{
    attrList = attrArr;
  }
  let list = [];
  const getObj = (arr)=>{
    arr.forEach(function(row){
      let obj = {};
      attrList.forEach(item=>{
        obj[item] = row[item];
      });
      list.push(obj);
      if(row[childs]){
        getObj(row[childs]);
      }
    })
    return list;
  }
  return getObj(arrs);
}

運行：

 

 收工！對樹形結構數據的組裝和降維都已經實現，希望給大家帶來一些幫助，有bug或不足歡迎給我留言哦~

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

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