ES6通过map、解构和扩展运算符实现删除所有数组对象中的某个属性

ゝ一世哀愁。 2022-12-26 08:27 330阅读 0赞

先说需求

在一个表单中有两个下拉框，都是访问同一个接口拿到树结构的List数据后动态绑定的到各自的下拉框，区别在于A下拉框只显示根节点，B下拉框显示树结构的所有数据。

为了性能上的考虑，必须满足前端只发送一个ajax请求，后端也只写一个获取TreeList的结构的接口，用来满足两个下拉框的动态赋值。

如图：左图显示根节点项，右图显示所有树结构项

![dfda7bef438803bb10226fd67fe806c2.png][] ![7701a3c38e5ed8af8b1bd47117f76466.png][]

贴上返回的数据结构

![f16b3e745b879a74bc7890050c1680fe.png][]

（1）思路：从数据结构来分析这是个包含了所有根节点和子节点数据的treeList数组对象。B下拉框可以原封不动的赋值，A下拉框就需要把根节点下的children属性给删除掉。

这里就涉及到了几个知识点：深拷贝，map、解构和扩展运算符   通过ES6的语法优雅的对数组里的属性进行删除

直接贴代码：

![e8ca5539c30256343239b489e7e9a39d.png][]

（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);
            
            // 等...

最后打印出的根节点数据对比如下：

![c406ef1b2b251d54faabfc3d1c2b277d.png][]![d22842c4edfab7e99e47543c141af19c.png][]

[dfda7bef438803bb10226fd67fe806c2.png]: https://img-blog.csdnimg.cn/img_convert/dfda7bef438803bb10226fd67fe806c2.png
[7701a3c38e5ed8af8b1bd47117f76466.png]: /images/20221120/b8b5ec8593184252a62c1a495d34ee86.png
[f16b3e745b879a74bc7890050c1680fe.png]: /images/20221120/793bd9d5b5594abd9170f1062e20a7bf.png
[e8ca5539c30256343239b489e7e9a39d.png]: /images/20221120/91b3d3234a104ab28f3092aac1440a28.png
[c406ef1b2b251d54faabfc3d1c2b277d.png]: https://img-blog.csdnimg.cn/img_convert/c406ef1b2b251d54faabfc3d1c2b277d.png
[d22842c4edfab7e99e47543c141af19c.png]: /images/20221120/d3ed9ddc95cf4484a525f8f6a7dad779.png