js中获取对象的属性值的方法是（js获取对象属性值的方法）

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

js获取对象属性值的方法

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