当前位置: 首页 > ds >正文

JavaScript 将一个带K-V特征的JSON数组转换为JSON对象

文章目录

      • 📌 方法 1:使用 `Array.prototype.reduce()`
      • 🚀 方法 2:使用 `Object.fromEntries()`(ES2019+)
      • ⚙️ 方法 3:手动遍历数组
      • ⚠️ 注意事项
      • 💡 完整流程示例
      • 总结

数据处理过程中,要将一个包含 keyvalue 属性的 JSON 数组整合成一个 JSON 对象(其中每个元素的 key 作为属性名,value 作为属性值),以下是几种常用的 JavaScript 实现方法及示例:
JSON


📌 方法 1:使用 Array.prototype.reduce()

适用场景:兼容性要求高(支持 ES5+),可处理复杂逻辑(如数据过滤)。
代码示例

const jsonArray = [{ key: "name", value: "Alice" },{ key: "age", value: 25 },{ key: "city", value: "Beijing" }
];const jsonObject = jsonArray.reduce((obj, item) => {obj[item.key] = item.value; // 将 key-value 对添加到对象return obj;
}, {}); // 初始化为空对象console.log(jsonObject);
// 输出:{ name: "Alice", age: 25, city: "Beijing" }

说明

  • 通过 reduce 遍历数组,逐步构建对象。

🚀 方法 2:使用 Object.fromEntries()(ES2019+)

适用场景:代码简洁,现代浏览器或 Node.js 环境。
代码示例

const jsonArray = [{ key: "name", value: "Bob" },{ key: "age", value: 30 }
];// 先将数组转换为 [key, value] 形式的二维数组
const entries = jsonArray.map(item => [item.key, item.value]);
const jsonObject = Object.fromEntries(entries);console.log(jsonObject);
// 输出:{ name: "Bob", age: 30 }

说明

  • Object.fromEntries() 直接接收键值对数组生成对象。

⚙️ 方法 3:手动遍历数组

适用场景:无需高阶函数,逻辑清晰易读。
代码示例

const jsonArray = [{ key: "id", value: 1001 },{ key: "status", value: "active" }
];const jsonObject = {};
for (const item of jsonArray) {jsonObject[item.key] = item.value; // 逐项赋值
}console.log(jsonObject);
// 输出:{ id: 1001, status: "active" }

说明

  • 通过循环直接赋值,适合初学者理解。

⚠️ 注意事项

  1. 键名冲突

    • 若数组中有重复的 key,后出现的值会覆盖先前的值。
    • 可通过检查重复键名提前处理:
      if (obj.hasOwnProperty(item.key)) {console.warn(`重复键名: ${item.key}`);
      }
      
  2. 空数组处理

    • 空数组会返回空对象 {},符合预期。
  3. 复杂值类型

    • value 可以是任意类型(对象、数组等),转换时会保留结构。
  4. JSON 字符串转换

    • 若需将结果转为 JSON 字符串,使用 JSON.stringify(jsonObject)

💡 完整流程示例

// 输入:JSON 数组
const jsonArray = [{ key: "product", value: "Laptop" },{ key: "price", value: 4999 },{ key: "inStock", value: true }
];// 方法1:reduce 转换
const result = jsonArray.reduce((obj, item) => {obj[item.key] = item.value;return obj;
}, {});console.log(result);
// 输出:{ product: "Laptop", price: 4999, inStock: true }

总结

  • 推荐方法
    • 现代环境 → Object.fromEntries()(代码最简洁)。
    • 兼容旧环境 → reduce() 或手动遍历。
  • 关键点:确保数组元素包含 keyvalue 属性,且 key 需为字符串类型。

通过上述方法,可高效地将结构化数组转换为易操作的 JSON 对象,适用于 API 数据处理、表单提交等场景。

http://www.xdnf.cn/news/14442.html

相关文章:

  • Python实例题:Python计算偏微分方程
  • c++算法学习7——倍增算法
  • 山东大学软件学院创新项目实训开发日志——第十七周
  • RAG 系统评估与优化指南:从 RAGAS 到 ARES 的实战应用
  • Flask 动态模块注册
  • Hoppscotch
  • Makefile关键语法示例
  • 三维重建 —— 5. 双目立体视觉
  • CNN中的感受野
  • linux 常用工具的静态编译之一
  • Python打卡训练营-Day31-文件的规范拆分和写法
  • Vue2 与 Vue3 中环境变量配置的差异详解。
  • 电力系统时间同步检测技术
  • (下)通用智能体与机器人Transformer:Gato和RT-1技术解析及与LLM Transformer的异同
  • 【Golang面试题】什么是 sync.Once
  • 安全生产台账系统
  • 【无标题】二维势能塌陷的拓扑色动力学:数学物理框架与引力本质探索
  • 华为OD机试_2025 B卷_数组排列求和(Python,100分)(附详细解题思路)
  • vim编辑常用命令
  • JAVA理论第十七章-RocketMQKafaka
  • 【Linux教程】Linux 生存指南:掌握常用命令,避开致命误操作
  • 基于可靠消息确保分布式事务的最终一致性:以电商系统中订单服务的新建订单为例
  • C# 使用 TreeView 实践 WinRiver II 的测量管理功能
  • 篇章六 论坛系统——业务开发——实现业务功能
  • Java 与 MySQL 性能优化:Linux服务器上MySQL性能指标解读与监控方法
  • 修改Typora快捷键
  • 新的激活函数B-SiLU和NeLU:ReLU函数的复兴
  • 6.14项目一话术
  • 四六级英语作文模版
  • LeetCode 第72题:编辑距离(巧妙的动态规划方法)