Files
2022-01-20 20:30:18 +01:00

125 lines
3.8 KiB
Markdown

---
id: 587d7b7c367417b2b2512b18
title: JavaScript オブジェクトにキーと値のペアを追加する
challengeType: 1
forumTopicId: 301153
dashedName: add-key-value-pairs-to-javascript-objects
---
# --description--
最も基本的なオブジェクトは、<dfn>キーと値</dfn>のペアのみの集合です。 言い換えれば、これは<dfn>プロパティ</dfn> ( <dfn>キー</dfn>) と呼ばれる一意の識別子にマッピングされるデータ (<dfn></dfn>) の集まりです。 例を見てみましょう。
```js
const tekkenCharacter = {
player: 'Hwoarang',
fightingStyle: 'Tae Kwon Doe',
human: true
};
```
上記のコードは、`tekkenCharacter` という鉄拳ビデオゲームキャラクターのオブジェクトを定義しています。 オブジェクトには 3 つのプロパティがあり、それぞれが特定の値にマッピングされています。 "origin" などの新しいプロパティを追加したい場合は、`origin` をオブジェクトに割り当てます。
```js
tekkenCharacter.origin = 'South Korea';
```
これにはドット記法を使用しています。 `tekkenCharacter` オブジェクトを確認すると、`origin` プロパティが追加されたことがわかります。 Hwoarang は特徴的なオレンジ色の髪をしていました。 このプロパティをブラケット記法で追加することができます。
```js
tekkenCharacter['hair color'] = 'dyed orange';
```
プロパティにスペースがある場合や、プロパティに名前を付けるために変数を使用する場合には、ブラケット記法が必要となります。 上記の場合、プロパティを引用符で囲んで文字列として示すことで、表示されているとおりに追加されます。 引用符がなければ、変数として評価され、プロパティの名前は変数の値となります。 次に変数を含む例を示します。
```js
const eyes = 'eye color';
tekkenCharacter[eyes] = 'brown';
```
すべての例を追加すると、このオブジェクトは次のようになります。
```js
{
player: 'Hwoarang',
fightingStyle: 'Tae Kwon Doe',
human: true,
origin: 'South Korea',
'hair color': 'dyed orange',
'eye color': 'brown'
};
```
# --instructions--
3 つのエントリを持つ `foods` オブジェクトが作成されています。 任意の構文を用いて、このオブジェクトに新たに 3 つのエントリを追加してください。`bananas` の値は `13``grapes` の値は `35``strawberries` の値は `27` です。
# --hints--
`foods` はオブジェクトである必要があります。
```js
assert(typeof foods === 'object');
```
`foods` オブジェクトには値 `13` を持つキー `bananas` が含まれている必要があります。
```js
assert(foods.bananas === 13);
```
`foods` オブジェクトには値 `35` を持つキー `grapes` が含まれている必要があります。
```js
assert(foods.grapes === 35);
```
`foods` オブジェクトには値 `27` を持つキー `strawberries` が含まれている必要があります。
```js
assert(foods.strawberries === 27);
```
キーと値のペアはドット記法またはブラケット記法を使用して、設定する必要があります。
```js
assert(
code.search(/bananas:/) === -1 &&
code.search(/grapes:/) === -1 &&
code.search(/strawberries:/) === -1
);
```
# --seed--
## --seed-contents--
```js
let foods = {
apples: 25,
oranges: 32,
plums: 28
};
// Only change code below this line
// Only change code above this line
console.log(foods);
```
# --solutions--
```js
let foods = {
apples: 25,
oranges: 32,
plums: 28
};
foods['bananas'] = 13;
foods['grapes'] = 35;
foods['strawberries'] = 27;
```