JavaScript 获取对象属性值的两种方法：点运算符与方括号运算符详解

在实际开发场景中，当我们需要从已知结构的对象中提取特定属性的值时，选择合适的访问方式至关重要。

JavaScript 对象属性访问基础

JavaScript 提供了两种标准的对象属性访问语法。

• 使用点运算符（.）进行访问。
• 使用方括号运算符（[]）进行访问。

        let person = {
            name: "bob", age: 18
        };
        // 通过 [] 获取  bob
        console.log(person['name']);  // 加引号，识别为属性去对象中查找
        // 通过 . 获取  bob
        console.log(person.name);  

两种访问方式的核心差异

接下来详细分析这两种语法在行为上的核心差异。

方括号运算符允许使用数字作为属性名称，而点运算符不支持以数字开头的属性名。

        let p = {
            1: 'Alex', 2: 33
        }
        console.log(p[1]);  // Alex
        console.log(person.1);  // 报错 Uncaught SyntaxError: missing ) after argument list

方括号运算符支持使用变量作为属性名，点运算符则要求属性名必须是合法的标识符字面量。

        let person = {
            name: "bob", age: 18
        };
        let key = 'name';
        console.log(person[key]);  // bob  不加引号，识别为变量
        console.log(person.key);  // undefined

注意事项：

当使用变量 key 访问对象属性时，点运算符会将 key 视为对象中名为 'key' 的固定属性进行查找，若该属性不存在则返回 undefined；而使用方括号时，需明确括号内是否包含引号，以区分是访问变量值还是字符串字面量。

可选链运算符的安全访问

补充：可选链运算符（?.）。

可选链运算符（?.）允许安全地读取位于连接对象链深处的属性值，无需显式验证链中每个引用是否有效。与点运算符类似，但当引用为空值（null 或 undefined）时不会抛出错误，而是短路返回 undefined。若用于函数调用且函数不存在，同样返回 undefined。

在访问对象中深度嵌套的子属性时，通常需要验证中间引用是否存在，例如：

let nestedProp = obj.first && obj.first.second

为避免运行时错误，在访问 obj.first.second 之前，必须确保 obj.first 的值既不是 null 也不是 undefined。若直接访问且未对 obj.first 进行校验，当 obj.first 为空时将会抛出错误。

使用可选链运算符（?.）后，在访问 obj.first.second 前无需显式校验 obj.first 的状态，利用短路计算即可安全获取最终结果：

let nestedProp = obj.first?.second;

总结

本文介绍了 JavaScript 获取对象属性值的两种基础方法及其进阶用法。如需了解更多相关技术细节，建议查阅本站其他文章或继续浏览后续内容，感谢支持。