当前位置：首页 > news >正文

使用 ?? 重新定义逻辑以获得更严格、更安全的 JavaScript 默认值

news 来源：原创 2024/7/6 17:57:36

使用 ?? 重新定义逻辑以获得更严格、更安全的 JavaScript 默认值

JavaScript 中的 ?? 运算符称为 nullish 合并运算符。该运算符接受任一侧的操作数，并且仅当左侧操作数为空值时才返回右侧操作数。这个运算符绝对是一个较新的运算符，它是在 ES2020 期间引入 JavaScript 的。

falsy 和 nullish 是相同的吗

如果在布尔表达式中求值时将值强制为 false ，则该值被视为 falsy 值。在这方面，以下值被认为是 falsy 值：

null - 空值
undefined - 未被赋值
false - boolean类型的一个值
0 - 数字0
-0 - 数字0的负数
"" - 空字符
NaN - 非数字

那么，JavaScript 中什么被认为是 nullish 呢？。JavaScript 中的除了 null 或 undefined 的值之外的都是 nullish。

在实际操作该运算符之前，我们应该了解短路运算符的工作原理。

短路运算符

短路运算符基本上是逻辑与 ( &&) 和逻辑或 ( || )运算符。它们用于执行简洁的条件逻辑。

&& 运算符

语法：

expression1 && expression2

如果表达式 1 为假并且根本不计算表达式 2，则返回表达式 1
如果表达式 1 为真（除 falsy 值以外的任何值），则返回表达式 2

看一下这个示例

// 返回表达式1
const number = 0 && 100
console.log(number) // 0
// 因为0是falsy值，因此不需要计算表达式2，直接返回表达式1（也就是0）// 返回表达式2
const heroes = 'IronMan' && 'CaptainAmerica'
console.log(heroes) // CaptainAmerica
// 表达式1是一个非空字符，因此直接返回表达式2（也就是 CaptainAmerica）

|| 运算符

语法：

expression1 || expression2

如果表达式 1 为真，则返回表达式 1
如果表达式 1 为假则返回表达式 2

就这么简单。

看一下这个示例：

// 返回表达式1
const heroes = 'IronMan' || 'CaptainAmerica'
console.log(heroes) // 'IronMan'
// 表达式1是一个非空字符，为 truthy 值，直接返回表达式1// 返回表达式2
const number = 0 || 100
console.log(number) //100
// 0 是 falsy 值，直接返回表达2

?? 运算符

除了 && 和 || 之外，还存在另一个运算符，称为空合并运算符。而且，该运算符就像逻辑运算符的特例，其操作与 || 运算符类似。

由于|| 当左侧操作数为 falsy 时，该运算符返回右侧表达式。而空合并 ?? 运算符仅在左侧操作数为 null 或 undefined 时才返回右侧表达式。所以，?? 运算符比现有的 || 运算符更加严格。

语法：

expression1 ?? expression2

仅当表达式1 为 null 或 undefined 时，?? 运算符才返回表达式2 。同时，如果表达式1是 nullish 值以外的任何值，则返回表达式1。

// 示例1
const number = 0 ?? 100
console.log(number) // 0
// 0 为非 nullish// 示例2
let fruit = ''
let veggie = 'Carrot'
const basket = fruit ?? veggie
console.log(basket) // ''
// fruit 虽然是空字符，但是是 falsy 值而非 nullish// 示例3
let halves = 'fullPortion' / 2
let full = 1
const portion = halves ?? full
console.log(portion) // NaN// 示例4
let hero1
let hero2 = 'CaptainAmerica'
const heroes = hero1 ?? hero2
console.log(heroes) // 'CaptainAmerica'
// hero1为undefined，是 nullish值

?? 运算符的设计方式使其不能直接与 && 和 || 一起使用，而需要使用括号：

null || undefined ?? 'hi' // SyntaxError: missing ) after argument list(null || undefined) ?? 'hi' //'hi'

为什么要使用短路运算符

当我们看到一些不熟悉的语法可以工作时，这个问题就会出现。难道我们不能坚持使用经典的 if else 语法来量化表达式吗？是的，我们可以，但是不行。让我解释一下为什么会这样。只要我们使用纯 JavaScript，我们就可以使用 if else 条件。但当涉及到使用像 ReactJs 这样的前端 UI 库时，不可能在 JSX 结构中嵌入“if 语句”。在这方面，我们应该只使用使用逻辑运算符的表达式。

这不是唯一的用例。但是这些短路运算符（包括空合并运算符）避免了用单行代码不必要地执行表达式。

我们可以使用短路运算符构建更复杂的逻辑，如下所示：

const gameConfig1 = { playerName: 'John',score: 22500,highScore: 35000,
}
const gameConfig2 = { playerName: undefined, score: undefined,highScore: undefined
}
function getPlayerInfo( player ){const { playerName, score, highScore } = playerconst currentPlayerName= playerName ?? 'Guest'const currentPlayerScore = ( score >= 100 && score ) || 'No scores yet'const currentPlayerHighScore = highScore ?? 'No high scores yet'return { currentPlayerName, currentPlayerScore , currentPlayerHighScore }
}
const player1 = getPlayerInfo( gameConfig1 ) // { name: John, score: 22500, highScore: 35000 }
const player2 = getPlayerInfo( gameConfig2 ) // { name: 'Guest', score: 'No scores yet', highScore: 'No high scores yet' }