ES6的运算符拓展

目录

• • 概要
  • 指数运算符
  • 链判断运算符
  • null判断符
  • 逻辑赋值运算符
  • 小结

概要

ES6的运算符分为指数运算符、链判断运算符、null判断符、逻辑赋值运算符。

指数运算符（ ** ）

指数运算符就是**，作用相当于数学里面学的平方。

特点：这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。

    let rst = 2 ** 3 ** 2;

   console.log(rst);//512,注意特点是自右向左运算

链判断运算符 （?.）

如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。

因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.

直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined

eg:

let rst = {
            code: 200,
            data: {
                msg: "ok",
                info: {
                    type: 1,
                    data: {
                        id: null,
                        title: "靴子"
                    }
                }
            }
        }

        //   let t=  rst.data.info.data.title;
        // let t = rst.data.info.data.title || "帽子";//error
        // let t = (rst || rst.data || rst.data.info || rst.data.info.title) || "帽子";
        // let t = rst?.data?.info?.data?.title || "帽子"

        // console.log(t);

null判断符（？？）

读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

eg:

 let rst = {
            code: 200,
            data: {
                msg: "ok",
                info: {
                    type: 1,
                    data: {
                        id: null,
                        title: "靴子"
                    }
                }
            }
        }

// "" null undefined  0
        // let t=rst.data.info.data.id || 100;
        //运用null运算符??,只有结果为null或undefined时，才生效
        let t = rst?.data?.info?.data?.title ?? "帽子"
        console.log(t);

逻辑赋值运算符（||=、&&=、??=）

ES2021 引入了三个新的逻辑赋值运算符（logical assignment operators），将逻辑运算符与赋值运算符进行结合。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

这三个运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

它们的一个用途是，为变量或属性设置默认值。

 老的写法
a.id = user.id || 1;
 新的写法
a.id ||= 1;

上面示例中，a.id属性如果不存在，则设为1，新的写法比老的写法更紧凑一些。

小结

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注！