前言:
目前工作中是多人协作的项目,有时候交叉帮忙所以看过很多很多人的代码了,感觉很少看到有人用这几个逻辑运算符,但这几个逻辑运算符出来也挺久了,总得认识认识,下面一个个举例说明一下具体用法熟悉一下。
一、可选链接 (?.)
简单介绍:如果引用为空,依然可以正常访问嵌套的属性,并不会出现错误。即
?.
运算符的功能与.
链接运算符的区别在于,如果引用为空或者未定义(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
而不是抛出错误。
注意:
?.
只会检查右侧的属性是否为null
或undefined
,如果右侧的操作数是一个空对象 {},那么它会继续执行后续的属性访问或方法调用。- 如果在访问属性或调用方法的过程中遇到
null
或undefined
,那么整个表达式的结果都会是undefined
。
二、空合并运算符 (??)
简单介绍:空合并运算符
(??)
逻辑运算符,当左侧
内容为null
或undefined
时,它会返回右侧内容,否则返回其左侧内容。当想要值可能为null
或undefined
的变量提供默认值时,这会很实用。
代码示例:
let name = null;
let defaultName = "天天鸭";
let result = name ?? defaultName;
console.log(result); // 天天鸭
在上述示例中,由于 name
为 null
,因此合并运算符返回 defaultName
,因此起到默认值效果。 但如果 name
不为 null
或undefined
,则会返回下面例子该值:
let name = "我是name";
let defaultName = "天天鸭";
let result = name ?? defaultName;
console.log(result); // 我是name
注意:
??
操作符只在左侧操作数为null
或undefined
时才返回右侧操作数,如果想要区分null/undefined
与其他假值(如0、''、false
)的场景特别有用。- 注意与逻辑或
(||)
的区别:如果左侧操作数是任何假值(false, 0, NaN, null, undefined, ""
),则返回右侧操作数。而且??
只会识别null
或undefined
。
三、空值合并赋值操作符 (??=)
简单介绍:空值合并赋值操作符
(??=)
结合了空值合并操作符和赋值操作符功能,一般用于将默认值分配给变量,但仅只有变量的值为 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
当变量没有被赋值或被赋值为 null
或 undefined
时,则会将默认值分配给变量。
注意:
- 如果变量已经是某个假值(如
false
、0
或''
),??=
不会改变它的值
四、转换为布尔值 (!!)
简单介绍:
!!
运算符用于将值转换为布尔值。第一个 !否定该值,将其转换为布尔值并将其反转,第二个 ! 将其反转回其原始布尔值。
代码示例:
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
的,可能很多人平时都不习惯去使用,但不喜欢用起码要懂啊,所以才分享出来,大佬们如果有什么建议也欢迎指导哈。