使用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 } };
}, {});
相关推荐
想不到一个好的ID7 小时前
Claude Code 初学者必看指南
前端·后端
一枚菜鸟_7 小时前
04-Flutter状态管理终极指南-Riverpod3.x从入门到精通
前端
一枚菜鸟_7 小时前
06-Flutter动画从零到炫酷-让你的App动起来
前端
Wect7 小时前
React Hooks 核心原理
前端·算法·typescript
shughui7 小时前
Fiddler下载、安装、使用、汉化,详细图文教程(2026附安装包)
前端·测试工具·fiddler
阿帕琪尔7 小时前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite
思慕很大很大7 小时前
浏览器基础知识-进程与线程
前端·浏览器
猩猩程序员7 小时前
dial9:一个强悍的 Tokio 调试工具!!!
前端
gyx_这个杀手不太冷静8 小时前
OpenCode 深度解析:架构设计、工具链集成与工程化实践
前端·架构·ai编程
m0_459252468 小时前
fastadmin动态渲染统计信息
开发语言·前端·javascript·php