js中“??“和“?.“用法小结

js中“??“和“?.“怎么用

？？：空值合并操作符

逻辑操作符，左侧为null和undefined时，才返回右侧的数

const sum = null ?? 12
console.log(sum);
//输出12

const sum1 = 12 ?? 23
console.log(sum1);
//输出12

const sum2 = undefined ?? 12
console.log(sum2);
//输出12

?. :可选链操作符

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

const fa = {
      name: 'lming',
      son: {
        name: 'lqq'
      }
    };
const duc = fa.duc?.name;
console.log(duc);
//输出undefined

使用：

1.获取一个对象更深层次的属性，即obj中的first属性下的second属性。

为了避免报错， 获取之前要判断first属性是否为null或者undefined，在获取second属性
使用“与”运算符

let num = obj.first && obj.first.second;

使用?.可选链操作符

let num = obj.first?.second;

可选链与函数调用

调用一个可能不存在的方法时，如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常

let result = someInterface.customMethod?.();

注：如果存在一个属性名且不是函数, 使用 ?. 仍然会产生一个 TypeError 异常 (x.y is not a function).

使用空值合并操作符

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

短路计算

let a = null;
let x = 0;
let prop = a?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0

js中?.、??的具体用法

1、?. （可选链运算符）

在javascript中如果一个值为null、undefined，直接访问下面的属性，
会报 `Uncaught TypeError: Cannot read properties of undefined` 异常错误。

而在真实的项目中是会出现这种情况，有这个值就读这个值，没有这个值也不会报错。

可能有的小伙伴会说用三目运算符、或者if判断，但是这种也是可以的，但是在特定情况下会很复杂（如obj.data.person.name)

而?.则完美解决这个问题（obj?.name?.person?.name）。

 ?. 可以无限链下去，不论有多少属性，只要有最后可以访问到属性，就会直接赋值最后的属性值。否则当任何一个链出现问题，立刻停止，而后赋值undefined。

2、??（空值合并运算符)

?? 双问号后面是默认值（可常量、可变量）。

在 ?? 前面没有值得时候会默认 ?? 后边的值（类似于三木运算符中的:后面赋值）。

和 || 运算符的区别：

|| 只会在左边的值为假值时返回右边的值 (0, ‘’, undefined, null, false 等都为假值)

?? 是在左边的值为undefined或者null时才会返回右边的值

 总结：??是判断有没有值，|| 是判断真假。

到此这篇关于js中“??“和“?.“怎么用？的文章就介绍到这了,更多相关js ?? 和?内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论