JavaScript中&&与||运算符的短路机制与返回值详解
本文深入解析JavaScript中&&与||运算符的实际行为，指出其并非仅返回布尔值，而是遵循短路逻辑返回操作数本身。通过代码示例展示&&在首个表达式为假时直接返回，否则返回第二个表达式；||则在首个表达式为真时直接返回，否则返回第二个表达式。文章还列举了null、NaN、undefined及对象类型的处理规则，帮助开发者简化条件判断代码。
前言
在前端开发实践中，&&和||运算符的应用频率极高。
掌握这两个运算符的功能对于提升代码质量至关重要，它们是前端开发中不可或缺的基础知识。
然而，许多初级前端开发者（包括作者本人早期）对这两个运算符的使用频率极低。
在学校进行项目开发时，我们往往受传统概念束缚，未能充分利用这些运算符。
&&运算符
- 传统理解中，&&运算符要求左右两边结果同时为真，整体才为真。
- 若左右两边结果同时为假，则整体结果为假。
- 若左右两边结果中有一个为假，则整体结果为假。
总结：同真为真，否则为假。
||运算符
- 传统理解中，||运算符要求左右两边结果同时为真，整体才为真。
- 若左右两边结果中有一个为假，则整体结果为真。
- 若左右两边结果同时为假，则整体结果为假。
总结：同假为假，否则为真。
但实际情况是否如此？我们通过&&运算符的小示例来验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let result=1&&2;
console.log(result);
</script>
</body>
</html>
你期望的结果是否为 true？起初我也持此观点，但经实践验证并非如此。此处略作推荐：同行可在腾讯课堂或 Bilibili 搜索“渡一教育”，其师资优秀，值得尝试。言归正传，实际返回结果为 2。
||运算符的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var result=1||0
console.log(result);
</script>
</body>
</html>
结果：
结果出乎意料，两次返回值均非true或false。接下来直接切入核心内容。
本章目标
- 掌握&&运算符和||运算符的使用方法。
- 通过案例加深对这两个运算符的理解。
案例实践：通过加载json渲染数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<stle type="text/css">
#myTab{
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="myTab">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
</tr>
</table>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//0代表待支付，1代表已支付，2代表已收货，3代表其它
var orderArray=[
{
id:10001,
name:'小米9',
price:1999,
status:0,
},
{
id:10002,
name:'huaweiPro',
price:2999,
status:1,
},
{
id:10003,
name:'小米8',
price:999,
status:2,
},
{
id:10004,
name:'荣耀8X',
price:1399,
status:3,
}
];
$("#myTab tr:not(:eq(0))").remove();
for(var i=0;i<orderArray.length;i++){
var tr=$("<tr/>");
var td1=$("<td/>");
var td2=$("<td/>");
var td3=$("<td/>");
var td4=$("<td/>")
td1.html(orderArray[i].id);
td2.html(orderArray[i].name);
td3.html(orderArray[i].price);
if(orderArray[i].status==0){
td4.html("待支付")
}else if(orderArray[i].status==1){
td4.html("已支付")
}else if(orderArray[i].status==2){
td4.html("已收货");
}else if(orderArray[i].status==3){
td4.html("其它")
}
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#myTab").append(tr);
}
</script>
</body>
</html>
效果图如下：
这是未使用&&和||运算符时的结果，接下来我们将使用这两个运算符简化if...else语句。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myTab{
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="myTab">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
</tr>
</table>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//0代表待支付，1代表已支付，2代表已收货，3代表其它
var orderArray=[
{
id:10001,
name:'小米9',
price:1999,
status:0,
},
{
id:10002,
name:'huaweiPro',
price:2999,
status:1,
},
{
id:10003,
name:'小米8',
price:999,
status:2,
},
{
id:10004,
name:'荣耀8X',
price:1399,
status:3,
}
];
$("#myTab tr:not(:eq(0))").remove();
for(var i=0;i<orderArray.length;i++){
var tr=$("<tr/>");
var td1=$("<td/>");
var td2=$("<td/>");
var td3=$("<td/>");
var td4=$("<td/>")
td1.html(orderArray[i].id);
td2.html(orderArray[i].name);
td3.html(orderArray[i].price);
var status=orderArray[i].status== 0 && "待支付" ||orderArray[i].status== 1 && "已支付" ||orderArray[i].status== 2 && "已收货" ||orderArray[i].status== 3 && "其它"
td4.html(status);
// if(orderArray[i].status==0){
// td4.html("待支付")
// }else if(orderArray[i].status==1){
// td4.html("已支付")
// }else if(orderArray[i].status==2){
// td4.html("已收货");
// }else{
// td4.html("其它")
// }
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#myTab").append(tr);
}
</script>
</body>
</html>
通过一句代码替代了冗长的if...else...if...else逻辑，使代码更加简洁。&&和||运算符的功能远不止于此，熟练掌握它们能显著提升开发效率。
结尾
&&运算符
- 首先评估第一个表达式转换为布尔值的结果，若为真，则继续评估第二个表达式；若只有两个表达式，最终返回第二个表达式的值。
- 当第一个表达式的值为false时，直接返回第一个表达式的值，不再评估后续表达式。
- 如果第一个操作数是对象，则返回第二个操作数。
- 如果两个操作数都是对象，则返回第二个操作数。
- 如果第二个操作数是对象，则仅在第一个操作数求值结果为true时，返回该对象。
- 如果一个操作数为null，则返回null。
- 如果第一个操作数是NaN，则返回NaN。
- 如果第一个操作数是undefined，则返回undefined。
||运算符
- 首先评估第一个表达式转换为布尔值的结果，若为假，则继续评估第二个表达式；若只有两个表达式，最终返回第二个表达式的值。
- 当第一个表达式的值为false时，直接返回第二个表达式的值，不再评估后续表达式。
- 如果第一个操作数是对象，则返回第一个操作数。
- 如果第一个操作数的求值结果为false，则返回第二个操作数。
- 如果两个操作数都是对象，则返回第一个操作数。
- 如果两个操作数都是null，则返回null。
- 如果两个操作数都是NaN，则返回NaN。
- 如果两个操作数都是undefined，则返回undefined。
被认定为false的值包括：false, "", NaN, null, undefined。
总结
到此关于JavaScript中&&与||运算符使用的介绍结束，更多相关内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19