javascript 中 逻辑与 和 空值合并运算符 和 逻辑或 的区别

目录

概述

阅前一览

||

 返回值

 常见判断

??

 返回值

常见判断

&&

 返回值

优先级

总结

---

标题不让加符号..........

概述

|| 、 ??、&& 运算符 一般都用在条件判断中, 他们可以用在判断条件也可以是一个单独的语句, 返回值也依据具体操作数

阅前一览

    const fn = (data) => console.log(data);
    "" || fn(1);
    "2" && fn(2);
    null ?? fn(3);

 

 可以看到三者都可用作单独的语句, 依据自己的判断特性来执行代码 

||

|| 逻辑或运算符, 如果左侧操作数为真(此真代表Boolean()之后为true), 那么逻辑中断, 返回左侧操作数. 反之, 执行右侧操作数, 返回其执行完毕的值 , 如果两者都为假, 执行右侧返回右侧

Logical OR (||) - JavaScript | MDNThe logical OR (||) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true. It is typically used with Boolean (logical) values. When it is, it returns a Boolean value. However, the || operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_OR

 返回值

    const fn = (s) => s;
    const r1 = "1" || fn(3);
    r1 === "1" ? console.log("左侧为真值直接返回") : console.log("左侧为假值返回右侧");
    const r2 = "" || fn(2);
    r2 === "" ? console.log("左侧为真值直接返回") : console.log("左侧为假值返回右侧");
    const r3 = 0 || false
    console.log('两者都为假返回右侧');
    console.log(r1, r2, r3);

|| 的返回值遵循: 左假返右 

 常见判断

    console.log(1 || 3); // 1
    console.log(0 || 3); // 3
    console.log("" || "string"); // string
    console.log("hello" || "world"); // hello
    console.log(true || false);// true
    console.log(false || true);// true
    console.log(NaN || false);// false
    console.log(undefined || null);// null

??

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

 返回值

    const r1 = "" ?? "a"
    const r2 = null ?? "b"
    const r3 = undefined ?? "c"
    console.log(r1);
    console.log(r2);
    console.log(r3);

??的返回值遵循: 左null undefined 返右, 否则返左 

常见判断

    console.log(0 ?? 1); // 0
    console.log(undefined ?? "a");// a
    console.log(null ?? true);// true
    console.log(false ?? "12");// false
    console.log(true ?? false);// true
    console.log(NaN ?? 21);// NaN
    console.log("abc" ?? true);// abc

在记忆??时, 左为null, undefined就是假, 其他的都是真 

 

&&

&& 是一个逻辑与操作符，在进行真假判断时两者为真则为真, 一方为假则为假

 返回值

    const a = 0 && 123;
    const b = "adad" && 0;
    const c = false && true;
    const d = 1 && "a";
    const e = 1 > 0 && 2 < 8;
    console.log(a, b, c, d, e);

 

 && 的返回值也是遵循: 左假返左, 左真返右

优先级

Operator precedence - JavaScript | MDNOperator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

&& > || = ??    || 和 ?? 优先级一样高, &&略高于他俩

验证一下

    console.log((null ?? 2) || 3 && 4); 

1. 先执行 3 && 4 结果为4
2. 再执行null ?? 2 结果为2
3. 最后执行 2 || 4 结果为 2

总结

 说了这么多, 其实就是认识一下 ??

• ?? 操作符, 左侧为null undefined 执行返回右侧操作数, 否则返回左侧操作数
• ?? || && 操作符都有返回值
• 优先级: && > || = ??