JS之短路操作符

短路操作符（Short-circuit Operator）是 JavaScript 中的一个概念，这些操作符同样适用于 TypeScript，因为 TypeScript 是 JavaScript 的类型超集。短路操作符主要包括逻辑“与”（&&）和逻辑“或”（||），以及空值合并操作符（??），它们的行为在 JavaScript 和 TypeScript 中是一致的。
以前只认为与和或只能用来协助判断是ture还是false，即if(a || b)的用法，但是还可以有更多的用法，如协助赋值const a = false || 'Hello' 给a设置默认值的用法。

逻辑“与”（&&）操作符

逻辑“与”操作符会在左侧操作数为真值时才会执行右侧操作数，如果左侧操作数为假值（Falsy），则直接返回左侧操作数。

示例：

const a = true && 'Hello';  // 'Hello'
const b = false && 'Hello';  // false
const c = '' && 'Hello';     // ''
const d = 'Hello' && 'World'; // 'World'

第一个是false，直接返回第一个
第一个是true，返回第二个

逻辑“或”（||）操作符

逻辑“或”操作符会在左侧操作数为真值时直接返回左侧操作数；如果左侧操作数为假值，则返回右侧操作数。

示例：

const a = true || 'Hello';    // true
const b = false || 'Hello';   // 'Hello'
const c = '' || 'Hello';      // 'Hello'
const d = 'Hello' || 'World'; // 'Hello'

第一个是true，返回第一个
第一个是false，返回第二个
与 && 的逻辑相反

空值合并操作符（??）

空值合并操作符用于在左侧操作数为 null 或 undefined 时返回右侧操作数，适用于更精准的默认值判断。

示例：

const a = null ?? 'Default';   // 'Default'
const b = undefined ?? 'Default';  // 'Default'
const c = '' ?? 'Default';    // ''
const d = 0 ?? 'Default';     // 0
const e = false ?? 'Default'; // false

|| 和 ?? 的区别

如果右侧是null、undefined，那么a和b的值是一样的(hello)，但是如果是0、false、‘’、NaN，a会等于hello，b却是等于0、false、‘’、NaN

const b = '' || 'hello';  // 'hello'
const c = '' ?? 'hello'; // ''

const b = NaN || 'hello'; // 'hello'
const c = NaN ?? 'hello'; // NaN

在 TypeScript 中的应用

由于 TypeScript 是 JavaScript 的超集，所有在 JavaScript 中的短路操作符同样适用于 TypeScript。这些操作符在处理变量初始化、参数默认值和条件渲染时非常有用。

示例：处理函数参数默认值

JavaScript 中：

function greet(name) {
  const userName = name || 'Guest';
  console.log(`Hello, ${userName}`);
}

greet();  // Hello, Guest
greet('Alice');  // Hello, Alice

TypeScript 中：

function greet(name?: string) {
  const userName = name || 'Guest';
  console.log(`Hello, ${userName}`);
}

greet();  // Hello, Guest
greet('Alice');  // Hello, Alice

示例：使用空值合并操作符

JavaScript 中：

const value = null ?? 'Default Value';
console.log(value);  // 'Default Value'

TypeScript 中：

const value: string | null = null;
const result = value ?? 'Default Value';
console.log(result);  // 'Default Value'

小结

短路操作符是 JavaScript 中的概念，并且在 TypeScript 中同样适用。这些操作符包括逻辑“与”（&&）、逻辑“或”（||）以及空值合并操作符（??），它们在处理默认值、变量初始化和条件逻辑时非常有用。TypeScript 通过类型系统进一步增强了这些操作符的应用，使得代码更加安全和可维护。