ES6运算符的扩展

目录

一、指数运算符（**）

二、可选链运算符（?.）

三、Null链运算符/空值合并（??）

四、逻辑运算符（||=    &&=    ??=   **=）

1、或运算符  ||=

2、与运算符   &&=

3、Null赋值运算符  ??=

4、指数运算符   **=

---

一、指数运算符（**）

用法：

等同于数学里的2的3次方

    console.log(2 ** 3);//8
    // 等同于
    console.log(2 * 2 * 2);//8

计算顺序是从右往左计算，下面的代码可以体现出来

//首先计算2的三次方，得出的结果就是最左边的2的次方，最终计算出为256
console.log(2 ** 2 ** 3);//256
//如果想改变它的计算顺序，加个括号即可
//先计算括号里的2的2次方，得出的结果的3次方就是64
console.log((2 ** 2) ** 3);//64

二、可选链运算符（?.）

可选链优点：是一个安全操作可以放心的使用

可选链缺点：是一个隐藏错误的操作，如果需要显示的暴露错误，不建议使用

使用：

  // 背景：要读取嵌套的属性，或者读取对象里的方法并执行
    var a = {
        // 下面的属性都是不确定的，有可能是undefined
        b: {
            c: {
                d() {
                    return 'hi'

                }
            }
        }
    }
  // 直接调用如果其中有一个数据出现异常，代码会报错，阻塞了后面代码的执行
     console.log(a.b.c.d());

解决方法：

使用可选链可以减少代码量

    // 为了避免在读取对象属性或执行方法的时候报错,通常使用短路的写法
    console.log(a && a.b && a.b.c && a.b.c.d && a.b.c.d())//hi

    // 三元也可以解决这个问题
    console.log(a.b.c.d ? a.b.c.d() : 'undefined');

    // 可选链运算符写法
    console.log(a?.b?.c?.d?.());

三、Null链运算符/空值合并（??）

使用：

 // 背景：在项目中经常会判断一个数据的真假，如果为假就取默认值，
 //这里使用到了短路或||，但是0和''是有效的数据，也被当成了假值
    console.log(0 || '默认值');//默认值
    console.log('' || '默认值');//默认值
    console.log(null || '默认值');//默认值
    console.log(undefined || '默认值');//默认值

专门针对null和undefined的异常场景，es6推出了空值合并   ??

    console.log(0 ?? '默认值');//0
    console.log('' ?? '默认值');//''
    console.log(null ?? '默认值');//默认值
    console.log(undefined ?? '默认值');//默认值

四、逻辑运算符（||=    &&=    ??=   **=）

||=、&&=、??= 、**=   都会进行赋值运算

||= 、&&= 、??= 它们的一个用途是，为变量或属性设置默认值

1、或运算符  ||=

    // 或运算符  ||=
    a ||= b
    // 等同于：
    a || (a = b)

2、与运算符   &&=

    // 与运算符   &&=
    a &&= b
    // 等同于：
    a && (a = b)

3、Null赋值运算符  ??=

    // Null赋值运算符  ??=
    a ??= b
    // 等同于：
    a ?? (a = b)

4、指数运算符   **=

    //指数运算符 **=
    a **= 3;
    //等同于
    a * a * a

---

 谢谢观看如果有问题麻烦指出~点个赞吧❤