使用reduce处理数据

一.reduce的使用方法


😆reduce方法需要传递两个参数一个参数是回调函数,另外一个参数是初始值,回调函数接收四个值分别是,accumulator累计值,currentValue当前值,currentIndex当前索引值,array原始数组,回调函数的返回值作为下次累计的初始值,使用方法如下:

js 复制代码
array.reduce((accumulator,currentValue,currentIndex,array)=>{
  return updatedAccumulator
},initialValue)

二.开发真实案例


🐸如下原数据,将这个原数据使用reduce处理成新的数据,并且只能使用reduce,不能使用其他函数访问。

js 复制代码
const data = [
  {
    "zscp1": {
      "zscpFlag": true,
      "zscpFs": "90"
    }
  },
  {
    "zscp2": {
      "zscpFlag": true,
      "zscpFs": "100"
    }
  },
  {
    "zscp3": {
      "zscpFlag": false,
      "zscpFs": ""
    }
  }
];

🦉处理后的数据格式:

js 复制代码
{
  "zscp1": {
    "zscpFlag": true,
      "zscpFs": "90"
  },
  "zscp2": {
    "zscpFlag": true,
      "zscpFs": "100"
  },
  "zscp3": {
    "zscpFlag": false,
      "zscpFs": ""
  }
}

🤡处理代码:

js 复制代码
this.csfsInfo = res.reduce((acc, cur) => {
  let key = Object.keys(cur)[0];
  let value = cur[key];
  return { ...acc, ...{ [key]: value } };
}, {});
相关推荐
世界哪有真情5 小时前
拿人类意识卡 AI?等于用 bug 验收正式产品
前端·人工智能·后端
Listen·Rain6 小时前
Vue3:setup详解
前端·javascript·vue.js
Patrick_Wilson6 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen7 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh7 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
Csvn7 小时前
🤖 AI 生成前端代码的 5 个典型翻车现场及修复指南
前端
IT_陈寒8 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎9 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮10 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗10 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js