首页 > 网络编程 > JavaScript > javascript技巧 > JS 空值合并运算符

JS的空值合并运算符(??)的使用

2023-12-04 12:01:02 作者：田本初

空值合并运算符是一个逻辑运算符,当左侧的操作数为null或undefined时,会返回右侧操作数,否则返回左侧操作数,本文就来详细的介绍一下如何使用

前言

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为null或undefined时，会返回右侧操作数，否则返回左侧操作数。

与逻辑或运算符（||）的区别

逻辑或运算符（||）是一个布尔逻辑运算符，即当左侧操作数会被强制转为布尔值，所有假值（“”,0,NaN,null,undefined）都会隐式转换为false时，此时会返回右侧操作数。可是当 0，""和NaN 需要当做有效值时，逻辑或运算符（||）会导致以下错误：

let count = 0;
let text = "";

let res = count || 42;
let message = text || "hi!";
console.log(res); // 42，而不是 0
console.log(message); // "hi!"，而不是 ""

相比逻辑或运算符（||），空值合并运算符（??），如果左侧操作数为0，“”，NaN，也会被返回。

let count = 0;
let text = "";

let res = count ?? 42;
let message = text ?? "hi!";
console.log(res); // 0
console.log(message); // ""

总结

当你需要 0，""和NaN 作为有效值时，使用空值合并运算符（??），否则使用逻辑或运算符（||）。

与 OR（||）和 AND（&&）运算符

与 OR 和 AND 逻辑运算符相似，当左表达式不为 null 或 undefined 时，短路，不会对右表达式进行求值。

function A() {
  console.log("函数 A 被调用了");
  return undefined;
}
function B() {
  console.log("函数 B 被调用了");
  return false;
}
function C() {
  console.log("函数 C 被调用了");
  return "foo";
}

console.log(A() ?? C());
// 依次打印 "函数 A 被调用了"、"函数 C 被调用了"、"foo"
// A() 返回了 undefined，所以运算符两边的表达式都被执行了

console.log(B() ?? C());
// 依次打印 "函数 B 被调用了"、"false"
// B() 返回了 false（既不是 null 也不是 undefined）
// 所以右侧表达式没有被执行

不能与 OR 和 AND 运算符共用

?? 不能与 AND（&&）和 OR（||）运算符组合使用。会抛出语法错误（因为空值合并运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的）。

错误写法：

null || undefined ?? "666"; // 抛出 SyntaxError
true || undefined ?? "666"; // 抛出 SyntaxError

但是，如果配合括号来显示表明运算优先级，是可行的。

(null || undefined) ?? "666"; // 返回 "666"

实例

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

使用场景

antd组件库

select组件的placeholder属性，只有当值为null或undefined时才会展示,如果 0，""和NaN 为有效值，空值合并运算符（??）就适用于判断value。

如上只是一个简单举例，空值合并运算符（??）适用于一切 0，""和NaN 为有效值的场景。

到此这篇关于JS的空值合并运算符(??)的使用的文章就介绍到这了,更多相关JS 空值合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！