es6新增的几个运算符：三目运算符，链判断运算符，Null判断运算符

1、?:

三目运算符，?前是表达式，:两侧分别是表达式为truthy和falsy时的返回值或者操作。可顶替if使用

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}
// Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

//右结合
function example(…) {
    return (condition1 ? value1 : (condition2 ? value2 :( condition3 ? value3 : value4)));
}

运算时为右结合.

2、 ?. 链判断运算符

当访问的对象属性层级比较深时，

//以前
obj&&obj.a&&obj.a.b
//现在
obj?.a?.b

当?左侧的对象为null或者undefined时，就不继续向右运算了，而是返回undefined

obj.func?.() ;//表示如果存在obj.func，那么就运行

链判断运算符?.有三种写法。

• obj?.prop // 对象属性是否存在
• obj?.[expr] // 同上
• func?.(...args) // 函数或对象方法是否存在

3、?? NULL判断运算符

用法主要为赋初值

//以前的用法，当||左侧为falsy值时就赋给变量||后面的值，
const headerText = response.settings.headerText || 'Hello, world!';
//但是只要属性的值为null或undefined，其余的false或者0也要赋值给变量的话，就无法实现
//现在使用??,可以确保只有undefined或者null时才会使用默认值
function Component(props) {
  const enable = props.enabled ?? true;
  // …
}

注意：&&,||,??都是逻辑运算符，出现在同一个表达式中，需要用()括号进行优先级的确定，不然报错。

比如：

(lhs && middle) ?? rhs; // 就算在最前面也要加()
lhs && (middle ?? rhs);

4、逻辑赋值运算符 &&= ，||=， ??=

之前常见的赋值运算符有 +=,-=这种 , &&= ，||=， ??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

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

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

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

还可以进行赋初值的操作

function example(opts) {
  opts.foo ??= 'bar'; //  opts.foo??(opts.foo='bar')
  opts.baz ??= 'qux';// opts.baz??(opts.baz='qux')
}

 

参考：

ES6 入门教程

运算符优先级 - JavaScript | MDN

条件运算符 - JavaScript | MDN