如何解构含带空格键对象的数组？解决空格键解构报错问题

这问题我之前也碰到过！你出错的原因是在对象解构里用了错误的语法来处理带空格的键——咱们来一步步解决它：

核心问题 #

你写的['First Name']不符合对象解构的语法规范：在解构大括号中，对于带空格、特殊字符这类非合法标识符的属性名，不能用方括号包裹，得用带引号的字符串来指定属性名。

两种正确的处理方式 #

根据你的需求，分两种情况给出解决方案：

1. 不需要保留First Name的值，只想把它排除在rest之外

如果你的目标是剔除First Name这个属性，只保留其他剩余属性到rest里，直接把带引号的键名写在解构列表里即可：

data={data.map(({ ID, filePath, accountId, companyId, 'First Name', ...rest }) => rest)}

2. 需要提取First Name的值，给它一个合法变量名

如果你需要用到这个属性的值，因为带空格的名称不能直接作为变量名，我们可以给它指定一个别名（比如firstName）：

data={data.map(({ ID, filePath, accountId, companyId, 'First Name': firstName, ...rest }) => {
  // 这里可以随时使用firstName变量做处理
  return rest; // 或者根据需求返回包含firstName的对象
})}

完整示例演示 #

假设你的原始数据是这样的：

const data = [
  {
    ID: 1,
    filePath: '/docs/resume.pdf',
    accountId: 'user-001',
    companyId: 'corp-007',
    'First Name': 'Mike',
    age: 32,
    department: 'Engineering'
  }
];

用第一种方式处理后，rest会去掉ID、filePath、accountId、companyId和First Name，最终得到：

{ age: 32, department: 'Engineering' }

额外小知识 #

如果你的属性名是动态的（比如存在一个变量里），这时候才需要用方括号的写法，比如：

const key = 'First Name';
data={data.map(({ ID, filePath, accountId, companyId, [key]: firstName, ...rest }) => rest)}

这样就能完美解决带空格键的解构问题啦！

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