目 录CONTENT

文章目录

JS短路运算符的进阶:如何用它们处理复杂的逻辑和表达式

萧瑟
2023-06-23 / 0 评论 / 0 点赞 / 300 阅读 / 2,650 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在JavaScript中,有一些常用的技巧可以让我们更方便地编写代码,避免一些不必要的错误。本文将介绍三种这样的技巧:短路运算符、安全的对象属性访问和可选链操作符。

短路运算符

运算符表示逻辑与 &&

运算规则:

  • 如果第一个操作数是真值,那么返回第二个操作数的值;
  • 如果第一个操作数是假值,那么返回第一个操作数的值;
  • 假值有六种:false、null、undefined、0、NaN和空字符串""。

例如:

console.log(true && "hello") // 返回"hello"
console.log(false && "world") // 返回false
console.log(null && 42) // 返回null

可以看出,&&运算符不一定返回布尔值,而是返回最后一个求值的操作数。这个特性可以用来实现条件判断,例如:

var name = "Alice";
var greeting = name && "Hello, " + name; // 如果name存在,就返回问候语
console.log(greeting); // 输出"Hello, Alice"

运算符表示逻辑或 ||

运算规则是:

  • 如果第一个操作数是真值,那么返回第一个操作数的值;
  • 如果第一个操作数是假值,那么返回第二个操作数的值。

例如:

console.log(true || "hello") // 返回true
console.log(false || "world") // 返回"world"
console.log(null || 42) // 返回42

同样,||运算符也不一定返回布尔值,而是返回第一个求值的真值操作数。这个特性可以用来实现默认参数,例如:

function sayHello(name) {
    name = name || "Guest"; // 如果name没有传入,就使用默认值"Guest"
    console.log("Hello, " + name);
}

sayHello("Bob"); // 输出"Hello, Bob"
sayHello(); // 输出"Hello, Guest"

短路运算符是指在逻辑运算中,当第一个操作数已经能够确定整个表达式的结果时,就不再计算第二个操作数的值。这样可以节省一些计算资源,也可以实现一些条件判断的功能。例如:

// 使用&&运算符实现条件执行
let name = "Alice";
name && console.log(name); // 如果name为真值,就打印name

// 使用||运算符实现默认值
let age = null;
let defaultAge = 18;
let actualAge = age || defaultAge; // 如果age为假值,就使用defaultAge

逻辑运算符 ??

它的作用是返回第一个不为null或undefined的操作数。如果两个操作数都为null或undefined,那么返回null。例如:

let a = null;
let b = 42;
let c = a ?? b; // c的值为42,因为a为null
let d = undefined;
let e = null;
let f = d ?? e; // f的值为null,因为d和e都为null或undefined

??运算符的优先级很低,所以在使用时要注意加括号,避免产生歧义。例如:

let x = 1;
let y = 2;
let z = x + y ?? 3; // z的值为3,因为x + y不为null或undefined
let w = (x + y) ?? 3; // w的值为3,因为x + y不为null或undefined
let u = x + (y ?? 3); // u的值为3,因为y不为null或undefined

??运算符可以与其他逻辑运算符结合使用,但要注意它与||运算符的区别。||运算符会返回第一个真值(truthy)的操作数,而??运算符只会排除null或undefined。例如:

let m = 0;
let n = null;
let p = m || n; // p的值为null,因为m是假值(falsy)
let q = m ?? n; // q的值为0,因为m不是null或undefined

安全的对象属性访问 ?.

安全的对象属性访问是指在访问一个对象的属性时,先判断该对象是否存在,避免出现TypeError的异常。例如:

// 使用if语句判断对象是否存在
let person = null;
if (person) {
  console.log(person.name); // 如果person不为null或undefined,就打印person.name
}

// 使用三元运算符简化判断逻辑
let person = null;
console.log(person ? person.name : undefined); // 如果person不为null或undefined,就打印person.name,否则打印undefined

可选链操作符是ES2020引入的一个新特性,它可以让我们更简洁地实现安全的对象属性访问。它的语法是在要访问的属性前加上一个?.符号,表示如果该属性所属的对象存在,就正常访问,否则返回undefined。例如:

// 使用可选链操作符访问对象属性
let person = null;
console.log(person?.name); // 如果person不为null或undefined,就打印person.name,否则打印undefined

// 使用可选链操作符访问数组元素
let arr = [1, 2, 3];
console.log(arr?.[0]); // 如果arr不为null或undefined,就打印arr[0],否则打印undefined

// 使用可选链操作符调用函数
let func = null;
console.log(func?.()); // 如果func不为null或undefined,就调用func(),否则打印undefined

往期精彩:

1、了解 iframe 内嵌框架:深度解析其工作原理

2、Vue3解构赋值:让你的代码更简洁、优雅和高效

3、简单易学!使用 Node.js 编写爬虫,跟着教程一步步实现!


weixin

0

评论区