是否存在“空合并”？ JavaScript 中的运算符？

Question

JavaScript 中有空合并运算符吗？

例如，在 C# 中，我可以这样做：

String someString = null;
var whatIWant = someString ?? "Cookies!";

我能想到的 Javascript 的最佳近似是使用条件运算符：

var someString = null;
var whatIWant = someString ? someString : 'Cookies!';

恕我直言，这有点令人讨厌。 我可以做得更好吗？

Answer 1

更新

JavaScript 现在支持 nullish合并运算符 (??)。 当其左侧操作数为 null 或 undefined 时，它返回其右侧操作数，否则返回其左侧操作数。

旧答案

使用前请检查兼容性。

---

JavaScript 中 C# 空合并运算符 (??) 的等效项是使用逻辑 OR (||)：

var whatIWant = someString || "Cookies!";

在某些情况下（如下所述）该行为不会与 C# 的方式相匹配，但这是在 JavaScript 中分配默认/替代值的通用、简洁的方式。

---

说明

无论第一个操作数的类型如何，如果将其转换为布尔值会导致 false，则赋值操作将使用第二个操作数。 请注意以下所有情况：

alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)

这意味着：

var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"

Answer 2

function coalesce() {
    var len = arguments.length;
    for (var i=0; i<len; i++) {
        if (arguments[i] !== null && arguments[i] !== undefined) {
            return arguments[i];
        }
    }
    return null;
}

var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);

// xyz.val now contains 5

该解决方案的工作原理类似于 SQL 合并函数，它接受任意数量的参数，如果它们都没有值，则返回 null。 它的行为类似于 C# ?? 运算符的含义是“”、false 和 0 被视为 NOT NULL，因此算作实际值。 如果您有 .net 背景，这将是最自然的感觉解决方案。

Answer 3

是的，它即将到来。 请参阅此处的提案和此处的实施状态。

它看起来像这样：

x ?? y

示例

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

Answer 4

如果 || 作为 C# 的 ?? 的替代品在您的情况下不够好，因为它会吞下空字符串和零，您始终可以编写自己的函数：

 function $N(value, ifnull) {
    if (value === null || value === undefined)
      return ifnull;
    return value;
 }

 var whatIWant = $N(someString, 'Cookies!');

Answer 5

这里没有人提到 NaN 的潜力，对我来说，它也是一个空值。 所以，我想我应该加两分钱。

对于给定的代码：

var a,
    b = null,
    c = parseInt('Not a number'),
    d = 0,
    e = '',
    f = 1
;

如果您要使用 || 运算符，您将获得第一个非 false 值：

var result = a || b || c || d || e || f; // result === 1

如果您使用新的 ?? （空合并）运算符，您将得到 c，其值为：NaN

vas result = a ?? b ?? c ?? d ?? e ?? f; // result === NaN

这两个对我来说都不合适。 在我自己的合并逻辑小世界中（可能与您的世界不同），我认为 undefined、null 和 NaN 都是“null-ish”。 因此，我希望从合并方法中返回 d（零）。

如果有人的大脑像我一样工作，并且您想排除 NaN，那么这个自定义 coalesce 方法（与 这里发布的）将实现这一点：

function coalesce() {
    var i, undefined, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg !== null && arg !== undefined
            && (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
            return arg;
        }
    }
    return null;
}

对于那些希望代码尽可能短并且不介意有点不够清晰的人，您也可以按照@impinball的建议使用它。 这利用了 NaN 永远不等于 NaN 的事实。 您可以在这里阅读更多相关内容：为什么 NaN 不等于 NaN？< /a>

function coalesce() {
    var i, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg != null && arg === arg ) { //arg === arg is false for NaN
            return arg;
        }
    }
    return null;
}

Answer 6

?? vs || vs &&

其他答案都没有比较所有这三个。 由于贾斯汀·约翰逊的评论有这么多票，并且因为 双问号 vs && 在 javascript 中被标记为与此重复，因此在答案中包含 && 是有意义的。

首先，受 Justin Johnson 评论的启发：

• || 返回第一个“truey”值，否则返回最后一个值。

• && 返回第一个“falsey”值，否则返回最后一个值。

• ?? 返回第一个非空、非未定义的值，否则返回最后一个值，无论它是什么。

然后，用实时代码演示：

let F1,
    F2 = null,
    F3 = 0,
    F4 = '',
    F5 = parseInt('Not a number (NaN)'),
    T1 = 3,
    T2 = 8

console.log( F1 || F2 || F3 || F4 || F5 || T1 || T2 ) // 3 (T1)
console.log( F1 || F2 || F3 || F4 || F5 )             // NaN (F5)

console.log( T1 && T2 && F1 && F2 && F3 && F4 && F5 ) // undefined (F1)
console.log( T1 && T2 )                               // 8 (T2)

console.log( F1 ?? F2 ?? F3 ?? F4 ?? F5 ?? T1 )       // 0 (F3)
console.log( F1 ?? F2)                                // null (F2)

Answer 7

逻辑空赋值，2020+ 解决方案

当前正在向浏览器添加新的运算符 ??=。 这将空合并运算符 ?? 与赋值运算符 = 组合在一起。

注意：这在公共浏览器版本中还不常见。。 将随着可用性的变化而更新。

??= 检查变量是否未定义或为 null，如果已定义则短路。 如果不是，则将右侧值分配给该变量。

基本示例

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

对象/数组示例

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

浏览器支持 Jan '22 - 89%

Mozilla 文档

Answer 8

是的，其提案是现在进入第 4 阶段。 这意味着该提案已准备好纳入正式的 ECMAScript 标准。 您已经可以在最新的桌面版 Chrome、Edge 和 Firefox 中使用它，但我们还需要等待一段时间才能实现该功能的跨浏览器稳定性。

看一下下面的示例来演示其行为：

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = undefined;
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

前面的示例相当于：

const var1 = undefined;
const var2 = "fallback value";

const result = (var1 !== null && var1 !== undefined) ?
    var1 :
    var2;
console.log(`Nullish coalescing results in: ${result}`);

请注意，无效合并将不会威胁虚假值，就像||运算符所做的那样（它只检查< code>undefined 或 null 值），因此以下代码片段将如下所示：

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = ""; // empty string
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

---

对于 TypesScript 用户，从 TypeScript 3.7 开始，这个功能现在也可用了。

Answer 9

阅读您的说明后，@Ates Goral 的答案提供了如何在 JavaScript 中执行您在 C# 中执行的相同操作。

@Gumbo 的答案提供了检查 null 的最佳方法； 但是，请务必注意 JavaScript 中 == 与 === 的区别，尤其是在检查 问题时未定义和/或null。

此处有一篇非常好的文章介绍了两个术语的区别。 基本上，如果您使用 == 而不是 ===，JavaScript 将尝试合并您正在比较的值并返回比较结果在合并之后。

Answer 10

请注意 JavaScript 中 null 的特定定义。 javascript 中“无值”有两种定义。
1. Null：当一个变量为null时，意味着它不包含任何数据，但是该变量已经在代码中定义了。 像这样：

var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts

在这种情况下，变量的类型实际上是 Object。 测试一下。

window.alert(typeof myEmptyValue); // prints Object

2. 未定义：当变量之前没有在代码中定义时，并且正如预期的那样，它不包含任何值。 像这样：

   if ( myUndefinedValue === undefined ) { window.alert('未定义');   } 
     // 警报 
     

如果是这种情况，变量的类型是“未定义”。

请注意，如果您使用类型转换比较运算符 (==)，JavaScript 将对这两个空值执行相同的操作。 为了区分它们，请始终使用类型严格的比较运算符 (===)。

Answer 11

这里有两项：

1. 逻辑 OR

const foo = '' || '默认字符串';

控制台.log(foo); // 输出为“默认字符串”

2. 空合并运算符

const foo = '' ?? '默认字符串';

控制台.log(foo); // 输出为空字符串，即 ''

空值合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为 null 或未定义时，它返回其右侧操作数，否则返回其左侧操作数。

https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Answer 12

请注意，React 的 create-react-app 工具链自 版本 3.3.0（2019 年 12 月 5 日发布）。 从发行说明来看：

可选链接和空合并运算符

我们现在支持可选链接和无效合并运算符！

// 可选链接 
  A？。（）;   // 如果 `a` 为 null/未定义，则未定义 
  公元前;   // 如果 `b` 为 null/未定义，则未定义 

  // 空合并 
  不明确的 ？？   '其他一些默认值'；   // 结果：'其他默认值' 
  无效的 ？？   '其他一些默认值'；   // 结果：'其他默认值' 
  ” ??   '其他一些默认值'；   // 结果： '' 
  0 ??   300；   // 结果：0 
  错误的 ？？   真的;   // 结果：假 
  

也就是说，如果您使用 create-react-app 3.3.0+，您现在就可以开始在 React 应用程序中使用 null-coalesce 运算符。

Answer 13

它有望很快在 Javascript 中推出，因为截至 2020 年 4 月它正处于提案阶段。您可以在此处监控兼容性和支持的状态 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

对于使用 Typescript 的人，可以使用 空值合并运算符 来自 Typescript 3.7

来自文档 -

您可以将此功能（?? 运算符）视为“落下”的一种方式
处理 null 或 undefined 时返回”默认值。 什么时候我们
编写如下代码

让 x = foo ?? 酒吧（）;

这是一种新的方式来表示值“foo”在“存在”时将被使用； 但当它为 null 或 undefined 时，
在其位置计算 bar()。

Answer 14

需要支持旧浏览器并且有对象层次结构

body.head.eyes[0]  //body, head, eyes  may be null 

可以使用这个，

(((body||{}) .head||{}) .eyes||[])[0] ||'left eye'

Answer 15

ECMAScript 2021 启用了两个新功能：

1. 空合并运算符 (??)，这是一个逻辑运算符，当其左侧操作数是以下任一情况时，它会返回其右侧操作数null 或未定义，否则返回其左侧操作数。

let b = undefined ?? 5;

console.log(b); // 5

2. 逻辑空赋值 (x ??= y) 运算符，仅当 x 具有空值（空或未定义）时才进行赋值。

const car = {speed : 20};
car.speed ??= 5;
console.log(car.speed);
car.name ??= "reno";
console.log(car.name);

有关逻辑空值赋值的更多信息，请参阅https:// /developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

有关 Nullish 合并运算符的更多信息可以在此处找到
https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Answer 16

现在它在 Chrome、Edge、Firefox、Safari 等主流浏览器的最新版本中得到了全面支持。以下是 null 运算符和 Nullish Coalescing 运算符之间的比较

const response = {
        settings: {
            nullValue: null,
            height: 400,
            animationDuration: 0,
            headerText: '',
            showSplashScreen: false
        }
    };
    /* OR Operator */
    const undefinedValue = response.settings.undefinedValue || 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue || 'Default Value'; // 'Default Value'
    const headerText = response.settings.headerText || 'Hello, world!'; //  'Hello, world!'
    const animationDuration = response.settings.animationDuration || 300; //  300
    const showSplashScreen = response.settings.showSplashScreen || true; //  true
    /* Nullish Coalescing Operator */
    const undefinedValue = response.settings.undefinedValue ?? 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue ?? ''Default Value'; // 'Default Value'
    const headerText = response.settings.headerText ?? 'Hello, world!'; // ''
    const animationDuration = response.settings.animationDuration ?? 300; // 0
    const showSplashScreen = response.settings.showSplashScreen ?? true; //  false

Answer 17

使用 Babel 的用户需要升级到最新版本才能使用空值合并（??）：

Babel 7.8.0 默认支持新的 ECMAScript 2020 功能：您
不需要启用单独的插件来进行无效合并（??），
使用预设环境不再可选链接 (?.) 和动态 import()

https ://babeljs.io/blog/2020/01/11/7.8.0

Answer 18

启用链式多个值/多个值

• “短路”：如果第一个值之一有效，则不再进行任何评估，
• 这意味着顺序很重要，最左边的值优先

const value = first ?? second ?? third ?? "default";

Answer 19

我试图检查输入是否为空，然后相应地使用该值。 这是我的代码。

let valueToBeConsidered = !inputValue ? "trueCondition" : "falseCondition",

因此，如果 inputValue 为 null，则 valueToBeConsidered = falseCondition，如果 inputValue 有值，则 valueToBeConsidered = trueCondition