JavaScript中是否有“空合并”运算符？

Javascript中是否有空合并运算符？

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

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

我可以为Javascript找到的最佳近似是使用条件运算符：

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

恕我直言，这有点棘手。我可以做得更好吗？

更新资料

JavaScript现在支持无效的合并运算符（??）。当其左侧操作数为null或时undefined，它返回其右侧操作数，否则返回其左侧操作数。

使用前请检查兼容性。

与C＃null合并运算符（??）等效的JavaScript 使用逻辑OR（||）：

var whatIWant = someString || "Cookies!";

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

澄清度

无论第一个操作数的类型如何，如果将其强制转换为Boolean都会导致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"

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背景，这将是最自然的解决方案。

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

看起来像这样：

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

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

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

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

这里没有人提到过的潜力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

var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'

这些对我来说都不对。在我自己的可能与您的世界不同的合并逻辑的小世界中，我认为未定义，空值和NaN都是“空值的”。因此，我希望可以d从合并方法取回（零）。

如果任何人的大脑都像我的大脑一样工作，并且您想排除NaN，那么此方法将完成以下任务：

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？

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;
}

当心JavaScript的null定义。在javascript中，“ no value”有两个定义。1. Null：当变量为null时，表示它不包含任何数据，但是该变量已在代码中定义。像这样：

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

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

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

2. 未定义：如果之前未在代码中定义变量，并且不出所料，则该变量不包含任何值。像这样：

   if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
   // alerts

在这种情况下，变量的类型为“未定义”。

请注意，如果您使用类型转换比较运算符（==），JavaScript将对这两个空值均起同样的作用。为了区分它们，请始终使用类型严格的比较运算符（===）。

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

@Gumbo的答案提供了检查null的最佳方法；但是，重要的是要注意JavaScript ==与===JavaScript之间的区别，尤其是在涉及检查undefined和/或问题时null。

有关于两个词的区别一个真正的好文章在这里。基本上，请理解，如果您使用==而不是===，JavaScript将尝试合并您正在比较的值，并在合并后返回比较的结果。

请注意，React的create-react-app工具链自版本3.3.0（发布于2019年12月5日）以来支持空合并。从发行说明中：

可选链接和空位合并运算符

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

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

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

是的，它的建议是现在的第四阶段。这意味着该提案已准备好包含在正式的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}`);

需要注意的是nullish凝聚会不会威胁falsy值的方式，||运营商做了（只用于检查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开始，该功能现在也可用。

希望它将很快以Javascript形式提供，因为它处于2020年4月的提议阶段。您可以在此处监视状态的兼容性和支持-https://developer.mozilla.org/zh-CN/docs/Web/ JavaScript /参考/运算符/ Nullish_coalescing_operator

对于使用打字稿的人，你可以使用nullish合并运算从打字稿3.7

从文档-

您可以考虑使用此功能- ??运算符-作为在处理null或时“退回”默认值的方法undefined。当我们写像

let x = foo ?? bar();

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

确定正确的答案

它是否存在于JavaScript中？ 是的，它确实。 但。当前处于第3阶段的2020-02-06，目前尚未在所有地方获得支持。单击下面URL中的链接，然后转到“规格”和“浏览器兼容性”标题，以获取有关其位置的更多信息。

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

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

与逻辑OR（||）运算符相反，如果左操作数是一个不为null或未定义的虚假值，则将其返回。换句话说，如果您使用|| 要为另一个变量foo提供一些默认值，如果您认为某些虚假值可用（例如''或0），则可能会遇到意外行为。请参阅下面的更多示例。

想要例子吗？按照我发布的链接，它包含了所有内容。

现在，它已在主要版本的主流浏览器（如Chrome，Edge，Firefox，Safari等）的最新版本中提供全面支持。这是null运算符和Nullish合并运算符之间的比较

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