在 ES8 中，JavaScript 引入了三个新的 Object 方法：Object.keys()、Object.values() 和 Object.entries()。这三个方法都可以用来迭代对象的属性，但是它们之间有一些区别。
Object.keys()
Object.keys() 方法返回一个由对象的所有可枚举属性的名称组成的数组。
语法
Object.keys(obj)
参数
- obj：要返回其枚举属性的对象。
返回值
一个表示给定对象的所有可枚举属性的字符串数组。
示例代码
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]Object.values()
Object.values() 方法返回一个由对象的所有可枚举属性的值组成的数组。
语法
Object.values(obj)
参数
- obj：要返回其枚举属性值的对象。
返回值
一个由给定对象的所有可枚举属性值组成的数组。
示例代码
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]Object.entries()
Object.entries() 方法返回一个由对象的所有可枚举属性的键值对数组组成的数组。
语法
Object.entries(obj)
参数
- obj：要返回其枚举属性键值对的对象。
返回值
一个由给定对象的所有可枚举属性键值对组成的数组。
示例代码
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]区别
Object.keys()、Object.values() 和 Object.entries() 方法的主要区别是它们返回的值的格式不同。Object.keys() 返回的是一个由对象的属性名称组成的数组，Object.values() 返回的是一个由对象的属性值组成的数组，而 Object.entries() 返回的是一个由对象的属性键值对数组组成的数组。
此外，需要注意的是 Object.keys()、Object.values() 和 Object.entries() 方法都只会迭代对象的可枚举属性。如果对象的某个属性是不可枚举的，那么这个属性将不会被迭代。
指导意义
Object.keys()、Object.values() 和 Object.entries() 方法的引入，使得在迭代对象属性时变得更加方便。例如，可以使用 Object.keys() 来迭代对象的属性名称，然后使用这些名称来访问对象的属性值。类似地，可以使用 Object.values() 来迭代对象的属性值，而不必关心属性名称。Object.entries() 则可以用来同时迭代对象的属性名称和属性值。
此外，这些方法的使用也可以使代码更加简洁和易于理解。例如，在过去，要迭代对象的属性名称和属性值，可能需要使用 for...in 循环来实现。现在，使用 Object.entries() 就可以直接得到一个由属性键值对组成的数组，避免了使用循环的复杂性。因此，学习和掌握这些方法对于提高前端开发效率和代码质量都是非常有帮助的。
总结
Object.keys()、Object.values() 和 Object.entries() 方法在迭代对象属性时非常有用。它们之间的区别在于返回值的格式不同，但是它们都可以用来迭代对象的可枚举属性。了解和掌握这些方法对于提高前端开发效率和代码质量都是非常有帮助的。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556b240d2f5e1655d11568f