??和?.的意思

 ?.可选链操作符

描述: 可选链操作符(?.)允许读取位于连接对象深处的属性的值,而不必明确验证链中的每个引用是否有效。?.操作符的作用类似于., 不同之处在于,在引用空的情况下不会引起报错,该表达式短路返回值.

示例:

null?.name   //undefined
null.name     //报错

undefined?.name   //undefined
undefined.name     //报错


const person = {
  name:'cc',
  prop:{
     age:18
  }
}
person?.name?.height?.age?.gender    //undefined


let arr = [1,2,[3,4]]
arr?.[1]   //2
arr?.[2]?.[1]   //3
arr?.[10]    //undefined

?? 空值合并操作符

??是一个逻辑操作符,只有当左侧的值为 null 或者  undefined  的时候,才会返回右侧的数,否则返回左侧的操作数.

注意:与短路操作符 || 的区别在于. || 会在左侧操作数为假时返回右侧操作符.(  '' , 0等情况为假,返回右侧操作数)

示例:

console.log(null ?? 'default')     //default
console.log(undefined ?? 'default')     //default
console.log(0 ?? 'default')     //0
console.log('' ?? 'default')    // ''

console.log(null || 'default')     //default
console.log(undefined || 'default')     //default
console.log(0 || 'default')     //default
console.log('' || 'default')    // default

题:输出什么?

function getFruit(fruits) {
 console.log(fruits?.[1]?.[1])
}

getFruit([['🍊', '🍌'], ['🍍']])
getFruit()
getFruit([['🍍'], ['🍊', '🍌']])

• A: null, undefined, 🍌

• B: [], null, 🍌

• C: [], [], 🍌

• D: undefined, undefined, 🍌

  答案: D