Object.keys，values，entries

對各個數據結構的學習至此告壹段落，下面讓我們討論壹下如何叠代它們。

在前面的章節中，我們認識了 map.keys()，map.values() 和 map.entries() 方法。

這些方法是通用的，有壹個共同的約定來將它們用于各種數據結構。如果我們創建壹個我們自己的數據結構，我們也應該實現這些方法。

它們支持：

• Map

• Set

• Array

普通對象也支持類似的方法，但是語法上有壹些不同。

Object.keys，values，entries

對于普通對象，下列這些方法是可用的：

• Object.keys(obj) —— 返回壹個包含該對象所有的鍵的數組。

• Object.values(obj) —— 返回壹個包含該對象所有的值的數組。

• Object.entries(obj) —— 返回壹個包含該對象所有 [key, value] 鍵值對的數組。

……但是請注意區別（比如說跟 map 的區別）：

第壹個區別是，對于對象我們使用的調用語法是 Object.keys(obj)，而不是 obj.keys()。

爲什麽會這樣？主要原因是靈活性。請記住，在 JavaScript 中，對象是所有複雜結構的基礎。因此，我們可能有壹個自己創建的對象，比如 data，並實現了它自己的 data.values() 方法。同時，我們依然可以對它調用 Object.values(data) 方法。

第二個區別是 Object.* 方法返回的是“真正的”數組對象，而不只是壹個可叠代對象。這主要是曆史原因。

舉個例子：

let user = {
  name: "John",
  age: 30
};

• Object.keys(user) = ["name", "age"]

• Object.values(user) = ["John", 30]

• Object.entries(user) = [ ["name","John"], ["age",30] ]

這裏有壹個使用 Object.values 來遍曆屬性值的例子：

let user = {
  name: "John",
  age: 30
};

// 遍曆所有的值
for (let value of Object.values(user)) {
  alert(value); // John, then 30
}

Object.keys/values/entries 會忽略 symbol 屬性

就像 for..in 循環壹樣，這些方法會忽略使用 Symbol(...) 作爲鍵的屬性。

通常這很方便。但是，如果我們也想要 Symbol 類型的鍵，那麽這兒有壹個單獨的方法 Object.getOwnPropertySymbols，它會返回壹個只包含 Symbol 類型的鍵的數組。另外，還有壹種方法 Reflect.ownKeys(obj)，它會返回 所有 鍵。

轉換對象

對象缺少數組存在的許多方法，例如 map 和 filter 等。

如果我們想應用它們，那麽我們可以使用 Object.entries，然後使用 Object.fromEntries：

1. 使用 Object.entries(obj) 從 obj 獲取由鍵/值對組成的數組。

2. 對該數組使用數組方法，例如 map，對這些鍵/值對進行轉換。

3. 對結果數組使用 Object.fromEntries(array) 方法，將結果轉回成對象。

例如，我們有壹個帶有價格的對象，並想將它們加倍：

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 將價格轉換爲數組，將每個鍵/值對映射爲另壹對
  // 然後通過 fromEntries 再將結果轉換爲對象
  Object.entries(prices).map(entry => [entry[0], entry[1] * 2])
);

alert(doublePrices.meat); // 8

乍壹看，可能感覺有點困難，但是使用壹兩次之後就很容易理解了。我們可以通過這種方式建立強大的轉換鏈。

任務

屬性求和

重要程度: 5

有壹個帶有任意數量薪水的 salaries 對象。

編寫函數 sumSalaries(salaries)，該函數使用 Object.values 和 for..of 循環返回所有薪水的總和。

如果 salaries 是空對象，那麽結果必須是 0。

舉個例子：

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

alert( sumSalaries(salaries) ); // 650

打開帶有測試的沙箱。

解決方案

function sumSalaries(salaries) {

  let sum = 0;
  for (let salary of Object.values(salaries)) {
    sum += salary;
  }

  return sum; // 650
}

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

alert( sumSalaries(salaries) ); // 650

還有另外壹種可選方案，即使用 Object.values 和 reduce 來求和：

// 使用 reduce 方法遍曆 salaries 數組
// 把它們加起來
// 返回最終結果
function sumSalaries(salaries) {
  return Object.values(salaries).reduce((a, b) => a + b, 0) // 650
}

使用沙箱的測試功能打開解決方案。

計算屬性數量

重要程度: 5

寫壹個函數 count(obj)，該函數返回對象中的屬性的數量：

let user = {
  name: 'John',
  age: 30
};

alert( count(user) ); // 2

試著使代碼盡可能簡短。

P.S. 忽略 Symbol 類型屬性，只計算“常規”屬性。

打開帶有測試的沙箱。

解決方案

function count(obj) {
  return Object.keys(obj).length;
}

使用沙箱的測試功能打開解決方案。