js中短路运算符 || &&

见过好多插件都这么用,感觉高大上。。。

|| 与 &&
说到底也没啥,稍微懂点程序的,或者是搞过相关硬件编程的都会用到这玩意,就算是数学,中学你可能都用到过。

是不是不信?

&& 和 || 运算符使用短路逻辑(short-circuit logic),是否会执行第二个语句(操作数)取决于第一个操作数的结果。在需要访问某个对象的属性时,使用这个特性可以事先检测该对象是否为空:

var name = o && o.getName();
或运算可以用来设置默认值:

var name = otherName || “default”;
类似地,JavaScript 也有一个用于条件表达式的三元操作符:

var allowed = (age > 18) ? “yes” : “no”;

对于&&,在 (表达式1)&&(表达式2),只有在表达式1表达式2都成立时才为true,那么就有:表达式1为false时表达式,就不用看了肯定有:(表达式1)&&(表达式2)=false;



对于||,在 value= (表达式1)||(表达式2),只有在 表达式1表达式2都成立时才为true,那么就有:
表达式1为false时表达式,value=表达式2的布尔值,
表达式1为true时表达式,value=true,根本就不用看表达式2了


so—-短路大名 诞生

&&:

表达式1表达式2结果(value)
false*false
truefalsefalse
truetruetrue

||:

表达式1表达式2结果(value)
true*true
falsefalsefalse
falsetruetrue



用到js里就变成拿值(对象)了,常见如下:

var name = otherName || “default”;


在 JavaScript 中, true && expression 总是会评估为 expression ,而 false &&
expression 总是执行为 false 。

因此,如果条件为 true ,则 && 后面的元素将显示在输出中。 如果是 false,React 将会忽略并跳过它。 ——-见React官网

JavaScript 中,逻辑与(`&&`)和逻辑或(`||`)运算符不仅用于布尔值之间的逻辑判断,还常被用来处理非布尔类型的操作数,并返回操作数本身而非单纯的 `true` 或 `false`。这种行为使得它们在实际开发中具有广泛的应用场景。 ### 逻辑与 (`&&`) 的行为 逻辑与运算符从左到右依次评估操作数,如果某个操作数的值为“假值”(falsy),则立即返回该操作数;否则继续评估后续操作数,直到找到一个假值或返回最后一个操作数。 常见的假值包括:`false`、`0`、`""`(空字符串)、`null`、`undefined` 和 `NaN`。 例如: ```javascript console.log(0 && "hello"); // 输出: 0 (因为 0 是假值) console.log("world" && 42); // 输出: 42 (两个都是真值,返回最后一个) ``` 这种行为可以用于安全访问对象属性,避免因访问 `undefined` 的属性而引发错误: ```javascript const user = { name: "Alice" }; const userName = user && user.name; // 如果 user 存在,则返回 name 属性 console.log(userName); // 输出: Alice ``` ### 逻辑或 (`||`) 的行为 逻辑或运算符从左到右依次评估操作数,一旦遇到“真值”,就返回该操作数;如果所有操作数都是假值,则返回最后一个操作数。 例如: ```javascript console.log(null || "default"); // 输出: "default" console.log("value" || "fallback"); // 输出: "value" ``` 这种特性常用于设置默认值: ```javascript function greet(name) { const actualName = name || "Guest"; console.log(`Hello, ${actualName}`); } greet(); // 输出: Hello, Guest greet("Bob"); // 输出: Hello, Bob ``` ### 短路求值机制 这两个运算符都支持**短路求值**(short-circuit evaluation): - 对于 `&&`,如果第一个操作数是假值,则不会继续计算后面的表达式。 - 对于 `||`,如果第一个操作数是真值,则不会继续计算后面的表达式。 这种机制有助于提高性能并防止不必要的副作用。 例如,在以下代码中,`fetchData()` 只有在 `shouldFetch` 为真时才会执行: ```javascript const shouldFetch = true; shouldFetch && fetchData(); // 如果 shouldFetch 为 true,则调用 fetchData() function fetchData() { console.log("Fetching data..."); } ``` ### 结合使用 `&&` 和 `||` 当 `&&` 和 `||` 在同一表达式中使用时,需要注意它们的优先级和结合顺序。通常建议使用括号明确逻辑结构,以避免歧义。 示例: ```javascript let a = 1, b = 2, c = 3; let result = a++ && b-- || c++; console.log(result); // 输出: 2 console.log(a, b, c); // 输出: 2 1 3 ``` 在此例中,`a++ && b--` 返回 `b--` 的值(即 `2`),由于它是真值,因此 `||` 后的部分未被执行,`c++` 不会增加。 另一个例子: ```javascript let x = 0 || null && undefined; console.log(x); // 输出: undefined ``` 这里由于 `&&` 的优先级高于 `||`,所以先执行 `null && undefined`,结果为 `undefined`,再与 `0` 进行 `||` 运算,最终结果仍为 `undefined`。 ### 总结 JavaScript 中的 `&&` 和 `||` 并不总是返回布尔值,而是返回参与运算的实际操作数。这种设计允许开发者进行简洁的条件赋值、默认值设定以及安全的对象属性访问等操作。理解其返回值机制和短路行为对于编写高效且健壮的前端代码至关重要[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值