在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
往期精彩:
3、简单易学！使用 Node.js 编写爬虫，跟着教程一步步实现！
评论区