js中 问号点 (?.)-可选链操作符 和 双问号 (??) -空值合并运算符的用法 & 解构赋值：{data：{name:‘名称‘}}

js中 问号点 (?.)-可选链操作符 和 双问号 (??) -空值合并运算符的用法 & 解构赋值：{data：{name:‘名称’}}

1、问号点 （?.）-可选链操作符

可选链操作符( ?. ) 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空 (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

var a = null;
console.log(a)  // null
console.log(a.b)  // 报错
console.log(a?.b)  // undefined

有点像我们经常用的A&&A.name 其实功能基本是相似的 只不过简化了写法

实例1

let nestedProp = obj.first && obj.first.second;
// 等价于
let nestedProp = obj.first?.second;

解读-可选链操作符

js会在尝试访问obj.first.second之前隐式的检查并确定obj.first既不是null也不是undefined。如果obj.first是null或者undefined,表达式将会短路计算直接返回undefined。

实例2

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

等价于

let res = obj?.data?.list
//  等价于
let res = obj && obj.data && obj.data.list

空值合并操作符,可以在使用可选链时设置一个默认值

let customer = {
     
  name: "Carl",
  details: {
      age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // "暗之城"
// 等价于
if (customer.city==null || customer.city==undefined ){
     
    let customerCity = "暗之城"
}else{
     
    let customerCity = customer.city   
}

判断这个对象（this.element）下的（businessObject）下的（value）下的（length）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值。

var obj ={
     }
console.log(obj?.a?.b ?? 233 ) //233
var obj={
     a:{
     b:1}}  // 等价于  res = {data:{data:'用户信息',message:'提示'}}
console.log(obj?.a?.b??233) //1

解读-解构赋值

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:'用户信息',message:'提示'}}
console.log(res.data)  // {data:'用户信息',message:'提示'}
console.log(res.data.data)  // "用户信息"

2、双问号 (??)-空值合并运算符

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与**逻辑或操作符（||）**不同的是，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。

也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，''、null、undefined 或 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、解构赋值

// 得到 用户 信息 —— res.data.data
res = {
     data:{
     data:'用户信息',message:'提示'}}

// 以前获取对象中的属性值
res.data ={
     data:'用户信息'}

// ES6提供解构赋值语法
{
     data:{
     data:data}}

实例

var res = {
     data:{
     name:'用户信息',message:'提示'}}
console.log(res.data)  // {name:'用户信息',message:'提示'}
console.log(res.data.name)  // "用户信息"

console.log(res.data?.name)  // "用户信息"
console.log(res.data?.num)  // undefined          
console.log(res.data?.city ?? "商品城市")  // "商品城市"