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

2020/09/17 08:01 · javascript ·  · 0评论

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

例如,在C#中,我可以这样做:

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

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

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

这有点怪异恕我直言。我可以做得更好吗?

更新资料

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

使用前请检查兼容性。


与C#空合并运算符(??等效的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
  1. 未定义:如果之前未在代码中定义变量,并且不出所料,则该变量不包含任何值。像这样:

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

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

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

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

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

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

是的,它的建议现在的第四阶段这意味着该提案已准备好包含在正式的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值的方式,||运营商做了(只用于检查undefinednull值),因此,下面的代码片段会采取行动如下:

// 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开始,该功能现在也可用。

请注意,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运算符。

希望它将很快以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()其位置。

逻辑无效分配,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" }

浏览器支持 2020年9月-3.7%

Mozilla文档

确定正确的答案

它存在于JavaScript中吗? 是的,它确实。 但。当前处于阶段32020-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 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
本文地址:http://javascript.askforanswer.com/javascriptzhongshifouyoukonghebingyunsuanfu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!