美文网首页
2023-04-04 整理js中!、!!、.?、??、??=、的

2023-04-04 整理js中!、!!、.?、??、??=、的

作者: 追寻1989 | 来源:发表于2023-04-03 10:34 被阅读0次

!和 !! 的区别用法

js中!的用法是比较灵活的,他除了做逻辑运算常常会用!做类型判断,还可以用!与上对象来求得一个布尔值
1、!可将变量转换成boolean类型,null、undefined和空字符串取反都为true,其余都为false

!null = true;
!undefined = true
!'' = true
!'aa' = false

2、!! 是将表达式强制转化为boolean值运算,运算结果为true或者false,表达式是什么值,结果就是对应的bool值,不再取非,不是取非再取非的意思

!!false = false;
!!'false' = true
!!true = true
!!(NaN || undefined || null || 0) = false

var o = {flag: true}; 
var test = !!o.flag
等价于
var test = o.flag || false

由于对null和undefined 用!操作符时都会产生true的结果,所以用两个感叹号的作用就在于,如果明确设置了o中flag的值(非undefined/null/0)自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null、undefined

可选链(.?)

如果一个值为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 = { name:'buzhimingqianduan' }

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

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

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

b = a ?? c;

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

空值赋值运算符(??=)

和上面的例子类似

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

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

原文:https://blog.csdn.net/u012930360/article/details/126135019

相关文章

  • JS中的事件归纳整理

    JS中的原生事件看了一下,一共有以下100来个:onanimationend,onanimationiterati...

  • js中||和&&用法整理

    逻辑运算 此处省略 || 代替 if 的用法 先看几个例子:var x = 0||1; //10意味着false,...

  • js中window事件整理

    感觉有很多的事件需要大家记住,今天我就帮大家先列举一些: onmouseover 鼠标移入 onmouseou...

  • iOS UIWebView 上JS和OC的交互

    最近做一个项目总涉及到了UIWebView中js和oc的交互问题,找了各种资料在此整理一下 1.js调用OC JS...

  • 咨询展示收获(一)

    杨素芳 中原焦点团队 高五 坚持分享1543天 2023-04-04 1、对想改变对方的咨询——是隔山打牛。对...

  • JavaScript对象创建

    这几天花时间好好把js中的对象创建整理了一下,这块也是我之前比较薄弱的环节。 创建对象 在js中对于如下代码,有这...

  • js中取模运算、求商及取整方法

    在此整理一下js中的取模运算、求商及取整方法 得到结果如下:

  • js 常用技巧整理,持续更新中...

    1、单行写一个评级组件 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);定义一个变...

  • JS中Array和String方法整理

    Array 1.数组定义 2.数组直接赋值 3.数组赋值覆盖元素 4.添加元素 array.push(argume...

  • JS之String

    今天准备整理出JS中字符串的相关知识,虽然已经整理了思维导图,但是还是自己在整理一篇具体知识点,印象比较深刻 一:...

网友评论

      本文标题:2023-04-04 整理js中!、!!、.?、??、??=、的

      本文链接:https://www.haomeiwen.com/subject/slmdddtx.html