我们如何从 JSON 响应中访问包含连字符的数据？ [复制]答案

【问题标题】：How can we access hyphen included data from the JSON response? [duplicate]我们如何从 JSON 响应中访问包含连字符的数据？ [复制]
【发布时间】：2019-08-07 20:32:18
【问题描述】：

我正在使用 vuejs 和 axios，我正在尝试从 wordpress 获取博客文章，除了一件事外一切正常，我正在尝试从响应中提取缩略图，但响应数据包含连字符，所以我无法访问对象，显示错误。这是我要访问的内容

family._embedded['wp:featuredmedia']['0'].media_details.sizes.family-profile-thumb.source_url

这里family 是一个道具，family-profile-thumb 是具体尺寸，我无法更改，这部分会造成问题，如果我将其替换为默认尺寸（如 thumb）它将起作用，例如：

family._embedded['wp:featuredmedia']['0'].media_details.sizes.thumbnail.source_url

有没有办法完成这项工作？

【问题讨论】：

.["family-profile-thumb"].
正如我所说我使用的是 Vuejs，所以在模板中我使用的是这样的如果我替换缩略图并按照您提供的方式添加将不起作用，即使我将双引号更改为单引号，对吗？
你也可以查看这个要点gist.github.com/hygull/df535d30cdd20afc2a6e17aaa292494b。

标签： javascript arrays json object vue-component

【解决方案1】：

使用方括号表示法访问它：

family._embedded["wp:featuredmedia"]["0"].media_details.sizes["family-profile-thumb"].source_url

【讨论】：

【解决方案2】：

只要属性名称不是有效的 JS 标识符，您就需要使用[] 括号表示法来访问该属性。

什么是有效的 JS 标识符？

属性名称不应以 digit 开头，例如 -> 1d
alphanumeric, underscore and $ 以外的任何内容均无效e.g -> 'hello-world'

let a = {
  "hello-world" : 'some value'
}

console.log(a['hello-world'])
console.log(a.hello-world)

你可以在这里阅读更多信息MDN reference

【讨论】：