我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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中? ?和?. 和||的区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

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

下载Word文档

猜你喜欢

JS中some和every的区别和用法详解

every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下
2023-05-19

JS中forEach()和map()的区别讲解

forEach()和map()是JavaScript中处理数组的两个内置函数。forEach()用于遍历数组中的每个元素,并对其执行一个函数,而不需要返回值。map()遍历数组中的每个元素,并将它们映射到一个新数组中,返回包含新映射元素的新数组。forEach()常用于对数组元素进行副作用操作,例如打印或修改,而map()常用于创建数组的副本或转换数组中的元素。
JS中forEach()和map()的区别讲解
2024-04-02

JS中null和undefined的区别

在JavaScript中,null和undefined是两个常见的数据类型,本文就详细的介绍了JS中null和undefined的区别,感兴趣的可以了解一下
2023-05-20

JS中call和apply的区别

JavaScript中的call和apply的区别:1、参数传递方式不同;2、使用场景的差异;3、实现方式的差异;在使用call方法时,需要将上下文对象作为名列前茅个参数传递,然后按顺序传递函数的参数。使用apply方法时,函数的参数需要放在一个数组(或类数组对象)内,作为第二个参数传递。
JS中call和apply的区别
2023-10-29

JS中Map、WeakMap和Object的区别解析

Map、WeakMap和Object都是JavaScript中用于存储键值对的数据结构,它们在键类型、垃圾回收、可枚举性、方法和操作、以及继承等方面存在一些区别,适用于不同的场景,本文给大家详细讲解jsmap、weakmap和object区别,需要的朋友可以参考下
2023-05-16

详解JS中continue关键字和break关键字的区别

在javascript中continue的作用是退出当前次循环,break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别,感兴趣的可以了解一下
2022-11-13

js中==和===的区别有哪些

这篇文章将为大家详细讲解有关js中==和===的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScri
2023-06-15

详解Python中 __get__和__getattr__和__getattribute__的区别

引子 假设我们有个类A,其中a是A的实例 a.x时发生了什么属性的lookup顺序如下:如果重载了__getattribute__,则调用.a.__dict__, 实例中是不允许有descriptor的,所以不会遇到descriptorA.
2022-06-04

node.js中grunt和gulp的区别详解

node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片
2022-06-04

Android中src和background的区别详解

ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是图片内容(前景),bg是背景,可以同时使用。 此外:
2022-06-06

编程热搜

目录