個別のデータ構造から離れて、それらの繰り返し処理について話しましょう。

前のチャプターで、map.keys(), map.values(), map.entries() と言うメソッドを見ました。

これらのメソッドは一般的なものであり、データ構造に対してそれを使うことは一般的な意見の一致です。独自のデータ構造を作成するときはそれらも実装しておく方がよいです。

これらは以下でサポートされています:

  • Map
  • Set
  • Array (arr.values() を除く)

普通のオブジェクトもまた同様のメソッドをサポートします。しかし構文は少し異なります。

Object.keys, values, entries

通常のオブジェクトでは、次のメソッドが使えます。:

…しかしその違いに注意してください(例として map との比較です。):

Map Object
構文 map.keys() Object.keys(obj) です。 obj.keys() ではありません。
戻り値 iterable “本当の” Array

最初の違いは、Object.keys(obj) と呼ばないといけないことです。obj.keys() ではありません。

なぜそうなっているのでしょう?主な理由は柔軟性です。JavaScript ではオブジェクトは全ての複雑な構造のベースであることを覚えておいてください。従って、独自の order.values() メソッドを実装した order のような独自のオブジェクトを持つかもしれません。そして、その上でもまだ Object.values(order) を呼ぶことができます。

2つ目の違いは、Object.* メソッドが “本当の” 配列オブジェクトを返すことです、単なる iterable ではなく。これは主に歴史的な理由です。

例:

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, そして 30
}

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

ちょうど for..in ループのように、これらのメソッドはキーとして Symbol(...) を使っているプロパティを無視します。

通常それは便利です。しかし、もしもシンボリックなキーも同様にしたい場合、別のメソッド Object.getOwnPropertySymbols があります。これはシンボリックのキーのみの配列を返します。また、メソッド Reflect.ownKeys(obj)全ての キーを返します。

タスク

重要性: 5

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

Object.valuesfor..of ループを使ってすべての給与の合計を返す関数 sumSalaries(salaries) を書いてください。

もし salaries が空の場合、結果は 0 になります。

例:

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

alert( sumSalaries(salaries) ); // 650

テストと一緒にサンドボックスを開く

重要性: 5

オブジェクトの中のプロパティの数を返す関数 count(obj) を書いてください。

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

alert( count(user) ); // 2

できるだけ短いコードを作ってください。

P.S. シンボリックプロパティは無視し、“通常” のものだけをカウントしてください。

テストと一緒にサンドボックスを開く

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。