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

IT技术 javascript object
2021-01-22 00:28:22

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

使用 ECMAscripts 的“括号符号”：

myTextOptions[ 'character names' ].kid;

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

有关更多信息，请阅读此处：

哦，是的，对不起 - 看起来太难了，我没有看到括号前的额外点！- 谢谢
2021-03-11 00:28:22
@JuanP.Ortiz，如果您使用typescript，这不是一个好习惯，您将失去typescript编译检查。
2021-03-13 00:28:22
@RosdiKasim——补充一点，可以在typescript中使用 [key: type]: any。即原始键“My Id”是一个字符串，因此可以在接口中声明“[My_Id: string]: any”；
2021-03-28 00:28:22
@James_F 因为他也同时使用了dot notation。必须只有一个访问器指令。
2021-04-03 00:28:22
julio 在 OP 中提到他已经尝试使用myTextOptions.["character names"].kid- 为了这个问题的完整性，我想知道为什么这不起作用？
2021-04-09 00:28:22

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"
  },

我在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。

其它你可能感兴趣的问题
上一篇如何在 JavaScript 中压缩两个数组？ 下一篇在同一页面上多次运行 Greasemonkey 脚本？