!!及?.的用法

用户4869731522885
140 阅读4分钟

目录

！！的妙用

js中 ! 的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值

1、!常用于转化为布尔类型的值

  • !null=true
  • !undefined=true
  • !''=true
  • !0=true
  • !20=false
  • !'bbg'=false

2、！！常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
    //a存在，不为null类型不为undefined即 a有内容才执行的代码
}

此时用!!代码看起来 会非常简洁，

if(!!a){
//a存在，不为null、undefined、0，即a有内容才执行的代码
}

空值合并运算符(??)

从上面的例子可以看出 ，!!使用的时候会把0也排除，那么有没有一种可以判断，a存在且不为null或undefined的快捷代码呢？有，请看下面

let b;
let a = 0;
let c = { name:'我是静静' }

if(!!a || a === 0 ){
	b = a;
}else{
	b = c;
}

对就是上面那个例子,当我们想判断一个值存在,但是它等于0的时候,我们也需要当作它存在,于是就有了上面那样的例子,其实我们可以这样做

let b;
let a = 0;
let c = { name:'我是静静' }

b = a ?? c;

上面的例子,当a除了undefined、或者null之外的任何值(包括0),b都会等于a,否则就等于c.

3、可选链(?.)

在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,不仅要写很多冗余的代码,后期维护起来也是满屏的if else可以说是非常的痛苦了.分享几个处理空值简单的方法,希望可以解决大家的一些问题.

可选链(?.) 如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?

let a;
let b = a.name;

如果是上面的这样的代码,那么我们能得到一个报错

image.png 其实这种情况就相当于直接在undefined上面访问name属性.undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的.那么在一个变量可能为null、或者undefined的时候,恰巧我又需要访问这个变量的一个属性,那我们应该这样做

let a;
let b;
if(!!a){
	b = a.name;
}else{
	b = undefined;
}

只有当a存在的时候,我才会去访问a的name属性,如果你想再进一步处理,还可以继续判断以下a的数据类型.可是这不是我们今天的重点,就不多讲了.我们可以看到,这样一个简单的逻辑,我们就要写这么多的东西,那么有没有简单的写法呢?看下面的例子

let a;
let b = a?.name;

我们终于看到?.这个东西了,其实这个就叫做可选链,表达的意思,就和刚才if else的例子是一个意思,只有当a存在,同时a具有name属性的时候,才会把值赋给b,否则就会将undefined赋值给b.重要的是,不管a存在与否,这么做都不会报错.

当然我们还可以这么干

let a;
let b;
b = a?.name?.age?.haha?.不报错？
a?.b?.c(“不报错？”)

我们看到,你后面可以无限接龙下去,不论有多少属性,只要有最后可以访问到属性,访问到最终的结果,就会赋值给b,否则,就把undefined赋值给b.(这样才有资格叫链式结构) 空值赋值运算符(??=) 和上面的例子类似

let b = '你好？';
let a = 0
let c = null;
let d = ’3‘
b ??= a;  // b = “你好？”
c ??= d  // c = '3'

当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值.同样在一些场景下,可以省略很多代码.

趣味问答时间:

let a;
let b = "我想静静"
let c = null;
let d = 0;
let e;

e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e)

结果是什么呢??????? 答案是"我想静静"

版权声明：本文为CSDN博主「c_g vvv」的原创文章。 原文链接：blog.csdn.net/chenggang_z…

avatar
文章
阅读
粉丝