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'

转自:详细分析Js中的Object.entries()基本知识(附Demo)-CSDN博客

相关推荐
小高00710 分钟前
🤔Proxy 到底比 defineProperty 强在哪?为什么今天还在聊 Proxy?
前端·javascript·vue.js
哔哩哔哩技术11 分钟前
VibeCut - 智能剪辑探索与实现
前端
用户9047066835712 分钟前
在uniapp Vue3版本中,如何解决,web/H5网页浏览器跨域的问题
前端
MOON404☾25 分钟前
Rust程序语言设计(5-8)
开发语言·后端·rust
RaidenLiu35 分钟前
告别繁琐:用 Signals 优雅处理 Flutter 异步状态
前端·flutter·前端框架
星链引擎38 分钟前
面向API开发者的智能聊天机器人解析
前端
前端Hardy39 分钟前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
道可到1 小时前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到1 小时前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft1 小时前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码