如何从HTTP Response中选取键名包含下划线或括号的对象

你所有写法报错的根本原因是漏了对res.data数组的下标访问，从你提供的响应结构可以看出，res.data是长度为1的数组，存储目标字段的对象是该数组的第0个元素，而非res.data本身。

针对包含括号、空格、中划线等不符合JS标识符规范的对象键名，JS原生支持方括号字符串语法访问，该语法本身没有问题，你只需补充数组下标访问步骤即可。

访问heading_(en)的正确写法 #

axios.get('/home')
    .then(res => {
        // 先取数组第0项，再用方括号访问含特殊符号的键
        const $heading = res.data[0]['heading_(en)'];
    })

访问heading_en的正确写法 #

该键名不含特殊语法符号，点语法和方括号语法都支持：

// 点语法写法
const $heading = res.data[0].heading_en;
// 方括号写法也可正常运行
const $heading = res.data[0]['heading_en'];

你之前写法的报错原因 #

• res.data.heading_(en)：首先res.data是数组，本身没有heading_(en)属性，其次JS会把点语法后的(en)识别为函数调用操作，完全不符合对象属性访问规则，必然报错。
• res.data['heading_(en)']/res.data.heading_en：这两种属性访问语法本身没问题，但你是在数组res.data上直接访问，数组不存在对应键名，因此会返回undefined或者触发读取错误。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov