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

Question

我有一个 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

- julio

---

在Google Chrome中，如果您前往检查元素，然后将鼠标悬停在JSON文件数据集上，每个单独的数据集都会出现工具提示，显示其路径，并且还提供将该路径复制到剪贴板的选项。这只是一个提示。 - Simon Suh

很好的答案。但是最后一个选项对我没有起作用。 - Daniel Bandeira

当我输入myTextOptions.character%20n.kid时，返回“NaN”。最后一个属性名称（kid）无关紧要，可以是任何其他名称。我在Debian 9上使用FireFox Quantum 8.3.0esr（64位）。 - Daniel Bandeira

Answer 1

使用ECMAScript的 "括号表示法":

myTextOptions[ 'character names' ].kid;

您可以使用这种表示法进行读写。

欲了解更多信息，请参阅此处：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects

- jAndy

---

在原帖中julio提到他已经尝试使用myTextOptions.["character names"].kid，为了完整回答这个问题，我想知道为什么它没有起作用？ - James_F

由于他同时还使用了“点表示法”，因此需要选择一个访问指示符。 - jAndy

哦，是的，抱歉 - 我一直在努力寻找，没有看到括号前面的额外点！- 谢谢。 - James_F

有人知道在对象键中使用空格是好还是坏的做法吗？ - Juan P. Ortiz

@JuanP.Ortiz，如果你正在使用TypeScript，这不是一个好的做法，因为你会失去TypeScript编译检查。 - Rosdi Kasim

@RosdiKasim -- 另外，可以在 TypeScript 中使用 [key: type]: any。例如，原始键“我的 ID”是一个字符串，因此可以在接口中声明 “[My_Id: string]: any”。 - Pramod Mali

Answer 2

JavaScript对象的属性也可以使用中括号标记来访问或设置（更多细节请参见 属性访问器）。由于每个属性都与一个字符串值相关联，因此有时将对象称为关联数组，以便使用该字符串值来访问它。因此，例如，您可以按以下方式访问myCar对象的属性：

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

想要了解更多，请查看JS对象操作指南。

因此，在您的情况下，应该使用myTextOptions['character names'].kid;

- Ahmad Awais

Answer 3

我们也可以通过以下方式完成 - myTextOptions[ 'character names' ]['kid'];

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

- Shubham AK

Answer 4

让我在这里分享我的解决方案，我正在使用VueJs和TypeScript。

我得到了以下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>

在 React 和 Angular 中也同样适用。

- Vikas Gupta