js中 ?? 和 ?.的涵义及用法

1，?? —— 空值合并运算符

逻辑操作符，当左侧的操作数为null 或者undefined 时，返回其右侧操作数，否则返回左侧操作数。
与逻辑或操作符 || 不同，逻辑或操作符会在左侧为假值时返回右侧操作数。也就是说如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如假值（‘ ’ 或0）时。见下面的例子

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

空值合并运算符例子如下

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

const valA = val?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = valNumber?? 0;

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

注意！！！ —— ?? 不可在template里面写 可以在js中写！！！

2, ?. —— 可选链操作符

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空null或undefined的情况下不会引起错误，该表达式短路返回值undefined。与函数调用一起使用时，如果给定的函数不存在，则会返回undefined。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短更简明。在探索一个对象的内容时，如果不能确认哪些属性必定存在，可选链操作符也是很有帮助的。

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

简单来说就是用来判断值有没有 ，请求接口后赋值就可以

结合用法如下

var tableData
tableData.list = res ?. list ?? []
tableData.total = res ?. total ?? 0
ps(res是接口返回数据)