JavaScript 如何访问属性名含方括号与空格的JSON数据结构

通过JS方括号语法访问对象属性时，括号内的字符串值必须和对象的实际键名逐字符完全一致，你之前的两次尝试都没有匹配到真实键名，才会出错：

• 第一次写法profile[0]['Name | First']：漏掉了键名首尾自带的[、]字符，实际的完整键名是"[Name | First]"，和你传的字符串不匹配，因此返回undefined
• 第二次写法profile[0][Name | First]：没有把键名包裹成字符串字面量，JS引擎会直接把Name识别成未定义的变量去查找，因此抛出Name is not defined的报错

直接把完整的、带首尾方括号的键名用引号包起来，放到方括号访问语法里即可，示例代码：

// 读取第一个profile条目的名字
profile[0]['[Name | First]'] // 返回值: "Lori"

// 读取第二个profile条目的联系名
profile[1]['[Contact Name]'] // 返回值: "Jeanine Samson"

// 读取第一个条目的profile ID
profile[0]['[Profile ID]'] // 返回值: 1001398965

如果需要频繁读取这类特殊键名，可以把键名提前存为常量简化代码，避免漏写字符：

// 预定义所有用到的特殊键
const KEYS = {
  PROFILE_ID: '[Profile ID]',
  FIRST_NAME: '[Name | First]',
  LAST_NAME: '[Name | Last]',
  CONTACT_NAME: '[Contact Name]'
}

// 读取时直接复用常量即可
profile[0][KEYS.FIRST_NAME] // 返回值: "Lori"
profile[1][KEYS.CONTACT_NAME] // 返回值: "Jeanine Samson"

补充说明：这类属性名带方括号的结构并没有特殊的JSON语法规则，那些[、]就是属性名字符串本身的一部分，和普通字符串当键的逻辑完全一致。只要对象的属性名包含空格、特殊符号、数字开头、或与JS保留字重名，就不能用点语法访问，必须使用方括号加字符串的方式取值；这类带方括号包裹的键名因为结构特殊，完全无法用点语法取值，只能通过上述字符串匹配的方式访问。

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