JavaScript中高级语法??表达式用法示例详解

 更新时间:2023年04月17日 11:05:38   作者:前端代码王  
这篇文章主要为大家介绍了JavaScript中高级语法??表达式用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

JavaScript中,双问号(??)表达式是一种非常有用的方法。它的作用是用来检测一个值是否为nullundefined。如果该值为nullundefined,那么双问号表达式会返回一个默认值。

下面我们就来具体探究一下双问号表达式的用法,以及它与其他相似方法的区别。

具体用法。

其实,双问号表达式就是一个三目运算符的简化写法,如下所示:

const result = value !== undefined && value !== null ? value : defaultValue;

在上面的表达式中,我们检测了value 是否等于undefinednull,如果不等于,我们返回value本身。

否则,我们返回一个默认值defaultValue。这种写法虽然功能简单,但是有着很多的重复代码,不利于代码的维护和可读性。

因此,双问号表达式的出现就解决了这个问题。双问号表达式的语法结构如下:

const result = value ?? defaultValue;

这行代码的意思是:如果value的值为nullundefined,那么返回defaultValue;否则返回value的值本身。使用双问号表达式,代码看起来就简洁明了。

那么双问号表达式和其他的相似方法有什么不同呢?

其实,JavaScript中还有一种方法也能实现双问号表达式的效果——逻辑或操作符(||)。例如:

const result = value || defaultValue;

这段代码的含义和前面的代码是相同的。其中,||操作符的原理是:如果第一个操作数为真,则返回第一个操作数的值;否则返回第二个操作数的值。这里的包括了所有不为null、undefined、false、0、空字符串的值。

因此,如果value的值是nullundefined,那么返回的就是defaultValue

那么二者之间有什么明显的区别呢?

双问号表达式和||操作符最重要的区别在于空字符串的处理方式。

在使用||操作符时,如果value是空字符串(""),那么返回的值也是defaultValue。但是在使用双问号表达式时,如果value是空字符串,那么返回的就是空字符串本身。

这种区别可能对于某些特定的应用场景非常重要,因此,我们需要根据实际情况选择不同的方法。

总结

双问号表达式是一种非常实用的方法,在JavaScript中得到了广泛的应用。它的语法简洁明了,代码可读性强,特别是在处理nullundefined的情况下,能够大大简化代码。然而,在具体应用时我们也需要注意与其他方法的区别,根据实际情况选择最适合的方法。

以上就是JavaScript中高级语法??表达式用法示例详解的详细内容,更多关于JavaScript语法??表达式的资料请关注脚本之家其它相关文章!

相关文章

  • Form表单上传文件(type=

    Form表单上传文件(type="file")的使用

    这篇文章主要介绍了Form表单上传文件(type="file")的使用,以及过滤器解决中文乱码问题,需要的朋友可以参考下
    2017-08-08
  • JavaScript DOM 对象深入了解

    JavaScript DOM 对象深入了解

    下面小编就为大家带来一篇JavaScript DOM 对象深入了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 关于JavaScript作用域你想知道的一切

    关于JavaScript作用域你想知道的一切

    关于JavaScript作用域你想知道的一切,本文全部告诉大家,帮助大家全面的了解JavaScript作用域,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript 实现类似Express的中间件系统(实例详解)

    JavaScript 实现类似Express的中间件系统(实例详解)

    在 Express 中可以给一个请求设置若干个中间件,在处理响应时会按顺序执行这些中间件,正在执行的中间件可以控制是否执行下一个中间件,这篇文章主要介绍了JavaScript 实现类似Express的中间件系统的相关资料,需要的朋友可以参考下
    2023-02-02
  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript知识点总结(十一)之js中的Object类详解

    这篇文章主要介绍了JavaScript知识点总结(十一)之js中的Object类详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • bootstrap fileinput实现文件上传功能

    bootstrap fileinput实现文件上传功能

    这篇文章主要为大家详细介绍了bootstrap fileinput实现文件上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript设计模式 – 外观模式原理与用法实例分析

    javascript设计模式 – 外观模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 外观模式,结合实例形式分析了javascript外观模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js实现轮播图的完整代码

    js实现轮播图的完整代码

    这篇文章主要为大家详细介绍了js实现轮播图的完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 通过实例解析javascript Date对象属性及方法

    通过实例解析javascript Date对象属性及方法

    这篇文章主要介绍了通过实例解析javascript Date对象属性及方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • mapboxgl实现带箭头轨迹线的代码

    mapboxgl实现带箭头轨迹线的代码

    这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01

最新评论