Js中的Object.entries()基本知识详细分析(附Demo)

 更新时间:2024年09月10日 09:25:42   作者:码农研究僧  
Object.entries方法能将对象的可枚举属性转为数组,每个元素是键值对数组,可用于for...of迭代,下面这篇文章主要介绍了Js中的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.entries()、Object.fromEntries()、ES6的Map三者之间的关系

简要说明一下,三者的作用,后续依次通过代码详细具体演示三者之间存在的联系

Object.entries  传入一个对象,返回该对象的键值对的数组,即每个键和对应的值,转化为一个数组,以此类推,最后这些数组再被放到一个新数组中

Object.fromEntries  传入一个数组,或者传入一个Map,数组最好是和Object.entries生成的数组结构一致,根据传入的返回一个对象

Map ES6新增的数据结构,能够进行迭代,使用...展开运算符可将Map类型转化为Object.entries生成的数组对象 ,将Map传入Object.fromEntries能得到一个对象

Object.entries和Object.fromEntries

const person = {
            name: '王二',
            age: 18,
            sex: '男',
            say() {
                console.log('说话');
            }
        }
 
        const obj1 = Object.entries(person)//返回对象的键值对数组
        const obj2 = Object.fromEntries(obj1);//通过上述的键值对数组,返回对应的对象
        console.log(obj1);
        console.log(obj2);

结果输出

结果分析

上述可得,Object.entries和Object.fromEntries两个得到的结果可以相互转换

前者通过对象可以得到键值对数组,后者可以将前者的数组,转化为对象

个人猜测,可以实现深拷贝

总结 

到此这篇关于Js中的Object.entries()基本知识详细分析的文章就介绍到这了,更多相关Js中Object.entries()基本知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生JS实现响应式瀑布流布局

    原生JS实现响应式瀑布流布局

    本文给大家分享的是使用原生的javascript实现的响应式的瀑布流布局的方法和源码,非常的实用,有需要的小伙伴可以参考下。
    2015-04-04
  • VS Code转换大小写、修改选中文字或代码颜色的方法

    VS Code转换大小写、修改选中文字或代码颜色的方法

    最近在使用VS Code,发现了不少使用的小技巧,觉着有必要给大家分享下,下面这篇文章主要给大家介绍了关于VS Code转换大小写、修改选中文字或代码颜色的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-12-12
  • JavaScript闭包与作用域链实例分析

    JavaScript闭包与作用域链实例分析

    这篇文章主要介绍了JavaScript闭包与作用域链,结合实例形式分析了javascript闭包的具体概念、功能、并对比作用域链分析了闭包的相关使用技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • Javascript同时声明一连串(多个)变量的方法

    Javascript同时声明一连串(多个)变量的方法

    这篇文章主要给大家介绍了利用Javascript声明一连串(也就是多个)变量的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • List all the Databases on a SQL Server

    List all the Databases on a SQL Server

    List all the Databases on a SQL Server...
    2007-06-06
  • JS实现动画中的布局转换

    JS实现动画中的布局转换

    这篇文章主要为大家详细介绍了JS实现动画中的布局转换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 基于JS制作一个简易的2048游戏

    基于JS制作一个简易的2048游戏

    这篇文章主要介绍了如何利用JS编写一个简单的2048小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • 用apply让javascript函数仅执行一次的代码

    用apply让javascript函数仅执行一次的代码

    有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢?简单模仿下面这段就可以轻松搞定了
    2010-06-06
  • Bootstrap Table表格一直加载(load)不了数据的快速解决方法

    Bootstrap Table表格一直加载(load)不了数据的快速解决方法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器。接下来通过本文给大家介绍Bootstrap Table表格一直加载(load)不了数据的快速解决方法,感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript实现标签页切换效果

    JavaScript实现标签页切换效果

    这篇文章主要为大家详细介绍了JavaScript实现标签页切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论