在前端开发中，我们经常需要操作对象。ES9 中新增的两个对象方法 Object.values() 和 Object.entries() 提供了一种快速获取对象中属性值和键值对的方式，这在处理对象时非常有用。本文将介绍这两个方法的详细用法，以及一些示例代码和指导意义。
Object.values()
Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组。属性值的顺序与使用 for...in 循环遍历该对象时的顺序一致。
语法
Object.values(obj)
参数：
obj：要返回其可枚举属性值的对象。
返回值：
- 一个包含给定对象自身的所有可枚举属性值的数组。
示例
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]注意事项
Object.values()只会返回对象自身的可枚举属性值，不包括继承的属性值。- 如果参数不是对象，
Object.values()方法会抛出一个TypeError异常。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的 [key, value] 数组，数组中每个元素都是一个包含属性键和属性值的数组。属性的顺序与使用 for...in 循环遍历该对象时的顺序一致。
语法
Object.entries(obj)
参数：
obj：要返回其可枚举属性的键值对的对象。
返回值：
- 一个包含给定对象自身可枚举属性的
[key, value]数组的数组。
示例
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]注意事项
Object.entries()只会返回对象自身的可枚举属性的[key, value]数组，不包括继承的属性。- 如果参数不是对象，
Object.entries()方法会抛出一个TypeError异常。
应用场景
1. 遍历对象属性
Object.values() 和 Object.entries() 方法可以用来遍历对象属性，可以替代传统的 for...in 循环，代码更简洁易读。
// javascriptcn.com 代码示例
const obj = { a: 1, b: 2, c: 3 };
for (const value of Object.values(obj)) {
console.log(value);
}
// 1
// 2
// 3
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// a: 1
// b: 2
// c: 32. 合并对象
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。结合 Object.entries() 方法，可以轻松地合并多个对象。
// javascriptcn.com 代码示例
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };
const mergedObj = Object.fromEntries([
...Object.entries(obj1),
...Object.entries(obj2),
...Object.entries(obj3),
]);
console.log(mergedObj); // { a: 1, b: 2, c: 3 }3. 过滤对象属性
Object.fromEntries() 方法用于将一个键值对数组转换为一个对象。结合 Object.entries() 和 Array.filter() 方法，可以过滤对象属性。
const obj = { a: 1, b: 2, c: 3 };
const filteredObj = Object.fromEntries(
Object.entries(obj).filter(([key, value]) => value > 1)
);
console.log(filteredObj); // { b: 2, c: 3 }总结
ES9 中的对象方法 Object.values() 和 Object.entries() 提供了一种快速获取对象中属性值和键值对的方式，可以替代传统的 for...in 循环，代码更简洁易读。这两个方法在遍历对象属性、合并对象和过滤对象属性时非常有用。使用这些方法可以提高开发效率，让代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655db541d2f5e1655d7fad86