目录
- 1. 基本知识
- 2. 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'