展开运算符与reduce对数组的处理_reduce 展开数组-CSDN博客

本文链接：https://blog.csdn.net/weixin_52563089/article/details/129734918

文章展示了如何使用JavaScript的reduce和map方法处理数组，检查每个对象是否包含createBy属性。如果没有createBy，则去除id和index，保留其他属性；如果存在createBy，则保留整个对象。最终将处理后的对象放入新数组。

摘要由CSDN通过智能技术生成

// 需: 一个数组中判断是否有createBy，如没有 去除id和index就将剩余参数取出
//     和 有createBy的对象一起成入新的数组
let arr = [
    {createBy:1234,id:1,index:1,test1:"测试1",test2:"测试2"},
    {createBy:1234,id:1,index:1,test1:'测试1',test2:"测试2"},
    {id:1,index:1,test1:'测试1',test2:"测试2"},
    {id:1,index:1,test1:'测试1',test2:"测试2"}
    ]
    // 方法一：reduce加解构赋值
        // reduce((返回值，当前元素)=>{},传递给函数的初始值)
    let brr = arr.reduce((Newbrr,item)=>{
        // 将每一个对象结构出来，...rest就是指剩下的参数
        // 注意 {...}是展开对象，[...]是展开数组，这里的item是数组中的每一个对象，所有用的是{}展开运算符
        const {createBy,id,index,...rest} = item
        // 如果没有createBy 就返回这个剩下的参数，如果有createBy就将整个对象返回
        const obj = !createBy ? {...rest} : {...item}
        // 将返回的对象push到要返回里面
        Newbrr.push(obj)
        // 返回该值
        return Newbrr
    },[])
    console.log(brr);

    // 方法二：数组.map()
    //就是创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，这里的item就是原数组的元素
    let crr = arr.map((item)=>{
        // 如果该元素下有creayteBy，那就将整个元素返回
        if (item.createBy){
            return item
        }else{
            // 如果没有，就展开这个元素
            const {index,id,...rest} = item
            // 然后返回除了index与id这个两个属性以外的元素
            return {...rest}
        }
    })
    console.log(crr);