JavaScript中? ?、??=、?.和 ||的区别浅析

 更新时间:2022年08月03日 11:53:12   作者:asdfsdgfsdgfa  
在 JS 中,?? 运算符被称为非空运算符,下面这篇文章主要给大家介绍了关于JavaScript中? ?、??=、?.和 ||区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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

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

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

?? 与 || 的区别

相同点:

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

A ?? B

A || B

不同点:

判断的方法不同:

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

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

// ??
    console.log(undefined ?? 2);  // 2
    console.log(null ?? 2);   // 2
    console.log(0 ?? 2);  // 0
    console.log("" ?? 2);   // ''
    console.log(true ?? 2);  // true
    console.log(false ?? 2);   // false
 
// ||
    console.log(undefined || 2);   // 2
    console.log(null || 2);     // 2
    console.log(0 || 2);        // 2
    console.log("" || 2);     // 2
    console.log(true || 2);     // true
    console.log(false || 2);      // 2

空值合并操作符 ??

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

可选链操作符 ?. 

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

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

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

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

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

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

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

    let a = "你好";
 
    let b = null;
    let c = undefined;
    let d = 0;
    let e = "";
    let f = true;
    let g = false;
 
    console.log((b ??= a)); // 你好
    console.log((c ??= a)); // 你好
    console.log((d ??= a)); // 0
    console.log((e ??= a)); // ''
    console.log((f ??= a)); // true
    console.log((g ??= a)); // false
 
    console.log(b); // 你好
    console.log(c); // 你好
    console.log(d); // 0
    console.log(e); // ''
    console.log(f); // true
    console.log(g); // false

补充:?. 链判断运算符

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

let travelPlans = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200,
    host: null
  }
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
let res2 = travelPlans?.host; // => undefined

这个是什么操作呢??

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

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

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

总结

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

相关文章

  • JavaScript实现打字效果的方法

    JavaScript实现打字效果的方法

    这篇文章主要介绍了JavaScript实现打字效果的方法,可实现文字陆续出现的打字效果,涉及javascript时间函数及页面元素获取的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 取得元素的左和上偏移量的方法

    取得元素的左和上偏移量的方法

    利用offsetParent属性在Dom层次中逐级向上回溯,将每个层次偏移量合计,需要的朋友可以参考下
    2014-09-09
  • 解析原来浏览器原生支持JS Base64编码解码

    解析原来浏览器原生支持JS Base64编码解码

    这篇文章主要介绍了解析原来浏览器原生支持JS Base64编码解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 纯原生js实现贪吃蛇游戏

    纯原生js实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了纯原生js实现贪吃蛇游戏的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 浅析JavaScript中的隐式类型转换

    浅析JavaScript中的隐式类型转换

    这篇文章主要是对JavaScript中的隐式类型转换进行了详细分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js 实现碰撞检测的示例

    js 实现碰撞检测的示例

    这篇文章主要介绍了js 实现碰撞检测的示例,帮助大家更好的制作js特效,美化自身网页,感兴趣的朋友可以了解下
    2020-10-10
  • JavaScript DSL 流畅接口(使用链式调用)实例

    JavaScript DSL 流畅接口(使用链式调用)实例

    这篇文章主要介绍了JavaScript DSL 流畅接口(使用链式调用)实例,本文讲解了DSL 流畅接口、DSL 表达式生成器等内容,需要的朋友可以参考下
    2015-03-03
  • javaScript 页面自动加载事件详解

    javaScript 页面自动加载事件详解

    本篇文章主要是对javaScript页面自动加载事件进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 浅谈nodeName,nodeValue,nodeType,typeof 的区别

    浅谈nodeName,nodeValue,nodeType,typeof 的区别

    本文主要简单介绍了nodeName,nodeValue,nodeType,typeof 的区别,算是知识点的一个小总结,希望对小伙伴们有所帮助
    2015-01-01
  • 利用原生JS实现懒加载lazyLoad的三种方法总结

    利用原生JS实现懒加载lazyLoad的三种方法总结

    加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,这篇文章主要给大家介绍了关于利用原生JS实现懒加载lazyLoad的三种方法,需要的朋友可以参考下
    2021-07-07

最新评论