| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | id: 587d7b7c367417b2b2512b18 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | title: 将键值对添加到对象中 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | challengeType: 1 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | forumTopicId: 301153 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | dashedName: add-key-value-pairs-to-javascript-objects | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --description--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 对象(object)本质上是键值对(<dfn>key-value pair</dfn>)的集合。 或者说,一系列被映射到唯一标识符的数据就是对象;习惯上,唯一标识符叫做属性(<dfn>property</dfn>)或者键(<dfn>key</dfn>);数据叫做值(<dfn>value</dfn>)。 让我们来看一个简单的例子: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-01-12 08:18:51 -08:00
										 |  |  |  | const tekkenCharacter = { | 
					
						
							|  |  |  |  |   player: 'Hwoarang', | 
					
						
							|  |  |  |  |   fightingStyle: 'Tae Kwon Doe', | 
					
						
							|  |  |  |  |   human: true | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | }; | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 上面的代码定义了一个叫做 `tekkenCharacter` 的“铁拳”游戏人物对象。 它有三个属性,每个属性都对应一个特定的值。 如果我们想为它再添加一个叫做 `origin` 的属性,可以这样写: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-01-12 08:18:51 -08:00
										 |  |  |  | tekkenCharacter.origin = 'South Korea'; | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 上面的代码中,我们使用了点号表示法。 如果我们现在输出 `tekkenCharacter` 对象,便可以看到它具有 `origin` 属性。 接下来,因为这个人物在游戏中有着与众不同的橘色头发, 我们可以通过方括号表示法来为它添加这个属性,像这样: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-01-12 08:18:51 -08:00
										 |  |  |  | tekkenCharacter['hair color'] = 'dyed orange'; | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 如果要设置的属性中存在空格,或者要设置的属性是一个变量,那我们必须使用方括号表示法(bracket notation)来为对象添加属性。 在上面的代码中,我们把属性(hair color)放到引号里,以此来表示整个字符串都是需要设置的属性。 如果我们不加上引号,那么中括号里的内容会被当作一个变量来解析,这个变量对应的值就会作为要设置的属性, 请看这段代码: | 
					
						
							| 
									
										
										
										
											2021-01-12 08:18:51 -08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							|  |  |  |  | const eyes = 'eye color'; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | tekkenCharacter[eyes] = 'brown'; | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 执行以上所有示例代码后,对象会变成这样: | 
					
						
							| 
									
										
										
										
											2021-01-12 08:18:51 -08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							|  |  |  |  | { | 
					
						
							|  |  |  |  |   player: 'Hwoarang', | 
					
						
							|  |  |  |  |   fightingStyle: 'Tae Kwon Doe', | 
					
						
							|  |  |  |  |   human: true, | 
					
						
							|  |  |  |  |   origin: 'South Korea', | 
					
						
							|  |  |  |  |   'hair color': 'dyed orange', | 
					
						
							|  |  |  |  |   'eye color': 'brown' | 
					
						
							|  |  |  |  | }; | 
					
						
							|  |  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --instructions--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 我们已经为你创建了包含三个项目的 `foods` 对象。 请使用上述任意语法,来为 foods 对象添加如下三个键值对:`bananas` 属性,值为 `13`;`grapes` 属性,值为 `35`;`strawberries` 属性,值为 `27`。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | `foods` 应为一个对象。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | assert(typeof foods === 'object'); | 
					
						
							|  |  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | `foods` 应有一个值为 `13` 的 `bananas` 属性。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert(foods.bananas === 13); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | `foods` 应有一个值为 `35` 的 `grapes` 属性。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert(foods.grapes === 35); | 
					
						
							|  |  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | `foods` 应有一个值为 `27` 的 `strawberries` 属性。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert(foods.strawberries === 27); | 
					
						
							|  |  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 应使用点号表示法或方括号表示法来设置对象的属性。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | assert( | 
					
						
							|  |  |  |  |   code.search(/bananas:/) === -1 && | 
					
						
							|  |  |  |  |     code.search(/grapes:/) === -1 && | 
					
						
							|  |  |  |  |     code.search(/strawberries:/) === -1 | 
					
						
							|  |  |  |  | ); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2020-08-04 15:14:21 +08:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | # --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); | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --solutions--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | let foods = { | 
					
						
							|  |  |  |  |   apples: 25, | 
					
						
							|  |  |  |  |   oranges: 32, | 
					
						
							|  |  |  |  |   plums: 28 | 
					
						
							|  |  |  |  | }; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | foods['bananas'] = 13; | 
					
						
							|  |  |  |  | foods['grapes']  = 35; | 
					
						
							|  |  |  |  | foods['strawberries'] = 27; | 
					
						
							|  |  |  |  | ``` |