极客笔记JavaScript Nullish Coalescing 运算符
双问号(??)表示ES6引入的空值合并运算符。当其左操作数为undefined或null时，空值合并(??)运算符返回其右操作数。在其他所有情况下，逻辑运算符返回其左操作数。
空值合并运算符是用于默认显示输出的逻辑运算符的右操作数。
语法
下面的语法表示空值合并运算符的基本操作。空值合并运算符接受两个值：
First_value ?? second_value
如果第一个值（second_value）是null或undefined，则nullish coalescing运算符返回第二个值（second_value）。
对于nullish coalescing运算符的旧方法
以下代码块对应于nullish coalescing运算符：
const result_var = First_value;
if(result_var === null || result_var === undefined) {
result = second_value;
}
任何未定义或空值被视为具有nullish值。
如何使用nullish合并操作符
在下面的示例中使用nullish合并操作符（??）来返回字符串”Javatpoint”，因为第一个值为null：
const website = null ?? 'Javatpoint';
console.log(website); // output : 'Javatpoint'
以下语法显示输出
const mark = undefined ?? 80;
console.log(mark);
示例
以下示例展示了JavaScript中的nullish合并运算符。使用逻辑和比较运算符显示多个值。
示例1 ：以下示例展示了在JavaScript中使用nullish合并运算符的基本用法。我们可以看到将字符串和数值数据与null数据进行比较。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<script>
const website = null ?? 'Javatpoint';
console.log(website);
const Data_Tutorial = undefined ?? 28;
const Tutorial = null ?? undefined;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
document.getElementById('retrive2').innerHTML = Tutorial;
</script>
</body>
</html>
输出
下图显示了运算符的两个值作为输出。
示例2 ：以下示例展示了在JavaScript中使用nullish合并运算符与变量的用法。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<p id = "retrive3"></p>
<script>
var first_val = null;
var secon_val = undefined;
var third_val = 'Javatpoint';
var fourth_val = 82;
const website = first_val ?? third_val;
console.log(website);
const Data_Tutorial = secon_val ?? fourth_val ;
const Tutorial = first_val ?? fourth_val;
const data = first_val ?? 0;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
document.getElementById('retrive2').innerHTML = Tutorial;
document.getElementById('retrive3').innerHTML = data;
</script>
</body>
</html>
输出
下图展示了作为操作符的输出的四个值。
示例3： 下面的示例展示了在JavaScript中使用nullish合并运算符与函数的示例。我们可以在控制台选项卡中看到函数属性的不同数据的所有函数数据。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"> output displays in the console tab </p>
<script>
function value(data) {
data = data ?? 82;
console.log(data);
}
value();
value(0);
value('JavaTpoint');
</script>
</body>
</html>
输出
下图显示了操作符的三个值作为输出。
示例4 ：下面的示例展示了在JavaScript中使用空值合并运算符与常量变量的示例。我们可以将常量函数用作具有值的函数。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<script>
const value = {
data : 0
}
const first_info = value.data ?? 80;
const second_info = value.info ?? 78;
document.getElementById('retrive').innerHTML = "Value of first_info: " +first_info;
document.getElementById('retrive').innerHTML = "Value of second_info: " +second_info;
</script>
</body>
</html>
输出
下面的图片显示了运算符的输出结果，其中包括三个值。
为什么使用nullish合并运算符
- 逻辑OR运算符（||）经常被用来设置变量的默认值。例如：
let count_data;
let result_var = count_data || 2;
console.log(result_var);
- 语法的计数变量没有定义，并被强制为假。结果为两个。
- 然而，如果你接受0或空字符串””作为有效值，逻辑或操作符（||）可能会令人困惑，如下所示的语法：
let count_data = 0;
let result_var = count_data || 2;
- 我们可能会惊讶地发现结果是2，而不是0。
- 我们可以通过使用nullish coalescing运算符来避免这个陷阱。只有当第一个值为null或undefined时，它才会返回第二个值。
nullish coalescing运算符中发生了短路。
- nullish coalescing运算符的工作方式类似于逻辑AND和OR运算符。如果第一个运算数不是undefined或null，它不会考虑第二个值。
- 考虑以下演示：
let output =21? alert ('Hello');
- 这个演示中，参数的初始值为21。该值既不是null也不是undefined。
- 运算符(??)不会检查第二个参数，它输出单词”Hello”到提示框。
- 第一个参数是null；示例检查第二个参数：
let output = null ? alert('Hello');
示例
以下示例展示了JavaScript中用于短路的空值合并运算符。多个值使用逻辑运算符在控制台、警示框和div标签中显示。
示例1 : 以下示例展示了JavaScript中使用空值合并运算符与变量的用法。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<script>
var first_val = null;
var secon_val = undefined;
const website = first_val ?? console.log('Javascript Tutorial');
const Data_Tutorial = secon_val ?? console.log('PHP Tutorial');
const Tutorial = 0 ?? console.log("ES6 Tutorial");
console.log(Tutorial);
</script>
</body>
</html>
输出
以下图像显示了作为操作符输出的各种值。
输出1
示例2 ：下面的示例演示了JavaScript中的nullish合并运算符中的短路行为。我们可以看到使用null和非null操作数的javascript功能。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<script>
const website1 = null ?? console.log('Javatpoint');
const website = 'tutorialsandexample' ?? console.log('Javatpoint');
const Data_Tutorial1 = undefined ?? console.log(28);
const Data_Tutorial = 21 ?? console.log(28);
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
</script>
</body>
</html>
输出
下面的图像显示了使用该运算符的网页和控制台值。
输出1
图像显示第一个操作数不为空。
输出2
图像显示控制台中的第一个操作数为空。
使用AND或OR运算符进行链式操作
- 直接将逻辑AND或OR运算符与空值合并运算符结合使用。在以下语法中，我们会遇到一个SyntaxError错误：
const output = null || undefined ?? 'JavaTpoint';
- 但是，您可以通过在??运算符左侧的语句中加括号来明确指定运算符的优先级，从而防止此错误发生:
const output = (null || undefined) ?? 'JavaTpoint';
示例
以下示例显示了在JavaScript的空值合并运算符中发生的短路现象。我们可以通过使用空值和非空值的操作数来查看JavaScript的功能。
<html>
<head>
<title> JavaScript Nullish Coalescing Operator the AND or OR operator to chain
</title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<h5> chaining the AND / OR operator with the Nullish Coalescing Operator </h5>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<script>
const values = null || undefined;
const website = (null || undefined) ?? 'Javatpoint';
const website1 = (null && undefined) ?? 'tutorialsandexample';
const Data_Tutorial = values ?? 28;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = website1;
document.getElementById('retrive2').innerHTML = Data_Tutorial;
</script>
</body>
</html>
输出
以下图片显示了运营商网页上的价值。
总结
当给定两个值时，null合并运算符(??)在第一个值为null或undefined时，返回第二个值。逻辑AND或OR运算符不能直接与javascript的null合并运算符组合使用，因为它具有短路特性。