JavaScript双问号运算符详解|极客笔记

JavaScript双问号运算符详解

在JavaScript中，双问号运算符（??）是一个相对较新的运算符，用于处理变量为null或undefined的情况。双问号运算符提供了一种简洁的方法来设置默认值，避免出现意外的错误。本文将详细介绍JavaScript双问号运算符的用法和实际应用场景。

基本语法

双问号运算符的基本语法如下所示：

const result = value1 ?? value2;

在这个语法中，value1是待检查的变量，如果value1为null或undefined，则返回value2作为结果，否则返回value1的值。

示例

让我们通过一些示例来更好地理解双问号运算符的用法。

示例1

let a = null;
let b = 5;

console.log(a ?? b); // 输出：5

在此示例中，由于变量a的值为null，双问号运算符返回了变量b的值，即5。

示例2

let c = 10;
let d = 20;

console.log(c ?? d); // 输出：10

在这个示例中，由于变量c的值不为null或undefined，双问号运算符返回了变量c的值，即10。

与||运算符的比较

在JavaScript中，我们通常可以使用||运算符来实现类似的功能，但是双问号运算符和||运算符有着一些区别。

区别1：空字符串和0的情况

let e = '';
let f = 'Hello';

console.log(e || f); // 输出：Hello
console.log(e ?? f); // 输出：（空字符串）

使用||运算符时，空字符串视为假值，所以返回了变量f的值。而双问号运算符只会在变量为null或undefined时返回默认值。

区别2：falsy值的情况

let g = 0;
let h = 5;

console.log(g || h); // 输出：5
console.log(g ?? h); // 输出：0

使用||运算符时，0被视为假值，所以返回了变量h的值。而双问号运算符只会在变量为null或undefined时返回默认值。

实际应用场景

双问号运算符在实际开发中有很多用途，其中一些常见的场景包括设置默认参数值和处理API响应数据。

设置默认参数值

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

greet('Alice'); // 输出：Hello, Alice!
greet(); // 输出：Hello, Guest!

在这个示例中，如果没有传入name参数，则默认为’Guest’。

处理API响应数据

const responseData = {
    name: 'Alice',
    age: null,
    email: 'alice@example.com'
};

const userName = responseData.name ?? 'Unknown';
const userAge = responseData.age ?? 'Not specified';
const userEmail = responseData.email ?? 'Not provided';

console.log(userName); // 输出：Alice
console.log(userAge); // 输出：Not specified
console.log(userEmail); // 输出：alice@example.com

在这个示例中，双问号运算符用于处理API响应数据中可能为null或undefined的字段，以便提供默认值。