标签：name 树状 tree pid js item job label id
数组转成对象
const arr = [
{ label: '男', value: 0 },
{ label: '女', value: 1 }
]
转换为：
{0: '男', 1:'女'}
具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const arr = [
{ label: '男', value: 0 },
{ label: '女', value: 1 }
]
function f(arr) {
// reduce
return arr.reduce((sum, item) => {
// 利用对象的新增，给对象传值
sum[item['value']] = item['label']
return sum
}, {})
}
const obj = f(arr) // obj ===> {0: '男', 1:'女'}
console.log(obj)
</script>
</body>
</html>
对象转成数组
const obj = { 0: '男', 1: '女' }
转换为：
[{label: '男', value: 0},{label: '女', value: 1}]
具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const obj = { 0: '男', 1: '女' }
function f(obj) {
// 写代码
let arr = [] // 由于最终结果要的是一个数组，所以先定义一个空数组
let newObj = {} // 数组里面的每一项是个对象，所以定义一个空对象
for (let key in obj) {
// 遍历参数对象，把对应的键传给定义的对象的 value ，把对应的值给定义的 label
newObj = { label: obj[key], value: key * 1 }
// 把得到的新对象添加到定义好的空数组中
arr.push(newObj)
}
// return 最后的结果
return arr
}
const arr = f(obj) // arr ===> [{label: '男', value: 0},{label: '女', value: 1}]
console.log(arr)
</script>
</body>
</html>
数组转成树
const data =
[
{id:"01", name: "张大大", pid:"", job: "项目经理"},
{id:"02", name: "小亮", pid:"01", job: "产品leader"},
{id:"03", name: "小美", pid:"01", job: "UIleader"},
{id:"04", name: "老马", pid:"01", job: "技术leader"},
{id:"05", name: "老王", pid:"01", job: "测试leader"},
{id:"06", name: "老李", pid:"01", job: "运维leader"},
{id:"07", name: "小丽", pid:"02", job: "产品经理"},
{id:"08", name: "大光", pid:"02", job: "产品经理"},
{id:"09", name: "小高", pid:"03", job: "UI设计师"},
{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
{id:"11", name: "小华", pid:"04", job: "后端工程师"},
{id:"12", name: "小李", pid:"04", job: "后端工程师"},
{id:"13", name: "小赵", pid:"05", job: "测试工程师"},
{id:"14", name: "小强", pid:"05", job: "测试工程师"},
{id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]
转换为：
data: [{
label: '张大大',
children: [
{
label: '小亮',
children: [{label: '小丽'}，{label: '大光'}]
},
{
label: '小美',
children: [{label: '小高'}]
},
{
label: '老马',
children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
},
{
label: '老王',
children: [{label: '小赵'}，{label: '小强'}]
},
{
label: '老李',
children: [{label: '小涛'}]
}
]
}]
具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const data = [
{ id: '01', name: '张大大', pid: '', job: '项目经理' },
{ id: '02', name: '小亮', pid: '01', job: '产品leader' },
{ id: '03', name: '小美', pid: '01', job: 'UIleader' },
{ id: '04', name: '老马', pid: '01', job: '技术leader' },
{ id: '05', name: '老王', pid: '01', job: '测试leader' },
{ id: '06', name: '老李', pid: '01', job: '运维leader' },
{ id: '07', name: '小丽', pid: '02', job: '产品经理' },
{ id: '08', name: '大光', pid: '02', job: '产品经理' },
{ id: '09', name: '小高', pid: '03', job: 'UI设计师' },
{ id: '10', name: '小刘', pid: '04', job: '前端工程师' },
{ id: '11', name: '小华', pid: '04', job: '后端工程师' },
{ id: '12', name: '小李', pid: '04', job: '后端工程师' },
{ id: '13', name: '小赵', pid: '05', job: '测试工程师' },
{ id: '14', name: '小强', pid: '05', job: '测试工程师' },
{ id: '15', name: '小涛', pid: '06', job: '运维工程师' }
]
// 完成代码
function arrToTree(data) {
// 你的代码
// 先把传进来的数据的 name 修改为 label 再删除 name
data.map(item => {
item.label = item.name
delete item.name
})
// 声明空数组 接收最后的结果
let arr = []
// 定义空对象 接收每个人的信息并准备划分层级
let obj = {}
// 判断传送进来的值是否为数组，可以使用Array.isArray()方法判断，也可以用instanceof Array 进行判断
if (!(data instanceof Array)) {
return arr
}
// 循环 data 先把所有的数据放进一个对象里
data.forEach(item => {
obj[item.id] = item
})
// 定义遍历删除id、job、pid的方法
function del(del) {
return del.forEach(i => {
delete i.id
delete i.job
delete i.pid
})
}
data.forEach(item => {
if (obj[item.pid]) {
if (obj[item.pid].children) {
obj[item.pid].children.push(item)
// 遍历删除id、job、pid
del(obj[item.pid].children)
} else {
;(obj[item.pid].children = []).push(item)
del(obj[item.pid].children)
}
} else {
arr.push(item)
del(arr)
}
})
return arr
}
// 目标：
const treeData = arrToTree(data)
console.log(treeData)
</script>
</body>
</html>
标签：name,树状,tree,pid,js,item,job,label,id 来源： https://blog.csdn.net/web00_11/article/details/119392106
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。