常用的前端处理后端数据

常用的前端处理后端数据

// =============对象数组转换================

{firstName: ‘Andy’} => [{name: ‘firstName’, value: ‘Andy’}]

let obj = { firstName: "Andy", lastName: "Wong" };
let arr = [];
for (k in obj) {
  arr.push({ name: k, value: obj[k] });
}
console.log(arr);

[ { label: ‘男’, value: 0 }, { label: ‘女’, value: 1 } ]

互转

{0: ‘男’, 1:’女’}

let list = [  
  { label: "男", value: 0 },
  { label: "女", value: 1 },
];

let obj = { 0: "男", 1: "女" };

//  =======forEach方式=======
function list2Obj(list) {
  let obj = {}
  list.forEach((item)=>{
    obj[item.value] = item.label
  })
  return obj
}
//  =======reduce方式=======
function list2Obj(list) {
  return list.reduce((obj, cur)=>{
    obj[cur.value] = cur.label
    console.log(obj);
    return obj
  },{})

}

list2Obj(list)

// =============树转数组对象===============

var tree = [
  {
    id: "-1",
    pid: "",
    name: "首层",
    item: [
      {
        id: "1",
        pid: "-1",
        name: "1层1",
        item: [
          { id: "3", pid: "1", name: "1层1-1"},
          { id: "4", pid: "1", name: "1层1-2"},
        ],
      },
      { id: "2", pid: "-1", name: "1层2" },
    ],
  },
];

var list = [
  { id: "-1", pid: "", name: "首层" },
  { id: "1", pid: "-1", name: "1层1" },
  { id: "2", pid: "-1", name: "1层2" },
  { id: "3", pid: "1", name: "1层1-1" },
  { id: "4", pid: "1", name: "1层1-2" },
];

//=============树转数组对象===============

function tree2List(tree, list = []) {
  tree.forEach(ele => {
    const { item, ...props } = ele;
      //添加除了item的属性
    list.push(props);
    if (item) {
      //递归将所有节点加入到结果集中
      tree2List(item, list);
    }
  })

  console.log(list) 
  return list
}

//================reduce方法实现====================

function tree2List(tree) {
  return tree.reduce((res, ele)=>{
    const {item, ...props} = ele
    return res.concat(props, item && item.length?tree2List(item):[])
  },[])
}

var result = tree2List(tree);
console.log(result)

//=============数组对象转树===============

var tree = []
function list2Tree(list, tree = []) {
  let obj = {}

  for(let ele of list) {
    let newEle = obj[ele.id] = {...ele,item:[]}
      console.log(newEle)
    if(obj[ele.pid]){
      let parent = obj[ele.pid]
      console.log("======")
      console.log(parent)
      parent.item.push(newEle)
    } else {
      tree.push(newEle)
    }
  }
    console.log(tree)
  return tree
}

function list2Tree(list,tree=[]) {

  let obj = {};
  list.forEach((ele) => {
    obj[ele.id] = ele;
  });
    console.log(obj)
  list.forEach((ele) => {
    let parent = obj[ele.pid];
      console.log(parent); //item.pid 为" "时 返回undefined
    if (parent) {
        console.log(parent)
      (parent.item || (parent.item = [])).push(ele);
      console.log(parent);
    } else {
      //  这里push的item是pid为undefined的数据
      tree.push(ele);
    }
  });
  console.log(tree);
  return tree;
}
list2Tree(list, tree=[]);