0

0

JavaScript如何用Object.fromEntries转换键值

小老鼠

小老鼠

发布时间:2025-07-09 22:26:02

|

1023人浏览过

|

来源于php中文网

原创

object.fromentries在javascript中用于将可迭代的键值对转换为对象。它接收一个包含键值对数组的可迭代对象,遍历并创建新对象,是object.entries()的逆操作。1. 常见用法包括从object.entries()输出、键值对数组或map对象转换;2. 与object.entries()互补,形成“拆装”机制,适用于过滤、映射等中间操作后重建对象;3. 处理重复键时以最后一个键值为准,便于配置覆盖;4. 可结合map进行数据转换,如将用户数组转为以id为键的对象;5. 支持从urlsearchparams或formdata转换,简化查询字符串或表单数据解析;6. 相比reduce,object.fromentries意图更明确、代码更简洁,具备更好的可读性和维护性。

JavaScript如何用Object.fromEntries转换键值

Object.fromEntries在JavaScript中用于将一个可迭代的键值对(例如[key, value]数组的数组或Map对象)转换回一个新的JavaScript对象。它本质上是Object.entries()的逆操作,让你能方便地从列表形式的数据重构出对象结构。

JavaScript如何用Object.fromEntries转换键值

解决方案

Object.fromEntries()方法接收一个可迭代对象,该对象应该包含一系列键值对数组([key, value])。它会遍历这些键值对,并以它们为属性名和属性值,创建一个全新的普通JavaScript对象。

最常见的应用场景,就是当你用Object.entries()把一个对象拆解成键值对数组后,经过一些筛选、映射或排序操作,再用Object.fromEntries()把它“拼”回去。这就像你把一本书拆成一张张纸,整理完再装订成册一样。

立即学习Java免费学习笔记(深入)”;

JavaScript如何用Object.fromEntries转换键值

基本用法示例:

// 从Object.entries()的输出转换回来
const myObject = { a: 1, b: 2, c: 3 };
const entries = Object.entries(myObject); // [['a', 1], ['b', 2], ['c', 3]]

const newObject = Object.fromEntries(entries);
console.log(newObject); // { a: 1, b: 2, c: 3 }

// 从一个键值对数组转换
const dataArray = [
  ['name', 'Alice'],
  ['age', 30],
  ['city', 'New York']
];
const person = Object.fromEntries(dataArray);
console.log(person); // { name: 'Alice', age: 30, city: 'New York' }

// 从Map对象转换
const myMap = new Map([
  ['id', 'xyz123'],
  ['status', 'active']
]);
const mapToObject = Object.fromEntries(myMap);
console.log(mapToObject); // { id: 'xyz123', status: 'active' }

这个方法特别方便,因为它提供了一种声明式的方式来处理键值对的转换,避免了手动循环和赋值的繁琐。在处理一些需要中间转换和操作对象数据的场景时,它简直是神器。

JavaScript如何用Object.fromEntries转换键值

Object.fromEntriesObject.entries():它们是互补的吗?

是的,它们是设计上完全互补的。可以说,Object.entries()Object.fromEntries()构成了JavaScript中处理对象键值对的一个非常优雅的“拆装”机制。Object.entries()负责将一个对象扁平化成一个包含[key, value]数组的数组,而Object.fromEntries()则负责将这个扁平化的数组重新组装回一个对象。

这种互补性在实际开发中非常有用。想象一下,你有一个配置对象,需要根据某些条件筛选或修改其中的一些属性,然后再把它作为新的配置对象使用。如果直接操作原对象,可能会比较麻烦,或者需要写很多条件判断。但有了这对组合,流程就变得清晰多了:

  1. 拆解: 使用Object.entries(originalObject),将对象转换成一个可操作的数组。
  2. 操作: 对这个数组进行filter()map()等操作,筛选或修改键值对。
  3. 重组: 使用Object.fromEntries(modifiedEntriesArray),将处理后的键值对数组重新构建成一个新的对象。

来看个例子,我们想从一个用户对象中移除所有值为nullundefined的属性:

const userProfile = {
  id: 101,
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: null,
  address: undefined,
  age: 30
};

const cleanedProfileEntries = Object.entries(userProfile).filter(([key, value]) => {
  // 过滤掉值为 null 或 undefined 的条目
  return value !== null && typeof value !== 'undefined';
});

const cleanedProfile = Object.fromEntries(cleanedProfileEntries);
console.log(cleanedProfile);
// 输出: { id: 101, name: 'John Doe', email: 'john.doe@example.com', age: 30 }

这种模式让数据转换变得异常灵活,也更具函数式编程的风格,代码读起来也更像是在描述“做什么”,而不是“怎么做”。

Object.fromEntries在处理复杂数据结构时有哪些技巧?

当数据结构稍微复杂一点,或者说,当你的原始数据并非直接就是[key, value]对的数组时,Object.fromEntries依然能派上用场,关键在于你如何将原始数据“塑形”成它能接受的格式。这里有几个我个人觉得挺实用的技巧:

  1. 处理重复键: 如果你的输入数组中存在相同的键,Object.fromEntries会以最后一个出现的键值对为准。这其实是个挺有用的特性,比如当你需要合并多个配置,后面出现的配置项覆盖前面的。

    const configUpdates = [
      ['theme', 'dark'],
      ['fontSize', '16px'],
      ['theme', 'light'] // 'theme'键重复,这个值会覆盖前面的
    ];
    const finalConfig = Object.fromEntries(configUpdates);
    console.log(finalConfig); // { theme: 'light', fontSize: '16px' }

    这比你手动去写循环和判断来处理覆盖逻辑要简洁得多。

  2. 结合map进行数据转换: 这是最常见的技巧之一。你可能有一个数组,里面每个元素都是一个对象,但你希望将这个数组转换成一个以某个特定属性为键的对象。

    聚好用AI
    聚好用AI

    可免费AI绘图、AI音乐、AI视频创作,聚集全球顶级AI,一站式创意平台

    下载
    const users = [
      { id: 'u001', name: 'Alice', status: 'active' },
      { id: 'u002', name: 'Bob', status: 'inactive' },
      { id: 'u003', name: 'Charlie', status: 'active' }
    ];
    
    // 将用户数组转换成以id为键的对象,方便通过id查找用户
    const usersById = Object.fromEntries(
      users.map(user => [user.id, user]) // 将每个用户对象转换为 [id, userObject] 形式
    );
    console.log(usersById['u002']); // { id: 'u002', name: 'Bob', status: 'inactive' }

    这个模式在处理后端返回的列表数据时尤其有用,当你需要快速按某个ID或唯一标识符访问数据时,它能省去很多遍历的功夫。

  3. 从URLSearchParams或FormData转换: 这两个Web API的实例都提供了entries()方法,可以直接生成[key, value]迭代器,完美适配Object.fromEntries

    // 假设我们有一个URL查询字符串
    const queryString = '?name=Alice&age=30&city=New%20York';
    const params = new URLSearchParams(queryString);
    
    const queryAsObject = Object.fromEntries(params.entries());
    console.log(queryAsObject); // { name: 'Alice', age: '30', city: 'New York' }
    
    // FormData也类似
    // const formData = new FormData(someFormElement);
    // const formObject = Object.fromEntries(formData.entries());

    这比你手动解析查询字符串或者表单数据要安全和高效得多。

这些技巧的核心在于,只要你能把你的原始数据通过某种方式(通常是mapfilter)转换成一个可迭代的[key, value]对的集合,Object.fromEntries就能登场,帮你优雅地完成最后的转换。它让代码更具表达力,也减少了出错的可能性。

为什么不直接用reduce来转换键值对?Object.fromEntries的优势在哪里?

这是一个非常好的问题,因为在Object.fromEntries出现之前,我们确实经常使用Array.prototype.reduce来做类似的事情。例如,将一个键值对数组转换成对象:

const entriesToConvert = [['a', 1], ['b', 2]];

// 使用 reduce
const objectFromReduce = entriesToConvert.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
console.log(objectFromReduce); // { a: 1, b: 2 }

reduce确实能完成这个任务,而且它的通用性非常强,几乎能实现任何数组的聚合操作。那么,Object.fromEntries的优势到底在哪里呢?

我认为主要体现在以下几点:

  1. 意图明确,代码更具可读性: Object.fromEntries这个方法名本身就清晰地表达了它的目的:从条目(entries)创建对象。当你在代码中看到它时,几乎不需要思考就能明白这行代码在做什么。而reduce虽然强大,但它的通用性也意味着你需要花一点时间去理解回调函数内部的逻辑,才能明白最终的聚合结果是什么。在大型项目中,这种即时理解性对于代码维护和团队协作至关重要。

  2. 简洁性: 对于“将键值对列表转换为对象”这个特定任务,Object.fromEntries的代码量明显更少,也更简洁。它直接解决了这个特定问题,而不需要你手动去初始化累加器,也不需要写赋值语句。

    // 简洁性对比
    const objectFromFromEntries = Object.fromEntries(entriesToConvert);
    console.log(objectFromFromEntries); // { a: 1, b: 2 }

    少写代码,就意味着更少的出错机会,也让代码看起来更“干净”。

  3. 性能(理论上): 尽管对于大多数日常应用来说,reduceObject.fromEntries的性能差异可以忽略不计,但从理论上讲,Object.fromEntries作为JavaScript引擎的内置原生方法,它在底层实现上可能会有更优化的C++代码,处理效率可能比JavaScript实现的reduce回调函数更高。尤其是在处理非常庞大的数据集时,这种原生优化可能会带来微小的性能优势。当然,这通常不是我们选择它的主要原因,但也是一个潜在的优点。

  4. 符合API设计趋势: 现代JavaScript API设计倾向于提供更具体、更语义化的方法来解决常见问题,而不是只提供少数几个通用但需要更多样板代码的方法。Object.fromEntries就是这种趋势的一个体现,它让开发者能用更声明式的方式来表达意图。

所以,虽然reduce是一个瑞士军刀,能解决很多问题,但当你的任务就是“把键值对列表变回对象”时,Object.fromEntries无疑是更专业、更清晰、更简洁的选择。选择合适的工具解决特定的问题,往往能让你的代码质量更上一层楼。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1109

2024.03.01

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

211

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

325

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

293

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

179

2025.08.07

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

ASP 教程
ASP 教程

共34课时 | 5.9万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号