js 实现将数组中的数据根据某个属性重新进行归类、类似父子级菜单

最新推荐文章于 2024-03-05 16:10:27 发布

原创最新推荐文章于 2024-03-05 16:10:27 发布 · 682 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

js 专栏收录该内容

18 篇文章

订阅专栏

1、实现效果

// 原数组
const list = [
	 {name: 'A', id: 1, desc: 'test'},
	 {name: 'B', id: 2, desc: 'test'},
	 {name: 'C', id: 3, desc: 'test'},
	 {name: 'D', id: 4, desc: 'test'},
	 {name: 'A', id: 5, desc: 'test'},
	 {name: 'C', id: 6, desc: 'test'},
	 {name: 'B', id: 7, desc: 'test'},
	 {name: 'B', id: 8, desc: 'test'},
	 {name: 'A', id: 9, desc: 'test'},
	 {name: 'D', id: 10, desc: 'test'},
]

// 重组之后的数组
[
   {
     "name": "A",
     "id": 1,
     "desc": "test",
     "children": [
       {"name": "A", "id": 1, "desc": "test"},
       {"name": "A", "id": 5, "desc": "test"},
       {"name": "A", "id": 9, "desc": "test"}
     ]
   },
   {
     "name": "B",
     "id": 2,
     "desc": "test",
     "children": [
       {"name": "B", "id": 2, "desc": "test"},
       {"name": "B", "id": 7, "desc": "test"},
       {"name": "B", "id": 8, "desc": "test"}
     ]
   },
   {
     "name": "C",
     "id": 3,
     "desc": "test",
     "children": [
       {"name": "C", "id": 3, "desc": "test"},
       {"name": "C", "id": 6, "desc": "test"}
     ]
   },
   {
     "name": "D",
     "id": 4,
     "desc": "test",
     "children": [
       {"name": "D", "id": 4, "desc": "test"},
       {"name": "D", "id": 10, "desc": "test"}
     ]
   }
]

2、代码实现

const list = [
  {name: 'A', id: 1, desc: 'test'},
  {name: 'B', id: 2, desc: 'test'},
  {name: 'C', id: 3, desc: 'test'},
  {name: 'D', id: 4, desc: 'test'},
  {name: 'A', id: 5, desc: 'test'},
  {name: 'C', id: 6, desc: 'test'},
  {name: 'B', id: 7, desc: 'test'},
  {name: 'B', id: 8, desc: 'test'},
  {name: 'A', id: 9, desc: 'test'},
  {name: 'D', id: 10, desc: 'test'},
]
let newList = []
list.forEach(item => {
  let status = newList.find(el => el.name === item.name) // 判断第一层级，用name属性来判断
  if (status) {
    status.children.push({...item}) // 将数据插入到第二层级中
  } else {
    let obj = {...item, children: [{...item}]}
    newList.push(obj)
  }
})
console.log('newList', newList);