2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
id: 56533eb9ac21ba0edf2244c8
|
2021-03-14 21:20:39 -06:00
|
|
|
|
title: 使用方括号表示法访问对象属性
|
2018-10-10 18:03:03 -04:00
|
|
|
|
challengeType: 1
|
2020-04-29 18:29:13 +08:00
|
|
|
|
videoUrl: 'https://scrimba.com/c/cBvmEHP'
|
|
|
|
|
forumTopicId: 16163
|
2021-01-13 03:31:00 +01:00
|
|
|
|
dashedName: accessing-object-properties-with-bracket-notation
|
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
|
|
|
|
访问对象属性的第二种方式是方括号表示法(`[]`)。 如果你想访问的属性名中包含空格,就必须使用方括号表示法来获取它的属性值。
|
2020-12-16 00:37:30 -07:00
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
当然,如果属性名不包含空格,也可以使用方括号表示法。
|
2020-12-16 00:37:30 -07:00
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
这是一个使用方括号表示法读取对象属性的例子:
|
2020-04-29 18:29:13 +08:00
|
|
|
|
|
|
|
|
|
```js
|
2021-10-27 15:10:57 +00:00
|
|
|
|
const myObj = {
|
2020-04-29 18:29:13 +08:00
|
|
|
|
"Space Name": "Kirk",
|
|
|
|
|
"More Space": "Spock",
|
|
|
|
|
"NoSpace": "USS Enterprise"
|
|
|
|
|
};
|
2021-10-27 15:10:57 +00:00
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
myObj["Space Name"];
|
|
|
|
|
myObj['More Space'];
|
|
|
|
|
myObj["NoSpace"];
|
2020-04-29 18:29:13 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
`myObj["Space Name"]` 将会是字符串 `Kirk`,`myObj['More Space']` 将会是字符串 `Spock`,并且`myObj["NoSpace"]` 将会是字符串 `USS Enterprise`。
|
|
|
|
|
|
|
|
|
|
注意,如果属性名中包含空格,就必须使用引号(单引号或双引号)将它们包裹起来。
|
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
|
|
|
|
使用方括号读取 `testObj` 中 `an entree` 和 `the drink` 的属性值,并分别将它们赋值给 `entreeValue` 和 `drinkValue`。
|
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
|
|
|
|
`entreeValue` 应该是一个字符串。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
|
assert(typeof entreeValue === 'string');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
`entreeValue` 的值应该为字符串 `hamburger`
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
```js
|
|
|
|
|
assert(entreeValue === 'hamburger');
|
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
`drinkValue` 应该是一个字符串
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
|
assert(typeof drinkValue === 'string');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
`drinkValue` 的值应该为字符串 `water`
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
```js
|
|
|
|
|
assert(drinkValue === 'water');
|
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
|
你应该使用两次方括号
|
2020-04-29 18:29:13 +08:00
|
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
|
assert(code.match(/testObj\s*?\[('|")[^'"]+\1\]/g).length > 1);
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
2020-04-29 18:29:13 +08:00
|
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
|
# --seed--
|
|
|
|
|
|
|
|
|
|
## --after-user-code--
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
(function(a,b) { return "entreeValue = '" + a + "', drinkValue = '" + b + "'"; })(entreeValue,drinkValue);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
// Setup
|
2021-10-27 15:10:57 +00:00
|
|
|
|
const testObj = {
|
2021-01-13 03:31:00 +01:00
|
|
|
|
"an entree": "hamburger",
|
|
|
|
|
"my side": "veggies",
|
|
|
|
|
"the drink": "water"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Only change code below this line
|
2021-10-27 15:10:57 +00:00
|
|
|
|
const entreeValue = testObj; // Change this line
|
|
|
|
|
const drinkValue = testObj; // Change this line
|
2021-01-13 03:31:00 +01:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --solutions--
|
|
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
|
```js
|
2021-10-27 15:10:57 +00:00
|
|
|
|
const testObj = {
|
2021-01-13 03:31:00 +01:00
|
|
|
|
"an entree": "hamburger",
|
|
|
|
|
"my side": "veggies",
|
|
|
|
|
"the drink": "water"
|
|
|
|
|
};
|
2021-10-27 15:10:57 +00:00
|
|
|
|
const entreeValue = testObj["an entree"];
|
|
|
|
|
const drinkValue = testObj['the drink'];
|
2021-01-13 03:31:00 +01:00
|
|
|
|
```
|