js question mark dot (?) - optional chain operator and double question mark (?) - usage of null value merging operator & deconstruction assignment: {data: {Name:'name '}}

1. Question mark dot (?) - optional chain operator

The optional chain operator (?.) allows you to read the value of an attribute deep in the chain of connected objects without explicitly verifying 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 when the reference is empty (null or undefined), no error will be caused. The short circuit return value of the expression is undefined. When used with a function call, undefined is returned if the given function does not exist.

var a = null;
console.log(a)  // null
console.log(a.b)  // report errors
console.log(a?.b)  // undefined

It's a bit like a & & a.name we often use. In fact, the functions are basically similar, but the writing method is simplified

Example 1

let nestedProp = obj.first && obj.first.second;
// Equivalent to
let nestedProp = obj.first?.second;

Interpretation - optional chain operators

js implicitly checks and determines that obj.first is neither null nor undefined before attempting to access obj.first.second. If obj.first is null or undefined, the expression will be short circuited and the calculation will directly return undefined.

Example 2

const obj = {
    hh:"xxx"
}
let res = obj?.data?.list

Equivalent to

let res = obj?.data?.list
//  Equivalent to
let res = obj && obj.data && obj.data.list

The null merge operator can set a default value when using an optional chain

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "Dark City";
console.log(customerCity); // "Dark city"
// Equivalent to
if (customer.city==null || customer.city==undefined ){
    let customerCity = "Dark City"
}else{
    let customerCity = customer.city   
}

Judge whether the (length) under (businessObject) and (value) under this object (this.element) is null or undefined. When one of the chains is null or undefined, undefined will be returned. In this way, no error will be reported even if an attribute is missing in the middle. The default value is followed by the double question mark.

var obj ={}
console.log(obj?.a?.b ?? 233 ) //233
var obj={a:{b:1}}  // Equivalent to res = {data:{data: 'user information', message: 'prompt'}}
console.log(obj?.a?.b??233) //1

Interpretation deconstruction assignment

var obj={a:{b:1}}

var obj={a:{b:1}}
console.log(obj.a)  // {b:1}
console.log(obj.a.b)  // 1

var res = {data:{data:'User information',message:'Tips'}}
console.log(res.data)  // {data: 'user information', message: 'prompt'}
console.log(res.data.data)  // "User information"

2. Double question mark (?) - null merge operator

The null merge operator (?) is a logical operator when the operand on the left is null perhaps undefined Returns its right operand, otherwise returns the left operand.

Unlike the * * logical or operator (| * *), the logical or operator will have an operand on the left False value Returns the right operand.

That is, if you use 𞓜 to set default values for some variables, you may encounter unexpected behavior. For example, when it is a false value (for example, '', null, undefined, or 0).

console.log(1 || "xx") 			//1
console.log(0 || "xx") 			//xx
console.log(null || "xx")		//xx
console.log(undefined || "xx")  //xx
console.log(-1 || "xx") 		//-1
console.log("" || "xx") 		//xx

console.log(1 ?? "xx")			//1
console.log(0 ?? "xx") 			//0
console.log(null ?? "xx") 		//xx
console.log(undefined ?? "xx")  //xx
console.log(-1 ?? "xx") 		//-1
console.log("" ?? "xx") 		//''

3. Deconstruction assignment

// Get user information - res.data.data
res = {data:{data:'User information',message:'Tips'}}

// Previously get the property value in the object
res.data ={data:'User information'}

// ES6 provides deconstruction assignment syntax
{data:{data:data}}

example

var res = {data:{name:'User information',message:'Tips'}}
console.log(res.data)  // {name: 'user information', message: 'prompt'}
console.log(res.data.name)  // "User information"

console.log(res.data?.name)  // "User information"
console.log(res.data?.num)  // undefined          
console.log(res.data?.city ?? "Commodity City")  // "Commodity city"