js里很实用的操作符，你可能不知道 ?.和 ??

js里很实用的操作符，你可能不知道 ?.和 ??

空值合并操作符（ ?? ）

　　只有当左侧为null和undefined时，才会返回右侧的数

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

　　与逻辑或操作符（||）时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。

const foo = null ?? '默认值1';
console.log(foo); // "默认值1"

var num = 0 ?? 42;
console.log(num); // 0  (左侧不是null和undefined)

const nullValue = null;
const valA = nullValue ?? "valA 的默认值"; // (左侧为null 选右侧的值)
console.log(valA); // "valA 的默认值";

const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false;
const valB = emptyText ?? "valB 的默认值" ; 
console.log(valB); // "" ; （空字符串虽然是假值，但不是 null 或者 undefined）

const Numbers = 42;
const valC = Numbers ?? 0; // (Numbers不是null和undefined)
console.log(valC); // 42

可选链操作符( ?. )

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

var obj = {
    vals:{
         name:"张三"
    }
}
 
console.log(obj.vals.name) // 张三

console.log(obj?.value?.name) // 使用链式操作：undefined
console.log(obj.value.name) // 报错： VM262:1 Uncaught TypeError: Cannot read properties of undefined (reading 'name')

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

let customer = {
  name: "Carl",
  details: { age: 123 }
};

let customerCity = customer?.nums ?? "早上好";
console.log(customerCity);  // "早上好"