オブジェクト.キー、値、エントリ

著者：Eve Cole 更新時間：2024-12-24 15:39:20

個々のデータ構造から離れて、それらの反復について話しましょう。

前の章では、 map.keys() 、 map.values() 、 map.entries()のメソッドについて説明しました。

これらのメソッドは汎用的なものであり、データ構造に使用するという共通の合意があります。独自のデータ構造を作成した場合は、それも実装する必要があります。

これらは以下に対してサポートされています。

Map
Set
Array

プレーンオブジェクトも同様のメソッドをサポートしていますが、構文は少し異なります。

オブジェクト.キー、値、エントリ

プレーンオブジェクトの場合は、次のメソッドを使用できます。

Object.keys(obj) – キーの配列を返します。
Object.values(obj) – 値の配列を返します。
Object.entries(obj) – [key, value]ペアの配列を返します。

違いに注意してください (たとえば、マップと比較して)。

	地図	物体
呼び出し構文	`map.keys()`	`Object.keys(obj)`ですが、 `obj.keys()`ではありません
返品	反復可能な	「実際の」配列

最初の違いは、 obj.keys()ではなくObject.keys(obj)を呼び出す必要があることです。

なぜそうなるのでしょうか？主な理由は柔軟性です。オブジェクトは JavaScript のすべての複雑な構造の基礎であることを思い出してください。したがって、独自のdata.values()メソッドを実装するdataのような独自のオブジェクトを持つことができます。そして、引き続きObject.values(data)を呼び出すことができます。

2 番目の違いは、 Object.*メソッドが単なる反復可能オブジェクトではなく、「実際の」配列オブジェクトを返すことです。それは主に歴史的な理由によるものです。

例えば：

ユーザー = { にします
  名前：「ジョン」、
  年齢: 30歳
};

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

Object.valuesを使用してプロパティ値をループする例を次に示します。

ユーザー = { にします
  名前：「ジョン」、
  年齢: 30歳
};

// 値をループします
for (Object.values(user) の値を許可) {
  アラート(値); // ジョン、当時 30 歳
}

Object.keys/values/entries はシンボリックプロパティを無視します

for..inループと同様に、これらのメソッドはSymbol(...)キーとして使用するプロパティを無視します。

通常はそれが便利です。ただし、シンボリックキーも必要な場合は、シンボリックキーのみの配列を返す別のメソッド Object.getOwnPropertySymbols があります。また、すべてのキーを返すメソッド Reflect.ownKeys(obj) も存在します。

オブジェクトの変形

オブジェクトには、配列に存在する多くのメソッド (たとえば、 map 、 filterなど) がありません。

それらを適用したい場合は、 Object.fromEntriesの後にObject.entriesを使用します。

Object.entries(obj)を使用して、 objからキーと値のペアの配列を取得します。
これらのキーと値のペアを変換するには、その配列に対して配列メソッド (たとえば、 map ) を使用します。
結果の配列に対してObject.fromEntries(array)を使用して、オブジェクトに戻します。

たとえば、価格を持つオブジェクトがあり、それらを 2 倍にしたいとします。

価格 = { とします
  バナナ：1本、
  オレンジ：2、
  肉：4、
};

let doublePrices = Object.fromEntries(
  // 価格を配列に変換し、各キーと値のペアを別のペアにマッピングします
  // その後、fromEntries がオブジェクトを返します
  Object.entries(価格).map(entry => [entry[0],entry[1] * 2])
);

アラート(doublePrices.meat); // 8

一見難しそうに見えますが、1～2回使うと簡単に理解できるようになります。このようにして、強力な変換の連鎖を作成できます。

タスク

プロパティを合計する

重要度: 5

任意の数の給与を含むsalariesオブジェクトがあります。

Object.valuesとfor..ofループを使用して、すべての給与の合計を返す関数sumSalaries(salaries)を作成します。

salariesが空の場合、結果は0でなければなりません。

例えば：

給与 = { とします
  「ジョン」: 100、
  「ピート」: 300、
  「メアリー」：250
};

alert( sumSalaries(salaries) ); // 650

テストを含むサンドボックスを開きます。

関数 sumSalaries(給与) {

  合計 = 0 とします。
  for (給与を Object.values(salaries) にします) {
    合計 += 給与;
  }

  合計を返します。 // 650
}

給与 = { とします
  「ジョン」: 100、
  「ピート」: 300、
  「メアリー」：250
};

alert( sumSalaries(salaries) ); // 650

または、オプションで、 Object.valuesとreduce使用して合計を取得することもできます。

 // 給与の配列に対するループを減らします。
// それらを合計します
// そして結果を返します
関数 sumSalaries(給与) {
  return Object.values(salaries).reduce((a, b) => a + b, 0) // 650
}

サンドボックス内のテストを含むソリューションを開きます。

カウントプロパティ

重要度: 5

オブジェクト内のプロパティの数を返す関数count(obj)を作成します。

ユーザー = { にします
  名前：「ジョン」、
  年齢: 30歳
};

アラート( カウント(ユーザー) ); // 2

コードをできるだけ短くするようにしてください。

PS 記号プロパティを無視し、「通常の」プロパティのみをカウントします。

テストを含むサンドボックスを開きます。

関数カウント(obj) {
  戻り値 Object.keys(obj).length;
}

サンドボックス内のテストを含むソリューションを開きます。