先说需求
在一个表单中有两个下拉框,都是访问同一个接口拿到树结构的List数据后动态绑定的到各自的下拉框,区别在于A下拉框只显示根节点,B下拉框显示树结构的所有数据。
为了性能上的考虑,必须满足前端只发送一个ajax请求,后端也只写一个获取TreeList的结构的接口,用来满足两个下拉框的动态赋值。
如图:左图显示根节点项,右图显示所有树结构项
贴上返回的数据结构
(1)思路:从数据结构来分析这是个包含了所有根节点和子节点数据的treeList数组对象。B下拉框可以原封不动的赋值,A下拉框就需要把根节点下的children属性给删除掉。
这里就涉及到了几个知识点:深拷贝,map、解构和扩展运算符 通过ES6的语法优雅的对数组里的属性进行删除
直接贴代码:
(2)
const form = {
id: '011',
name: '测试一',
description: '测试demo'
}
// 目标: 取到删除description属性的对象, 即下文的data
//方法一:
let data = (({id, name}) =>({id, name}))(form);
console.log(data) // data:{ id: '011', name: '测试一'}
console.log(form) // form:{ id: '011', name: '测试一', description: '测试demo' }
// 方法二:
let {description, ...data} = form;
// data默认接收剩余的属性值, 打印结果同上
(3)(map映射,指定属性不映射过来)
let newArr = arr.map((item) => {
let obj = {
name: item.name,
age: item.age
}
return obj
})
console.log(newArr);
(4)(过滤遍历并delete删除指定属性)
let newArr = arr.filter((item, index) => {
return delete item.home // 留神:打印一下delete item.home返回的是true
});
console.log(newArr);
(5)(一般遍历间接删除指定属性)
// forEach遍历
arr.forEach((item) => {
delete item.home
});
console.log(arr);
// for in 遍历
for (let key in arr) {
delete arr[key].home
}
console.log(arr);
// 等...
最后打印出的根节点数据对比如下: