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中? ?和??=和?.和 ||区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 聊聊JavaScript中.?、??、??=的用法以及含义

    目录 前言 可选链(.?) 空值合并运算符(??) 空值赋值运算符(??=) 趣味问答时间: 值得注意的是 :?? 是忽视 null ,undefined 等错误的值 最后 前言 在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算.与或.if else来使用,不仅要写很多冗余的代码,后期维护起来也是满屏的if else可以说是非常的痛苦了.今天分享几个处理空值简单的方法,希望可以解决大家的一些问题. 可选链(.?) 如果一个值为null.或者是undefined.那么我们再去

  • javaScript中"=="和"==="的区别详解

    区别: ==, 两边值类型不同的时候,要先进行类型转换,再比较. ==,不做类型转换,类型不同的一定不等. 下面分别说明: 先说 "===",这个比较简单.下面的规则用来判断两个值是否===相等: 1.如果类型不同,就不相等 2.如果两个都是数值,并且是同一个值,那么[相等]:(!例外)的是,如果其中至少一个是NaN,那么[不相等].(判断一个值是否是NaN,只能用isNaN()来判断) 3.如果两个都是字符串,每个位置的字符都一样,那么相等:否则不相等 . 4.如果两个值都是true

  • Javascript中的Callback方法浅析

    什么是callback 复制代码 代码如下: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 这个解释看上去很复杂,于是找到了知乎上一个更好的解释 复制代码 代码如下: 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电

  • JavaScript 和 Java 的区别浅析

    下面对两种语言间的异同作如下比较:1.基于对象和面向对象Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象.JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件.它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言.因而它本身提供了非常丰富的内部对象供设计人员使用.2.解释和编译两种语言在其浏览器中所执行的方式不一样.Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的

  • 浅析Javascript中“==”与“===”的区别

    之前使用JavaScript的时候,时不时的会遇到使用 == 和 === 这两个符号来判断两个变量是否相等.但是对于这两个符号的差别一直没有去调查.今天又遇到了 === 这个符号,所以决定去查一下,究竟这两者有什么区别. 在Javascript中有"=="和"==="两种比较运行符,那么他们有什么区别呢? 一.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值&

  • Javascript中的apply()方法浅析

    之前我们说过 Javascript Call方法,这次我们就说说和Call方法类似的apply方法. apply vs call 两者间的不同在于:传递的是参数,还是参数数组 这个是call的用法 复制代码 代码如下: theFunction.call(valueForThis, arg1, arg2, ...) 而这个则是apply 复制代码 代码如下: theFunction.apply(valueForThis, arrayOfArgs) 故而 复制代码 代码如下: arrayOfArgs

  • JavaScript中concat复制数组方法浅析

    我们在需要进行数组复制的时候可能会想到以下的方法 代码 var arr1 = [1,2,3,4,5]; var arr2 = []; arr2 = arr1; console.log(arr1); console.log(arr2); 执行结果如下: [1, 2, 3, 4, 5] [1, 2, 3, 4, 5] 在这个例子中,将数组arr1赋值给了另一个数组arr2. 查看执行结果,似乎复制了数组的内容并创建了相同的数组. 但是,由于数组是"引用类型"的数据,因此它不会复制该值,而只

  • MySQL中“:=”和“=”的区别浅析

    = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:=. := 不只在set和update时时赋值的作用,在select也是赋值的作用.   下面是:=和=的在select时作用对比 sql set @num = 0; SELECT @num := @num+1 AS rowno, nc as nickname from table_user; 结果 sql set @num = 0; SELECT @num = @num+1 AS

  • JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b:' + b);//无法输出 2.var定义的变量可以修改,

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

随机推荐

其他