Operators of js in ES6 (?., ?:, ? ?, ? ?=,)

1. Null coalescing operator ( ?? )

The null coalescing operator ( ?? ) is a logical operator that returns its right operand when the left operand is null or undefined , otherwise returns the left operand . The null coalescing operator ( ?? ) differs from the logical-or operator ( || ), which returns the right-hand operand if the left-hand operand is false.

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

Compared

After reading the above, you may not understand it, so please read the following

//   ||运算符

function(obj){
    var a = obj || {}
}
 
等价于
function(obj){
    var a;
    if(obj === 0 || obj === "" || obj === false || obj === null || obj === undefined){
 	a = {}
    } else {
	a = obj;
    }
}

//  ??运算符

function(obj){
    var a = obj ?? {}
}
 
等价于
function(obj){
    var a;
    if( obj === null || obj === undefined){
 	a = {}
     } else {
	a = obj;
    }
}

2. Optional chaining operator ( ?. )

The optional chaining operator ( ?. ) allows reading the value of properties located deep in the chain of connection objects without having to explicitly verify that each reference in the chain is valid. The function of the ( ?. ) operator is similar to that of the ( . ) chain operator . The difference is that it will not cause an error when the reference is null ( null or undefined ), and the short-circuit return value of the expression is undefined . When used with a function call, returns undefined if the given function does not exist .

The optional chaining operator will make expressions shorter and more concise when trying to access object properties that may not exist. The optional chaining operator is also helpful when exploring the contents of an object if you are not sure which properties must be present.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

3. ??= Null assignment operator

When you think this is over, ES2022 brings us the ??=assignment operator symbol, which is also ||=similar to the operator, but there are differences in the assignment conditions above.

??=The English full name of the operator is Logical nullish assignment , and the Chinese translation is logical nullish assignment .

The logical null assignment operator ( x ??= y) assigns to x only if it is null or undefined.

let a = 0;
a ??= 1;
console.log(a); // 0

let b = null;
b ??= 1;
console.log(b); // 1

4. ?: Ternary operator

Match pattern but do not get matching results

?: Also known as the conditional operator, it accepts three operands: condition? The expression to be executed when the condition is true: the expression to be executed when the condition is false. actual effect:

举例1：
function checkCharge(charge) {
    return (charge > 0) ? '可用' : '需充值' 
}
console.log(checkCharge(20)) // => 可用
console.log(checkCharge(0)) // => 需充值


举例2：
var str = 'aaabbb'
var reg = /(a+)(?:b+)/
str.match(reg)

// ["aaabbb", "aaa", index: 0, input: "aaabbb", groups: undefined]