Question

我有一个看起来像这样的JavaScript对象：

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

我可以使用cartoon或其他方式轻松访问myTextOptions.cartoon.comic的属性。但是，我无法获得访问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

Answer 1

使用ECMA脚本“括号表示法”：

myTextOptions[ 'character names' ].kid;

你可以使用这种表示法，阅读和阅读书面方式。

欲了解更多信息，请阅读：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Answer 2

也可以使用括号表示法访问或设置JavaScript对象的属性（有关详细信息，请参阅property accessors）。对象有时称为关联数组，因为每个属性都与可用于访问它的字符串值相关联。因此，例如，您可以按如下方式访问myCar对象的属性：

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

有关详情，请参阅Working with JS Objects。

所以在你的情况下它是myTextOptions['character names'].kid;

Answer 3

我们也可以通过-

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

当我们有包含空格的连续键时，这很有用。

Answer 4

在Google Chrome浏览器中，如果您要检查元素，然后将鼠标悬停在json文件数据集上，则每个单独的数据集都会显示一个工具提示，显示其路径，还可以选择将路径复制到剪贴板中。仅供参考。

Answer 5

让我在这里分享我的解决方案我正在将VueJs与脚本类型配合使用。

我跟随json解析并显示在UI中

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

我创建了以下模型来干扰Typescript

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>

Same也可以在React和Angular中使用。

Answer 6

使用此代码

myTextOptions.["character names"]["kid"];

如何访问对象键中包含空格的JavaScript对象？

6 个答案: