如何访问在对象的键中有空格的 JavaScript 对象？

我有一个 JavaScript 对象，看起来像这样:

var myTextOptions = {
'cartoon': {
comic: 'Calvin & Hobbes',
published: '1993'
},
'character names': {
kid: 'Calvin',
tiger: 'Hobbes'
}
}

我可以很容易地使用 myTextOptions.cartoon.comic或任何东西访问 cartoon的属性。但是，我还不能获得访问 kid的正确语法。我尝试了以下方法，但没有成功:

myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid
133333 次浏览
小开
最佳答案

使用 ECMAscripts“括号符号”:

myTextOptions[ 'character names' ].kid;

你可以使用任何方式，读和写符号。

欲了解更多信息，请点击这里:

小开

JavaScript 对象的属性也可以使用括号表示法来访问或设置(有关更多细节，请参见 属性访问器)。对象有时称为关联数组，因为每个属性都与可用于访问它的字符串值相关联。例如，您可以访问 myCar 对象的属性如下:

myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

想了解更多，请在 使用 JS 对象继续阅读。

所以在你的案例中是 myTextOptions['character names'].kid;

小开

我们也可以这样做-

myTextOptions[ 'character names' ]['kid'];

当我们有由空格组成的连续键时，这是非常有用的。

小开

让我在这里分享我的解决方案 我使用 VueJs 和类型脚本。

我跟随 json 在 UI 中进行解析和显示

 {
"Brand": "MAMA",
"Variety": "Instant Noodles Coconut Milk Flavour",
"Style": "Pack",
"Country": "Myanmar",
"Stars": 5,
"Top Ten": "2016 #10"
},

我已经创建了下面的模型干扰类型

export interface Resto {
Brand: string;
Variety: string;
Style: string;
Country: string;
Stars: any;
Top_Ten: string;
}

我把这个 API 称为:

   public async getListOfRestos() {
return (await fetch(
`http://starlord.hackerearth.com/TopRamen`,
{
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: undefined
}
)) as IFetchResponse<Resto[]>;
}

在 JSX 中使用如下:

 <div class="parent" v-for="(x,i) in listOfRestos" :key="i">
<div>\{\{x.Brand}}</div>
<div>\{\{x.Variety}}</div>
<div>\{\{x.Style}}</div>
<div>\{\{x.Country}}</div>
<div>\{\{x.Stars}}</div>
<div>\{\{x['Top Ten']}}</div>
</div>

同样也可以在反应和角度。


提交答案