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

目录

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'