广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JS中? ?和?. 和||的区别
  • 782
分享到

详解JS中? ?和?. 和||的区别

2024-04-02 19:04:59 782人浏览 独家记忆
摘要

目录1、?? 与 || 的区别2、?? 和 ?. 的区别1、?? 与 || 的区别 1)相同点: ?? 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返

1、?? 与 || 的区别

1)相同点:

?? 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。

  • One ?? Two
  • One || Two

2)不同点:

判断的方法不同:

  • 使用 ?? 时,只有One为 null 或者 undefined 时才会返回 two;
  • 使用 || 时,One会先转化为布尔值判断,为true时返回One , false 返回Two
 // ??
  undefined ?? 2    // 2
  null ?? 2        // 2
  0 ?? 2            // 0
  "" ?? 2            // ""
  true ?? 2        // true
  false ?? 2        // false


 // ||
  undefined || 2    // 2
  null || 2        // 2
  0 || 2            // 2
  "" || 2            // 2
  true || 2        // true
  false || 2        // 2

2、?? 和 ?. 的区别

1) 空值合并操作符 ??

只有当左侧为null 或者undefined 时,才会返回右侧的值。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
const nullValue = null;
const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
console.log(valC); // 42

2)可选链操作符 ?.

可选链操作符 ?. 允许读取连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于. 链操作符,不同之处在于,在引用为空,即 null 或者 undefined 的情况下不会引起错误,该表达式短路返回值。

const obj = { a: { b: [{ name: 'obj' }] } }

// 原本的写法
console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name)

// 可选链写法
console.log(obj?.a?.b?.[0]?.name); // obj
console.log(obj?.b?.c?.d) // undefined

例如上面的例子,?. 判断的对象是 nullish (null 或者 undefined) ,表达式就会短路,不再往后执行,返回 undefined

可以和 ?? 运算符结合使用:

const obj = { a : { name: 'obj'} }

obj?.a?.b ?? 'hello world' // hello world

到此这篇关于详解js中? ?和?. 和||的区别的文章就介绍到这了,更多相关详解JS中? ?和?. 和||的区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解JS中? ?和?. 和||的区别

本文链接: https://www.lsjlt.com/news/151534.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解JS中? ?和?. 和||的区别
    目录1、 与 || 的区别2、 和 . 的区别1、 与 || 的区别 1)相同点: 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面...
    99+
    2022-11-13
  • JS中some和every的区别和用法详解
    JS中some和every的区别和用法 some和every是数组中迭代的方法相同点:some和every都有三个参数,即item→当前项,index→当前的索引...
    99+
    2023-05-19
    js some和every使用 js some和every some every区别
  • js中Map和Set的用法及区别实例详解
    目录首先了解一下 Map再来了解一下 Set总结Map和Set的区别结语:首先了解一下 Map Map 是一组键值对的结构,和 JSON 对象类似。 (1) Map数据结构如下 这里...
    99+
    2022-11-13
  • mybatis中#{}和${}的区别详解
    目录一、MyBatis中${}和#{}的区别1.1 ${}和#{}演示1.2 SQL注入问题1.3 ${}和#{}的区别1.4 #{}底层是如何防止SQL注入的?1.4.1 网上的答...
    99+
    2022-11-13
  • Servlet中/和/*的区别详解
    目录本文提纲版本约定✍正文点拨“市面上”的错误答案1、/用于Servlet,demo:这个urlPatterns是合法的。只不过它属于精确匹配,也就是说别看它中间有*,仍...
    99+
    2022-11-12
  • mysql中#{}和${}的区别详解
    #{}会将传入的数据当成一个字符串,会对自动传入的数据加一个双引号 order by #{userId}   这里假如userId = 111,那么解析成sql时...
    99+
    2022-11-13
  • JS中Map、WeakMap和Object的区别解析
    目录JavaScript中的Map、WeakMap和Object都是用于存储键值对的数据结构:下面是Map、WeakMap和Object之间的区别:1. 键的类型:2. 垃圾回收:3...
    99+
    2023-05-16
    js map weakmap和object区别 js weakmap和object区别
  • 详解JS中continue关键字和break关键字的区别
    目录1.框架2.简单介绍3.代码演示4.演示break1.框架 <!DOCTYPE html> <html> <head> ...
    99+
    2022-11-13
    JS continue break区别 JS continue break
  • JS中call和apply的区别
    一、参数传递方式不同 call方法接受的是若干个参数列表,名列前茅个参数表示要改变上下文的对象,后面的参数表示要传递给函数的参数。 apply方法接收的是两个参数,名列前茅个参数表示要改变上下文的对象,第二个参数则是一个包含多个...
    99+
    2023-10-29
    区别 JS call
  • JS中null和undefined的区别
    目录前言定义异同点实际应用总结1.JS 中如何判断 undefined2.JS 中如何判断 null前言 在JavaScript中,null和undefined是两个常见的数据类型,...
    99+
    2023-05-20
    JS null undefined
  • Java中equals和==的区别详解
    目录1.java中的数据类型,可分为两类: 2.再稍微改动一下程序,会有更奇怪的发现: 3. 字符串缓冲池 4.再次更改程序: 总结1.java中的数据类型,可分为两类: 1.基本...
    99+
    2022-11-12
  • JavaScript/TypeScript中==和===的区别详解
    在JS/TS项目里,除了能看到==操作符来判断两个变量是否相等外,我们还会看到===操作符,这两者有什么区别吗? 先上结论, 对于String, number这些基础类型,==操作符...
    99+
    2022-11-13
  • 详解Java中==和equals()的区别
    目录1. ==1.1 基本数据类型1.2 引用数据类型1.3 小结2. equals3. 总结1. == == 是运算符,用来判断两个值是否相等,==可以使用在基本数据类型变量和引用...
    99+
    2022-11-12
  • 深入理解JS中attribute和property的区别
    目录attribute和property介绍“脚踏两只船”attribute和property的取值和赋值1、attribute取值2、attribute赋值...
    99+
    2022-11-13
  • js中==和===的区别有哪些
    这篇文章将为大家详细讲解有关js中==和===的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScri...
    99+
    2023-06-15
  • 详解Python中 __get__和__getattr__和__getattribute__的区别
    引子 假设我们有个类A,其中a是A的实例 a.x时发生了什么?属性的lookup顺序如下: 如果重载了__getattribute__,则调用. a.__dict__, 实例中是不允许有d...
    99+
    2022-06-04
    详解 区别 Python
  • Java中Exception和Error的区别详解
    世界上存在永远不会出错的程序吗?也许这只会出现在程序员的梦中。随着编程语言和软件的诞生,异常情况就如影随形地纠缠着我们,只有正确的处理好意外情况,才能保证程序的可靠性。 java语...
    99+
    2022-11-12
  • java中StringStringBuffer和StringBuilder的区别详解
    目录从声明定义上来谈从结构上来谈从线程安全来谈总结从声明定义上来谈 只有String 可以 直接声明创建 而 StringBuffer 与 StringBuilder 必须去new...
    99+
    2022-11-13
  • Android中asset和raw的区别详解
    *res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制。 *res/raw和assets的不同点: 1.res...
    99+
    2022-06-06
    asset Android
  • python中response.text 和response.content的区别详解
    1.response.text - 类型:str - 解码类型: 根据HTTP 头部对响应的编码作出有根据的推测,推测的文本编码 - 如何修改编码方式:response.encoding=”gbk” 2. respo...
    99+
    2022-06-02
    python response.text response.content
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作