JavaScript中的Object.entries()和Object.fromEntries()示例详解

更新时间：2025年07月26日 15:16:22 作者：玛卡巴卡半夜不睡觉

在JavaScript中Object.entries()和Object.fromEntries()是处理对象转换的利器,它们可以将对象转换为数组进行操作,再转换回对象,这篇文章主要介绍了JavaScript中的Object.entries()和Object.fromEntries()的相关资料,需要的朋友可以参考下

Object.entries()

1. 基本知识

用于将对象的可枚举属性转换为一个数组

该数组包含对象自身的可枚举属性的键值对数组，每个键值对数组由两个元素组成：

第一个元素是属性名，字符串（或符号）
第二个元素是属性值，任何类型

对象的属性默认是可枚举的，意味着它们可以在 for...in 循环中被枚举出来
使用 Object.defineProperty 方法可以设置或修改属性的可枚举性

基本的用法如下：

基本用法：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 输出: [['a', 1], ['b', 2], ['c', 3]]

处理空对象：

const emptyObj = {};
const entries = Object.entries(emptyObj);
console.log(entries);
// 输出: []

与其他方法的比较：
Object.keys(obj)：返回一个包含对象所有可枚举属性名的数组
Object.values(obj)：返回一个包含对象所有可枚举属性值的数组
Object.entries(obj)：返回一个包含对象所有可枚举属性的键值对数组

const obj = { a: 1, b: 2, c: 3 };

console.log(Object.keys(obj));
// 输出: ['a', 'b', 'c']

console.log(Object.values(obj));
// 输出: [1, 2, 3]

console.log(Object.entries(obj));
// 输出: [['a', 1], ['b', 2], ['c', 3]]

非对象参数：
如果传入非对象参数（如 null 或 undefined），Object.entries 会抛出错误

try {
    console.log(Object.entries(null));
} catch (e) {
    console.error(e);
    // 输出: TypeError: Cannot convert undefined or null to object
}

使用 for…of 迭代：
Object.entries 返回的数组可以使用 for...of 迭代

const obj = { x: 10, y: 20, z: 30 };

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}
// 输出:
// x: 10
// y: 20
// z: 30

2. Demo

示例 1：过滤对象的属性

通过 Object.entries 结合 filter 方法，筛选出满足特定条件的键值对

const obj = { a: 1, b: 2, c: 3, d: 4 };

const filteredEntries = Object.entries(obj).filter(([key, value]) => value > 2);
console.log(filteredEntries);
// 输出: [['c', 3], ['d', 4]]

示例 2：对象属性值的转换

使用 map 方法对对象属性值进行转换，然后重新构建对象

const obj = { name: 'Alice', age: 25 };

const transformedEntries = Object.entries(obj).map(([key, value]) => {
    return [key, typeof value === 'string' ? value.toUpperCase() : value];
});

const newObj = Object.fromEntries(transformedEntries);
console.log(newObj);
// 输出: { name: 'ALICE', age: 25 }

示例 3：嵌套对象处理

const nestedObj = {
    user: {
        name: 'Bob',
        age: 30
    },
    location: {
        city: 'New York',
        country: 'USA'
    }
};

const nestedEntries = Object.entries(nestedObj).flatMap(([key, value]) =>
    Object.entries(value).map(([subKey, subValue]) => [`${key}.${subKey}`, subValue])
);

console.log(nestedEntries);
// 输出: [['user.name', 'Bob'], ['user.age', 30], ['location.city', 'New York'], ['location.country', 'USA']]

示例 4：动态构建对象

const entries = [['a', 1], ['b', 2], ['c', 3]];

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

示例 5：结合其他方法进行数据处理

使用 reduce 方法结合 Object.entries 对对象进行复杂的数据处理

const obj = { apple: 10, banana: 20, cherry: 30 };

const total = Object.entries(obj).reduce((sum, [key, value]) => sum + value, 0);
console.log(total);
// 输出: 60

示例 6：转换对象为查询字符串

const params = { name: 'Alice', age: 25, city: 'Wonderland' };

const queryString = Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');

console.log(queryString);
// 输出: 'name=Alice&age=25&city=Wonderland'

Object.fromEntries()

一、轻松将键值对数组转为对象，后端数据处理神器

当从后端接口拿到的数据是[['key1', 'value1'], ['key2', 'value2']]这种键值对数组格式时，想把它转为对象方便使用，传统方法可能需要写一堆循环代码。Object.fromEntries()方法完美解决这个痛点，它是ES10的新特性，在前后端数据交互中堪称“瑞士军刀”。

// 假设后端返回的用户信息是键值对数组
const userArray = [
    ['name', 'Tom'],
    ['age', 28],
    ['email', 'tom@example.com']
];
// 使用Object.fromEntries()将键值对数组转为对象
const userObject = Object.fromEntries(userArray);
console.log(userObject); 
// {name: 'Tom', age: 28, email: 'tom@example.com'}

在处理登录接口返回数据、表单提交数据解析等场景时，这个方法能让你少写几十行代码，开发效率直接起飞！

总结

到此这篇关于JavaScript中的Object.entries()和Object.fromEntries()示例详解的文章就介绍到这了,更多相关Js中Object.entries() 和Object.fromEntries()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

写出更好的JavaScript程序之undefined篇（中）
前一篇我介绍了几种广为使用的利用undefined这个概念值的办法，这一篇我会介绍一些不太常见的办法，其中还包括一个很巧妙的，我个人觉得很值得推广的办法。
2009-11-11
JS实现的对象去重功能示例
这篇文章主要介绍了JS实现的对象去重功能,结合实例形式分析了javascript针对json对象的遍历、判断、运算实现去重功能相关操作技巧,需要的朋友可以参考下
2019-06-06
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示
多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。
2011-07-07
js保存当前路径(cookies记录)
曾经做了一个取消订单的功能。这个功能在个人中心里面有，在订单的详细页面也有。按照正常的思路，这两块都可以提交到相同的action去处理，但是返回的页面是不一样的，都是返回到当前页面就可以了。
2010-12-12
详解JavaScript作用域闭包
这篇文章主要介绍了JavaScript作用域闭包的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
js实现简易的英汉词典
这篇文章主要为大家详细介绍了js实现简易的英汉词典，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
JavaScript提高加载和执行效率的方法
JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。
2017-02-02
不用一句js代码初始化组件
不用一句js代码初始化组件，是不是很神奇？
2016-01-01
js最简单的双向绑定实例讲解
下面小编就为大家分享一篇js最简单的双向绑定实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
JavaScript动态添加数据到表单并提交的几种方式
这篇文章主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-06-06