经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript中???、??=、?.和?||的区别浅析
来源:jb51  时间:2022/8/3 12:49:20  对本文有异议

前言

undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的,否则将会报错

  1. let a;
  2. console.log(a?.name); //undefined
  3. console.log(a.name); //报错

  1. let obj = {};
  2. console.log(obj.name); //undefined
  3. console.log(obj?.name?.a); //undefined
  4. console.log(obj.name.a); //报错

?? 与 || 的区别

相同点:

?? 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。

A ?? B

A || B

不同点:

判断的方法不同:

使用 ?? 时,只有A为 null 或者 undefined 时才会返回 B;

使用 || 时,A会先转化为布尔值判断,为true时返回A , false 返回B

  1. // ??
  2. console.log(undefined ?? 2); // 2
  3. console.log(null ?? 2); // 2
  4. console.log(0 ?? 2); // 0
  5. console.log("" ?? 2); // ''
  6. console.log(true ?? 2); // true
  7. console.log(false ?? 2); // false
  8. // ||
  9. console.log(undefined || 2); // 2
  10. console.log(null || 2); // 2
  11. console.log(0 || 2); // 2
  12. console.log("" || 2); // 2
  13. console.log(true || 2); // true
  14. console.log(false || 2); // 2

空值合并操作符 ??

只有当左侧为null 或者undefined 时,才会返回右侧的值

可选链操作符 ?. 

?. 允许读取连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于. 链操作符,不同之处在于,在引用为空,即 null 或者 undefined 的情况下不会引起错误,该表达式短路返回值。 

  1. const obj = { a: { b: [{ name: "obj" }] } };
  2. // 原本的写法
  3. console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name); //obj
  4. // 可选链写法
  5. console.log(obj?.a?.b?.[0]?.name); // obj
  6. console.log(obj?.b?.c?.d); // undefined

?.可以和 ?? 运算符结合使用 

  1. const obj = { a: { name: "obj" } };
  2. console.log(obj?.a?.b ?? "hello world"); // hello world

空值赋值运算符(??=)

当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值 

  1. let a = "你好";
  2. let b = null;
  3. let c = undefined;
  4. let d = 0;
  5. let e = "";
  6. let f = true;
  7. let g = false;
  8. console.log((b ??= a)); // 你好
  9. console.log((c ??= a)); // 你好
  10. console.log((d ??= a)); // 0
  11. console.log((e ??= a)); // ''
  12. console.log((f ??= a)); // true
  13. console.log((g ??= a)); // false
  14. console.log(b); // 你好
  15. console.log(c); // 你好
  16. console.log(d); // 0
  17. console.log(e); // ''
  18. console.log(f); // true
  19. console.log(g); // false

补充:?. 链判断运算符

链判断运算符?. 允许开发人员读取深度嵌套在对象链中的属性值,而不必验证每个引用。当引用为空时,表达式停止计算并返回 undefined。

  1. let travelPlans = {
  2. destination: 'DC',
  3. monday: {
  4. location: 'National Mall',
  5. budget: 200,
  6. host: null
  7. }
  8. }
  9. let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
  10. let res2 = travelPlans?.host; // => undefined

这个是什么操作呢??

这个location是哪里来的呢?这个tuesday又是哪里来的呢?就算不是外面的travelPlans这个对象里也没有location和tuesday啊!!!经过询问大佬后得

  1. let res = travelPlans?.tuesday?.location;
  2. <=等价=>
  3. let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location

作用就是判断这个对象(travelPlans)下的(tuesday)下的(location)是否为null或者undefined,当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错,双问号后面接的就是默认值。

总结

到此这篇关于JavaScript中? ?、??=、?.和 ||区别的文章就介绍到这了,更多相关JS中? ?和??=和?.和 ||区别内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号