场景:已知对象的某属性,我们需要获取对象中的属性值

js获取对象属性值的方法

  1. 通过 . 获取
  2. 通过 [ ] 获取
        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

ps:
用变量key获取对象中的属性值时,点运算符会将key视为一个属性去对象中查找,对象中没有这个属性,因此为undefined
在用 [ ] 获取值时,需要注意的是 [ ] 中是否要加引号

  • 补充:可选链运算符 ?.

可选链运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

我们在访问对象中一个深度嵌套的子属性,需要验证之间的引用,如:

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

为了避免报错,在访问obj.first.second之前,要保证 obj.first 的值既不是 null,也不是 undefined。如果只是直接访问 obj.first.second,而不对 obj.first 进行校验,则有可能抛出错误。

有了可选链运算符(?.),在访问 obj.first.second 之前,不再需要明确地校验 obj.first 的状态,再并用短路计算获取最终结果:

let nestedProp = obj.first?.second;
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐