js中数组方法reduce的妙用

        在JavaScript中，reduce()是数组的一个方法，它用于将数组中的所有元素按照指定的函数进行合并并返回一个结果。使用reduce()方法，可以对数组进行求和、累加等操作。

        我一直陷入固有思维，一直只使用reduce 来进行累加操作。今天在做项目时在要进行复杂对象中的数组属性进行整合时发现reduce方法也能快速实现相关操作，如下作为记录

例：基础数据

// 对该对象中的list属性进行整合成一个新对象
const data = {
      pay: [
        {
          type: 'foods',
          name: '餐饮',
          list: [
            { type: 'food', name: '餐费' },
            { type: 'drinks', name: '酒水饮料' },
            { type: 'dessert', name: '甜品零食' },
          ],
        }
      ],
      income: [
        {
          type: 'professional',
          name: '其他支出',
          list: [
            { type: 'salary', name: '工资' },
            { type: 'overtimepay', name: '加班' },
            { type: 'bonus', name: '奖金' },
          ],
        },
      ]
    }

目标数据

效果实现

// Objet.keys() 获取该对象的基础属性名 [ pay , income ]
const newData = Object.keys(data).reduce((pre, key) => {
// 对每个基础属性的内部属性进行遍历处理
    data[key].forEach(element => {
// 相同处理直至目标属性
        element.list.forEach(item=>{
            // 进行新对象的属性添加
            pre[item.type]=item.name
        })
    });
      return pre
}, {})

console.log(newData);
// 结果：
// { type: 'food', name: '餐费' , 
//   type: 'drinks', name: '酒水饮料', 
//   type: 'dessert', name: '甜品零食' },