深入解析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"]