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

 更新时间:2025年11月06日 09:57:38   作者:Humbunklung  
数据处理过程中,要将一个包含 key 和 value 属性的 JSON 数组整合成一个 JSON 对象,JavaScript中一般有三种实现方法,下面小编就为大家简单介绍一下吧

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

方法 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 数据处理、表单提交等场景。

到此这篇关于浅析JavaScript如何将一个带K-V特征的JSON数组转换为JSON对象的文章就介绍到这了,更多相关JavaScript JSON数组转JSON对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈Javascript中substr和substring的区别

    浅谈Javascript中substr和substring的区别

    这篇文章主要介绍了Javascript中substr和substring的区别,非常的简单明了,有需要的小伙伴可以来仔细看看。
    2015-09-09
  • 通过JS获取用户本地图片路径并显示的代码

    通过JS获取用户本地图片路径并显示的代码

    通过JS获取用户本地图片路径并显示的代码,多用于本地上传图片的预览效果
    2012-02-02
  • three.js实现3D模型展示的示例代码

    three.js实现3D模型展示的示例代码

    本篇文章主要介绍了three.js实现3D模型展示的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    这篇文章主要介绍了javascript实现淘宝幻灯片广告展示效果的方法,以实例形式完整讲述了javascript实现幻灯效果的javascript、css及html实现技巧,需要的朋友可以参考下
    2015-04-04
  • 一个php+js实时显示时间问题

    一个php+js实时显示时间问题

    本文给大家分享的是解决的php+js实时显示时间问题,主要是自己当时的理解有问题,也许大家有和我一样的情况,这里分享给大家
    2015-10-10
  • 一步步教你用js简单实现新年倒计时

    一步步教你用js简单实现新年倒计时

    一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下
    2022-12-12
  • Javascript数组与字典用法分析

    Javascript数组与字典用法分析

    这篇文章主要介绍了Javascript数组与字典用法,以实例形式较为详细的分析了Array作为数组与字典的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 微信小程序 (地址选择1)--选取搜索地点并显示效果

    微信小程序 (地址选择1)--选取搜索地点并显示效果

    这篇文章主要介绍了微信小程序 (地址选择1)--选取搜索地点并显示效果,实现思路是通过拖动地图,搜索地址,选择地址并将地址值传给文本框,具体实例代码跟随小编一起看看吧
    2019-12-12
  • js模拟实现百度搜索

    js模拟实现百度搜索

    这篇文章主要为大家详细介绍了js模拟实现百度搜索,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • javascript中取前n天日期的两种方法分享

    javascript中取前n天日期的两种方法分享

    这篇文章主要介绍了javascript中取前n天日期的两种方法,有需要的朋友可以参考一下
    2014-01-01

最新评论