巧用JavaScript三大操作符,让你的代码更优雅!

1,689次阅读
6条评论

共计 1572 个字符,预计需要花费 4 分钟才能阅读完成。

巧用 JavaScript 三大操作符,让你的代码更优雅!

JavaScript中有三种不同的操作符,分别是?? , ?.||。这些操作符都用于在处理数据时进行不同的判断和计算,因此本文将分别介绍它们的用途、作用和区别。

"??" 运算符

?? 空值合并运算符 运算符,它用于判断某个值是否为 null 或 undefined。如果值为 null 或 undefined,则返回另一个给定的值,否则返回该值本身。

以下是一个例子:

let x = null;
let y = 3;
let z = x ?? y;

console.log(z); // 输出 3,因为 x 为 null,所以返回 y 的值

在这个例子中,我们使用了 Nullish Coalescing 运算符来确定 x 的值是否为 null 或 undefined,因为它是 null,所以返回 y 的值。

需要注意的是,当 x 的值为 0 或空字符串时,Nullish Coalescing 运算符仍会将其视为一个有效值,而不会返回另一个值。这与 "||" 运算符的行为不同。

"?." 运算符

?. 可选链运算符,它用于安全地访问对象的属性,而不必担心该属性是否存在。如果该属性存在,则返回该属性的值,否则返回 undefined。

以下是一个例子:

let person = {
  name: "John",
  age: 30
};

let address = person?.address?.city; 

console.log(address); // undefined

在这个例子中,我们尝试访问一个名为 address 的属性,但是 person 对象中并没有这个属性。使用可选链操作符,我们可以安全地尝试访问这个属性,而不会导致错误,并且返回值为undefined

需要注意的是,"?." 运算符仅在属性名是一个标识符或数字字面量时有效。如果属性名是一个表达式,则无法使用 "?." 运算符。

"||" 运算符

||是逻辑或运算符,它用于将两个表达式进行比较,如果第一个表达式是假值(false、null、undefined、0、空字符串等),则返回第二个表达式的值,否则返回第一个表达式的值。

以下是一个例子:

let x = 0;
let y = 3;
let z = x || y;

console.log(z); // 输出 3,因为 x 为假值,所以返回 y 的值

在这个例子中,我们使用了逻辑或运算符来确定 x 的值是否为假值,因为它是 0,所以返回 y 的值。

需要注意的是,当 x 的值为 null 或 undefined 时,逻辑或运算符仍会将其视为假值,而不会返回另一个值。这与 Nullish Coalescing 运算符的行为不同。

总结

下表列出了 JavaScript 中 "??", "?." 和 "||" 三种操作符的区别:

操作符 名称 用途 处理空值
?? Nullish Coalescing 运算符 用于判断某个值是否为 null 或 undefined。如果值为 null 或 undefined,则返回另一个给定的值,否则返回该值本身。 仅在值为 null 或 undefined 时返回另一个值,否则返回该值本身
?. 可选链操作符 用于安全地访问对象的属性,而不必担心该属性是否存在。如果该属性存在,则返回该属性的值,否则返回 undefined。 如果属性不存在,返回 undefined
|| 逻辑或运算符 用于将两个表达式进行比较,如果第一个表达式是假值(false、null、undefined、0、空字符串等),则返回第二个表达式的值,否则返回第一个表达式的值。 在值为 null 或 undefined 时返回第二个表达式的值,在其他假值情况下返回第二个表达式的值

需要注意的是,Nullish Coalescing 运算符 "??" 仅在值为 null 或 undefined 时返回另一个值,而逻辑或运算符 "||" 在值为 null 或 undefined 时也会返回第二个表达式的值。可选链操作符 "?." 只有在属性不存在时返回 undefined,而不管属性值是什么类型。

正文完
  4
领导、我小江🎉
版权声明:本站原创文章,由 领导、我小江🎉 2023-04-25发表,共计1572字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(6条评论)
2023-04-27 22:40:45 回复

👌

 iPhone  JIANG MiniProgram
alert(123) 评论达人 LV.1
2023-04-27 21:37:40 回复

大佬,带带

 iPhone  JIANG MiniProgram
sharp097 评论达人 LV.1
2023-04-27 21:24:05 回复

我来学习了

 Android  Chrome
LoveLolita 评论达人 LV.1
2023-04-27 19:32:41 回复

吃吃吃

 iPad  JIANG MiniProgram
2023-04-26 16:56:43 回复

嘻嘻

 iPhone  JIANG MiniProgram