JavaScript中为何无法通过函数入参动态访问对象属性

问题原因 #

这是JavaScript对象属性两种访问语法的规则差异导致的：

• 点访问符obj.key是字面量访问：会直接把key当成静态的固定属性名查找，你写array[i].key时，JS实际是在对象上找名为"key"的属性，而不是读取key这个变量存储的值作为属性名。你的示例对象不存在key属性，自然返回undefined。
• 方括号访问符obj[变量/表达式]是动态访问：会先计算括号内的表达式/变量的取值，再把计算结果作为属性名查找，完全匹配你传入动态key参数的需求。

修复方案 #

把console.log(array[i].key)修改为console.log(array[i][key])即可，修改后可正常运行的代码示例如下：

let objects = [
    { name: 'Jack', surname: 'Jackson' },
    { name: 'Ivar', surname: 'Bjornsson' },
    { name: 'John', surname: 'Mickelson' }
];

function sort (array, key) {
    for (let i = 0; i < array.length; i++) {
        console.log(array[i][key]) // 动态取key变量的值"surname"作为属性名，正常返回对应值
        console.log(array[i].surname)
        console.log(key)
    }
}

sort(objects, 'surname');

补充说明 #

两种访问语法的适用场景：

• 当属性名是提前已知的固定字面量时，用点访问更简洁，比如obj.surname
• 当属性名是动态的、存储在变量中/需要计算得到时，必须用方括号访问，比如obj[myKey]、obj['first' + 'Name']

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