场景：已知对象的某属性，我们需要获取对象中的属性值
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 进行校验，则有可能抛出错误。文章来源：https://www.toymoban.com/news/detail-431195.html
有了可选链运算符（?.），在访问 obj.first.second 之前，不再需要明确地校验 obj.first 的状态，再并用短路计算获取最终结果：文章来源地址https://www.toymoban.com/news/detail-431195.html
let nestedProp = obj.first?.second;
到了这里，关于js获取对象属性值的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
