如何在JavaScript中对含特殊字符键的嵌套对象解构并使用别名

正确的解构写法 #

你现有代码的错误主要有两点：

1. 同一层级下重复声明_links属性会导致前面的解构内容被覆盖，所有_links下的子属性应该放在同一个_links解构块内
2. 带特殊字符的键名+嵌套数组/对象的解构语法使用错误，别名和内部解构的结构顺序写反了

如果你只需要获取三个对应路径的href值，写法如下：

const {
  _links: {
    self: [{ href: mainMedia }],
    "wp:attachment": [{ href: attachment }],
    "wp:featuredmedia": [{ href: featuredMedia }]
  }
} = data;

如果你同时需要给wp:attachment、wp:featuredmedia对应的整个数组设置别名，写法如下：

const {
  _links: {
    self: [{ href: mainMedia }],
    "wp:attachment": attachmentMedia,
    "wp:attachment": [{ href: attachment }],
    "wp:featuredmedia": featuredMedia,
    "wp:featuredmedia": [{ href: featuredAttachment }]
  }
} = data;

可选优化 #

如果对应数组可能为空，或者数组内的对象不存在href属性，可以添加默认值避免运行时报错：

const {
  _links: {
    self: [{ href: mainMedia } = {}] = [],
    "wp:attachment": [{ href: attachment } = {}] = [],
    "wp:featuredmedia": [{ href: featuredMedia } = {}] = []
  }
} = data;

内容的提问来源于stack exchange，提问作者Nazehs