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

【问题标题】：How can I access a JavaScript object which has spaces in the object's key?如何访问对象键中有空格的 JavaScript 对象？
【发布时间】：2012-01-09 05:15:16
【问题描述】：

我有一个看起来像这样的 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

【问题讨论】：

在谷歌浏览器中，如果你去检查元素，然后将鼠标悬停在 json 文件数据集上，每个单独的数据集都会出现一个工具提示，显示它的路径，它还让你可以选择复制进入剪贴板的路径。仅供参考。
很好的答案。但最后一个选项对我不起作用。
更多...当我键入 myTextOptions.character%20n.kid 时返回“NaN”。最后一个属性名称（孩子）无关紧要，应该是其他名称。我在 Debian 9 上使用 FireFox Quantum 8.3.0esr（64 位）

标签： javascript object

【解决方案1】：

使用 ECMAscripts “括号表示法”：

myTextOptions[ 'character names' ].kid;

您可以以任何一种方式使用该符号，阅读和写作。

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

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

【讨论】：

julio 在 OP 中提到他已经尝试过使用 myTextOptions.["character names"].kid - 为了完整地回答这个问题，我想知道为什么这不起作用？
@James_F 因为他也同时使用了dot notation。必须只有一个访问器指令。
哦，是的，对不起 - 看起来太难了，我没有看到括号前的多余点！ - 谢谢
@JuanP.Ortiz，如果您使用 typescript，这不是一个好习惯，您将失去 typescript 编译检查。
@RosdiKasim -- 添加，可以使用 [key: type]: any in typescript。即原始键“My Id”是一个字符串，所以可以在界面中声明“[My_Id: string]: any”；

【解决方案2】：

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

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

更多信息，请继续阅读Working with JS Objects。

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

【讨论】：

【解决方案3】：

我们也可以这样做——

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

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

【讨论】：

【解决方案4】：

让我在这里分享我的解决方案我正在使用带有类型脚本的 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>

同样适用于 React 和 Angular。

【讨论】：