首页 > 其他分享 >JS中? ?和?. 和||的区别

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

时间:2023-02-08 05:33:05浏览次数:46  
标签:const undefined 区别 console JS obj null log

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);
// "default string"

const baz = 0 ?? 42;
console.log(baz);
// 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

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

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

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

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

标签:const,undefined,区别,console,JS,obj,null,log
From: https://www.cnblogs.com/echohye/p/17100355.html

相关文章

  • JS获取当前页面 URL 参数方法(转)
    转自:JS获取URL参数方法、js获取当前url中的参数、JS获取URL参数的4种方法总结法一constresult=newURLSearchParams(this.props.location.search);constparam=res......
  • 前端 js 将字符串类型转换成其他类型
    方法一eval(argStr)函数,一般传入任何参数都能强转成对应类型。如果想把参数先转成字符串再使用eval转成真实类型,可以使用String()函数进行强转,String(argObj)方法二......
  • JS数据类型转换,转数值,转字符串,转布尔(转)
    转自:JS数据类型转换,转数值,转字符串,转布尔1.转数值numberparseInt(‘内容‘/变量名)可以强制把字符串转整数数值,隐式转换Parsefloat(‘内容‘/变量名)可以强制把有......
  • Jmeter-后置处理器-json提取器(相对路径${..date})与正则提取器(万能表达式.*?)
    1、json提取器-相对路径以及多个参数(写默认值)  如果你的响应体为json格式,那么优先选用json提取器如果想要提前请求中内容、响应的头部内容、或者响应体格式非json格......
  • three.js教程2-几何体BufferGeomety顶点
    1、网格模型(三角形概念)网格模型Mesh其实就一个一个三角形(面)拼接构成。使用使用网格模型Mesh渲染几何体geometry,就是几何体所有顶点坐标三个为一组,构成一个三角形,多组......
  • 静态库和动态库的区别
    程序编译成可执行程序的过程动态库会在链接过程中将自己名字信息打包到可执行文件中,但是不会把自己代码打包过去静态库则是会将自己的代码直接打包到可执行文件中静态库......
  • utf8mb4_general_ci和utf8mb4_unicode_ci区别
    1.准确性:utf8mb4_unicode_ci是基于标准的Unicode来排序和比较,能够在各种语言之间精确排序utf8mb4_general_ci没有实现Unicode排序规则,在遇到某些特殊语言或者字符集,排序结......
  • js实现距离放假的倒计时
    1<divid="time1">23</div>4<script>5functionmytime(){6varnewtime=newDate().getTime()7varendtime=newDate("2023/2/1617:00:00").getTime(......
  • [openlayers07]——加载天地图为底图并展示GeoJSON
    [openlayers07]_加载天地图为底图并展示GeoJSON1.加载底图(得申请key)天地图2.创建地图、设置center和投影//创建地图constcenter=[114.1692,30.494];//EPSG:4......
  • rxjs 实现动态异步调度系统
     通过mergemap操作符:实现任务池的限制,通过defer操作符:延迟创建可观察对象实现异步task的队列等待。最终输出结果2,1,3,4符合预期 importReact,{useState,us......