目录

1. 基本知识2. Demo

1. 基本知识

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

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

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

对象的属性默认是可枚举的，意味着它们可以在 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'