深入解析object.values()

一、什么是object.values()

在JavaScript中，对象 (Object) 是指包含键值对的数据结构，而 Object.values() 是一种函数用于返回对象中所有键对应的值的数组。

具体来说，该方法返回一个给定对象自身的所有可枚举属性的值的数组，值的顺序与使用 for...in 循环遍历属性值的顺序相同(除非属性名是数值或数字字符串)。

以下是一个简单的示例，演示如何使用 Object.values()：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

二、使用object.values()的优点

1. 代码简洁

在使用Object.values()之前，如果要通过循环遍历对象获取所有键对应的值，我们通常会使用for...in，然后将每个值推到一个数组中。但是，如下所示的代码可读性不佳，并且可能出现错误：

const obj = { a: 1, b: 2, c: 3 };
const values = [];

for(let key in obj) {
  if(obj.hasOwnProperty(key)) {
    values.push(obj[key]);
  }
}

相反，我们可以使用 Object.values() 更为简洁地实现同样的行为，如下所示：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);

2. 更好的可读性

使用 Object.values() 更好的可读性可以使您更快地了解代码中正在处理什么类型的数据，从而使代码更可维护。例如，在以下代码片段中，您很快就能确定代码正在处理的是一个字符串数组：

const strArr = ['foo', 'bar', 'baz'];
const values = Object.values(strArr);
console.log(values); // ['foo', 'bar', 'baz']

3. 显式地引用对象的属性值

使用 Object.values() 可以有助于您更显式地引用对象的属性值。例如，在以下代码片段中，您可以直接在模板字符串中引用 user.name 属性的值：

const user = { name: 'Alex', age: 22 };
console.log(`Hello ${Object.values(user)[0]}`); // "Hello Alex"

三、注意事项

1. Object.values() 返回的顺序是不确定的。顺序取决于 JavaScript 引擎的实现。一般情况下返回的数组顺序和属性遍历的顺序相同，但这不是一定的。

2. Object.values() 无法返回 Symbol 属性。

3. Object.values() 不受对象属性访问器 (getter) 的影响，但会返回继承属性。

四、示例代码

const obj1 = { a: 'foo', b: 'bar', c: 'baz' };
const values1 = Object.values(obj1);
console.log(values1);
// ["foo", "bar", "baz"]

const obj2 = { 100: 'a', 2: 'b', 7: 'c' };
const values2 = Object.values(obj2);
console.log(values2);
// ["b", "c", "a"]

const obj3 = Object.create({}, { p: { value: 42 } });
const values3 = Object.values(obj3);
console.log(values3);
// []

const arr = ['e', 'd', 'c'];
const values4 = Object.values(arr);
console.log(values4);
// ["e", "d", "c"]