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;
总结
到此这篇关于js获取对象属性值的两种方法使用总结的文章就介绍到这了,更多相关js获取对象属性值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
通过本文主要介绍如何提取Bootstrap的图标信息,存储到数据库里面为我所用,非常具有参考借鉴价值,感兴趣的朋友一起学习吧2016-05-05TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)
.d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧2023-09-09JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论