JS中空值合并运算符 ?? 的使用_javascript技巧

空合并运算符 ?? (Nullish coalescing operator)  是一个逻辑运算符，当其左侧操作数为 null 或 undefined 时，它返回其右侧操作数，否则返回其左侧操作数

与 逻辑或 (||) 运算符不同，空值合并运算符只会考虑 null 和 undefined，而不会将其他假值（如 false、0、NaN、"" 空字符串等）视为需要替代的值。

let a = null;let b = 5;let c = undefined;let d = 0;console.log(a ?? b); // 5，因为 a 是 nullconsole.log(c ?? b); // 5，因为 c 是 undefinedconsole.log(d ?? b); // 0，因为 d 不是 null 或 undefined，而是 0

比较 ?? 和 ||

let x = 0;let y = 10;console.log(x || y); // 10，因为 x 是假值（0）console.log(x ?? y); // 0，因为 x 不是 null 或 undefined

在上面的例子中：

提供默认值： 当一个值可能为 null 或 undefined 时，可以用 ?? 来提供一个默认值。

let userAge = null;let defaultAge = 18;let age = userAge ?? defaultAge;console.log(age); // 18，因为 userAge 是 null

避免无效值： 当你有多个潜在的 null 或 undefined 值时，可以使用空值合并运算符来选择第一个有效值。

空值合并运算符和可选链（?.）结合使用时，能够更安全地访问对象的属性，并且提供一个默认值。

let user = { name: "Alice" };let userAge = user?.age ?? 18;console.log(userAge); // 18，因为 user 对象中没有 `age` 属性，所以返回默认值 18

在这个例子中，?. 用于安全地访问 user.age，如果 age 不存在，它返回 undefined，然后 ?? 提供默认值 18。

很多人会搞混?? 运算符 与 || 运算符，觉得这两个实现的效果都一样。其实这是不严谨的，它们之间还是有一些细微的差别。?? 和 || 主要区别在于 假 (false) 和 假值(falsy) 的区别。

// 1. 使用 0 作为输入 const a = 0;console.log(`a || 10 = ${a || 10}`); // a || 10 = 10console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 0// 2. 空字符串 '' 作为输入const a = ''console.log(`a || "ABC" = ${a || "ABC"}`); // a || "ABC" = ABCconsole.log(`a ?? "ABC" = ${a ?? "ABC"}`); // a ?? "ABC" = // 3. 使用 null 作为输入const a = null;console.log(`a || 10 = ${a || 10}`); // a || 10 = 10console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 10// 4. 使用 undefined 作为输入const a = {name: ''}console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`); console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);// a.name ?? 'varun 1' = // a.name || 'varun 2' = varun 2// 5. 使用 false 作为输入const a = false;console.log(`a || 10 = ${a || 10}`); // a || 10 = 10console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = false

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

上一篇：PeerJS实现实时在线消息发送的示例代码java

下一篇：Javascript双重否定运算的具体使用javascri