JS可选链运、逻辑或、空置合并运算符

这段代码中包含了以下几个现代 JavaScript 的语法特性：

1. 可选链运算符 (?.)
2. 逻辑或运算符 (||)
3. 空值合并运算符 (??)

让我们逐一分析这些语法，以及它们在代码中的作用。

1. 可选链运算符 (?.)

语法含义：
可选链运算符 ?. 用于安全访问对象属性或调用方法。如果链式访问中的某个部分是 null 或 undefined，整个表达式会短路，返回 undefined，而不会抛出错误。

例子：

const config = null;
// 使用可选链
console.log(config?.method); // undefined
// 不使用可选链（会报错）
console.log(config.method); // TypeError: Cannot read properties of null

在代码中的两处：

const method = config?.method || 'get';
const header = config?.headers['Content-Type'] ?? '';

• config?.method 的作用： 如果 config 是 null 或 undefined，表达式返回 undefined；否则返回 config.method。
• config?.headers['Content-Type'] 的作用： 如果 config 或 config.headers 是 null 或 undefined，表达式返回 undefined；否则返回 config.headers['Content-Type']。

2. 逻辑或运算符 (||)

语法含义：
逻辑或运算符返回第一个真值（truthy value），如果左侧为假值（falsy），则返回右侧的值。

常见假值（falsy values）：

• false
• 0
• ''（空字符串）
• null
• undefined
• NaN

示例：

const value = undefined || 'default'; // 返回 'default'
const value2 = 0 || 'default'; // 返回 'default'（因为 0 是假值）
const value3 = 'hello' || 'default'; // 返回 'hello'（因为 'hello' 是真值）

在代码中：

const method = config?.method || 'get';

• 如果 config?.method 是 null、undefined、'' 或其他假值，则使用默认值 'get'。
• 如果 config?.method 是真值（如 'post'），则直接使用。

3. 空值合并运算符 (??)

语法含义：
空值合并运算符 ?? 用于处理 null 或 undefined 的情况，返回第一个不是 null 或 undefined 的值。

与 || 的区别：

• || 会将所有假值（如 0、false、'' 等）视为需要替换的情况。
• ?? 只在值为 null 或 undefined 时才会替换。

示例：

const value = null ?? 'default'; // 返回 'default'
const value2 = undefined ?? 'default'; // 返回 'default'
const value3 = 0 ?? 'default'; // 返回 0（因为 0 不是 null 或 undefined）

在代码中：

const header = config?.headers['Content-Type'] ?? '';

• 如果 config?.headers['Content-Type'] 是 null 或 undefined，则返回空字符串 ''。
• 如果 config?.headers['Content-Type'] 有值（即使是 false 或 0），则直接返回该值。

代码整体解释

const method = config?.method || 'get';

• 检查 config 是否存在，以及它是否有 method 属性。
• 如果 config?.method 为假值（null、undefined、'' 等），则默认使用 'get'。

const header = config?.headers['Content-Type'] ?? '';

• 检查 config 是否存在，以及它是否有 headers 属性，同时访问 headers['Content-Type']。
• 如果 config?.headers['Content-Type'] 为 null 或 undefined，则返回空字符串 ''。

语法组合的意义

这段代码通过结合 可选链、逻辑或 和 空值合并运算符 实现了以下功能：

1. 安全性：防止对象访问时可能出现的空引用错误（TypeError）。
2. 默认值设置：在目标值不存在或无效时，提供合适的默认值（如 'get' 或 ''）。
3. 简洁性：避免多重嵌套的条件判断。

等效代码（未使用现代语法）

如果不使用这些现代语法，等效代码会变得冗长且不直观：

let method;
if (config && config.method) {
  method = config.method;
} else {
  method = 'get';
}

let header;
if (config && config.headers && config.headers['Content-Type'] != null) {
  header = config.headers['Content-Type'];
} else {
  header = '';
}

可以看出，现代语法极大地提高了代码的可读性和开发效率。