前端常用优秀代码案例

1 菜单列表数组转树结构

let arr = [{
    id: 1,
    pid: 0
}, {
    id: 2,
    pid: 0
}, {
    id: 3,
    pid: 1
}, {
    id: 4,
    pid: 2
}, {
    id: 5,
    pid: 3
}]

function next(pid, arr) {
    return arr.filter(item => item.pid === pid).map(item => ({
        ...item,
        children: next(item.id, arr)
    }))
}

console.log(JSON.stringify(next(0,arr))) //[{"id":1,"pid":0,"children":[{"id":3,"pid":1,"children":[{"id":5,"pid":3,"children":[]}]}]},{"id":2,"pid":0,"children":[{"id":4,"pid":2,"children":[]}]}]

2 # js 将数组中相同的元素进行分组

function sortClass(sortData){
  const groupBy = (array, f) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.name; // 返回需要分组的对象
  });
  return sorted;
};


var data=[
	{id:1,  name:'小明',type:'分类'},
	{id:2,  name:'大明',type:'分钱'},
	{id:3,  name:'中明',type:'分兵'},
	{id:4,  name:'小明',type:'分分'},
	{id:5,  name:'雷明',type:'分兵'},
	{id:6,  name:'小明',type:'分兵'},
	{id:7,  name:'出明',type:'分钱'},
	{id:8,  name:'中明',type:'分钱'},
	{id:9,  name:'出明',type:'分分钱'},
	{id:10,  name:'雷明',type:'分分钱'},
]
sortClass(data)