• JS中? ?和??=和?.和 ||的区别


    undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的,否则将会报错

    1. let a;
    2. console.log(a?.name); //undefined
    3. console.log(a.name); //报错

     

    1. let obj = {};
    2. console.log(obj.name); //undefined
    3. console.log(obj?.name?.a); //undefined
    4. console.log(obj.name.a); //报错

    ?? 与 || 的区别

    相同点:
    ?? 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。
    A ?? B
    A || B

    不同点:
    判断的方法不同:
    使用 ?? 时,只有A为 null 或者 undefined 时才会返回 B;
    使用 || 时,A会先转化为布尔值判断,为true时返回A , false 返回B

    1. // ??
    2. console.log(undefined ?? 2); // 2
    3. console.log(null ?? 2); // 2
    4. console.log(0 ?? 2); // 0
    5. console.log("" ?? 2); // ''
    6. console.log(true ?? 2); // true
    7. console.log(false ?? 2); // false
    8. // ||
    9. console.log(undefined || 2); // 2
    10. console.log(null || 2); // 2
    11. console.log(0 || 2); // 2
    12. console.log("" || 2); // 2
    13. console.log(true || 2); // true
    14. console.log(false || 2); // 2

    空值合并操作符 ??

    只有当左侧为null 或者undefined 时,才会返回右侧的值

    可选链操作符 ?. 

    ?. 允许读取连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

    ?. 操作符的功能类似于. 链操作符,不同之处在于,在引用为空,即 null 或者 undefined 的情况下不会引起错误,该表达式短路返回值。 

    1. const obj = { a: { b: [{ name: "obj" }] } };
    2. // 原本的写法
    3. console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name); //obj
    4. // 可选链写法
    5. console.log(obj?.a?.b?.[0]?.name); // obj
    6. console.log(obj?.b?.c?.d); // undefined

    ?.可以和 ?? 运算符结合使用 

    1. const obj = { a: { name: "obj" } };
    2. console.log(obj?.a?.b ?? "hello world"); // hello world

    空值赋值运算符(??=)

    当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值 

    1. let a = "你好";
    2. let b = null;
    3. let c = undefined;
    4. let d = 0;
    5. let e = "";
    6. let f = true;
    7. let g = false;
    8. console.log((b ??= a)); // 你好
    9. console.log((c ??= a)); // 你好
    10. console.log((d ??= a)); // 0
    11. console.log((e ??= a)); // ''
    12. console.log((f ??= a)); // true
    13. console.log((g ??= a)); // false
    14. console.log(b); // 你好
    15. console.log(c); // 你好
    16. console.log(d); // 0
    17. console.log(e); // ''
    18. console.log(f); // true
    19. console.log(g); // false

  • 相关阅读:
    项目八 51单片机WIFI控制继电器
    C++ —— 二叉搜索树
    22.3 分布式
    Ubuntu Linux 23.10安装manimgl
    Web UI自动化测试框架
    k8s-16 statefulse控制器
    逻辑回归预测瘀血阻络证||LogRegression 二分类 python3
    云计算和大数据处理
    teamtalk实现即时通讯
    一万小时真的能成为专家吗?
  • 原文地址:https://blog.csdn.net/qq_40323256/article/details/126031188