javaScript得会使用?.、??、??= 和 !! 逻辑运算符了

4,115 阅读3分钟

前言:

目前工作中是多人协作的项目,有时候交叉帮忙所以看过很多很多人的代码了,感觉很少看到有人用这几个逻辑运算符,但这几个逻辑运算符出来也挺久了,总得认识认识,下面一个个举例说明一下具体用法熟悉一下。

一、可选链接 (?.)

简单介绍:如果引用为空,依然可以正常访问嵌套的属性,并不会出现错误。即 ?.运算符的功能与 . 链接运算符的区别在于,如果引用为空或者未定义(null 或 undefined),则表达式会短路并且返回未定义的值,而不会直接报错。

代码示例:

let user = {  
  name"天天鸭",  
  address: {  
    city"广州"  
  }  
};  
  
console.log(user.address.city); // 广州
  
let user2 = {  
  name"天天鸭"  
};  
  
console.log(user2.address?.city); //  undefined

在上述示例中,由于 user2 没有 address 属性,所以如果使用 user2.address.city 访问通常会报错 TypeError....。但是通过使用可选链接运算符 (?.)JavaScript 只会返回 undefined 而不是抛出错误。

注意:

  • ?.只会检查右侧的属性是否为 nullundefined,如果右侧的操作数是一个空对象 {},那么它会继续执行后续的属性访问或方法调用。
  • 如果在访问属性或调用方法的过程中遇到 nullundefined,那么整个表达式的结果都会是 undefined

二、空合并运算符 (??)

简单介绍:空合并运算符 (??) 逻辑运算符,当左侧内容为 nullundefined 时,它会返回右侧内容,否则返回其左侧内容。当想要值可能为 nullundefined的变量提供默认值时,这会很实用。

代码示例:

let name = null;  

let defaultName = "天天鸭";  
  
let result = name ?? defaultName;  
  
console.log(result); // 天天鸭

在上述示例中,由于 namenull,因此合并运算符返回 defaultName,因此起到默认值效果。 但如果 name 不为 nullundefined,则会返回下面例子该值:

let name = "我是name";  

let defaultName = "天天鸭";  
  
let result = name ?? defaultName;  
  
console.log(result); // 我是name

注意:

  • ?? 操作符只在左侧操作数为 nullundefined 时才返回右侧操作数,如果想要区分 null/undefined 与其他假值(如0、''、false)的场景特别有用。
  • 注意与逻辑或 (||)的区别:如果左侧操作数是任何假值(false, 0, NaN, null, undefined, ""),则返回右侧操作数。而且??只会识别 nullundefined

三、空值合并赋值操作符 (??=)

简单介绍:空值合并赋值操作符(??=)结合了空值合并操作符和赋值操作符功能,一般用于将默认值分配给变量,但仅只有变量的值为 null 或 undefined 时才行

代码示例:

let name = null;
let age = undefined;
let count = 0;

name ??= 'default'; // 'default',因为 name 是 null
age ??= 'default'; // 'default',因为 age 是 undefined
count ??= 'default'; // 0, 因为 count 的初始值不是 null 或 undefined

当变量没有被赋值或被赋值为 nullundefined 时,则会将默认值分配给变量。

注意:

  • 如果变量已经是某个假值(如 false0 或 ''),??= 不会改变它的值

四、转换为布尔值 (!!)

简单介绍:!! 运算符用于将值转换为布尔值。第一个 !否定该值,将其转换为布尔值并将其反转,第二个 ! 将其反转回其原始布尔值。

代码示例:

let value = "天天鸭";
let yValue = "";

console.log(!!value); // true
console.log(!!yValue); // false

上述示例中,value 是一个非空字符串,在 JavaScript 中被视为 true 值,因此 !!value 返回 true。另一方面, yValue 是一个空字符串,在 JavaScript 中被视为 false 值,因此 !!yValue 返回 false。

小结:

这些比较新的逻辑运算符基本都是在 ECMAScript 2020 标准中引入的,总结下来就会发现主要是针对null 或和undefined的,可能很多人平时都不习惯去使用,但不喜欢用起码要懂啊,所以才分享出来,大佬们如果有什么建议也欢迎指导哈。