ES12（ECMAScript 2021）是 JavaScript 的最新标准，它为开发者提供了更多方便快捷的 API 和语言特性。其中，Object.keys()、Object.values() 与 Object.entries() 是开发过程中非常常用的三个方法。在本文中，我们将详细讲解它们的用法和功能，帮助读者深入理解和掌握这些方法，以及如何更好地运用它们来提升开发效率。
基本函数
Object.keys()、Object.values() 与 Object.entries() 是 JavaScript 中针对对象的三个内建函数。它们的作用分别是：
- Object.keys()：返回一个由对象键组成的数组。
- Object.values()：返回一个由对象值组成的数组。
- Object.entries()：返回一个由对象键值对组成的二维数组。
这三个方法都可以应用于普通对象（plain objects）和类数组对象（array-like objects）。例如：
// javascriptcn.com 代码示例
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]]
// 使用类数组对象
const arrLikeObj = { 0: "a", 1: "b", 2: "c", length: 3 };
console.log(Object.keys(arrLikeObj)); // ["0", "1", "2", "length"]
console.log(Object.values(arrLikeObj)); // ["a", "b", "c", 3]
console.log(Object.entries(arrLikeObj)); // [["0", "a"], ["1", "b"], ["2", "c"], ["length", 3]]可见，这三个函数的返回值都相应地转换为数组。
用法
Object.keys()
Object.keys() 返回一个由给定对象的所有可枚举属性键组成的数组，不包括继承来的属性。
可枚举属性是指对象的属性（包括自有属性和从原型链中继承来的属性），且它们的 enumerable 属性值为 true。当我们在定义一个属性时没有明确指定 enumerable 属性，其默认值为 true。
以下是 Object.keys() 的用法示例：
// javascriptcn.com 代码示例
const obj1 = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj1)); // ["a", "b", "c"]
const obj2 = Object.create(obj1, {
d: {
value: 4,
enumerable: true // 也可以设置为 false
}
});
console.log(Object.keys(obj2)); // ["d"]上面的代码中，obj2 继承了 obj1 的属性，但它仅有一个可枚举属性 d。
Object.values()
Object.values() 返回一个由给定对象的所有可枚举属性值组成的数组，不包括继承来的属性值。
以下是 Object.values() 的用法示例：
// javascriptcn.com 代码示例
const obj1 = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj1)); // [1, 2, 3]
const obj2 = Object.create(obj1, {
d: {
value: 4,
enumerable: true
}
});
console.log(Object.values(obj2)); // [4]Object.entries()
Object.entries() 返回一个由给定对象的所有可枚举属性键值对组成的数组，不包括继承来的属性键值对。
以下是 Object.entries() 的用法示例：
// javascriptcn.com 代码示例
const obj1 = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj1)); // [["a", 1], ["b", 2], ["c", 3]]
const obj2 = Object.create(obj1, {
d: {
value: 4,
enumerable: true
}
});
console.log(Object.entries(obj2)); // [["d", 4]]与 Object.values() 类似，Object.entries() 的返回数组中的元素也是有序的。
稳定性
Object.keys()、Object.values() 与 Object.entries() 的方法默认情况下是不稳定的，即它们返回的顺序是随机的，而不一定跟定义时的顺序相同。
ES12 中，这三个函数的稳定性得到了改善。Object.keys()、Object.values() 与 Object.entries() 后跟着排序符的调用，它们的返回值将会按照正常的字符串排序规则进行排序。这个排序符可以是 String.prototype.localeCompare() 或其它排序算法。
以下是按照字母顺序排列的 Object.keys() 的用法示例：
const obj = { c: 1, a: 2, b: 3 };
console.log(Object.keys(obj).sort()); // ["a", "b", "c"]总结
Object.keys()、Object.values() 与 Object.entries() 是 JavaScript 中非常常用的三个方法。它们对于对象的属性遍历和数据处理都非常有用。在开发过程中，可以运用它们提高代码的效率。
值得注意的是，ES12 中，这三个函数默认情况下的返回值是不稳定的，但是在加入排序符之后就能保证稳定性。因此，在开发过程中，我们应该尽可能引入排序符，以防止因为非稳定排序产生的 bug。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533e43f7d4982a6eb795b48