javascript中&&运算符与||运算符的使用方法实例
目录
- 前言
- &&运算符
- ||运算符
- ||运算符的小demo
- 本章目标
- 案例实践(通过加载json渲染数据)
- 结尾
- 总结
前言
在前端开发领域中，&&运算符和||运算符是使用率和频繁度比较高的。
&&运算符和||运算符的功能特别强大，想成为一名优秀的前端工程师，&&运算符和||运算符是必不可少的。
但是很多前端工程师(刚入门的小白【包括小编本身】)对于&&运算符和||运算符的使用率极为低下。
之前在学校开发一些项目的时候根本就没有用到过，因为我们已经被传统概念束缚了。我们对于&&运算符和||运算符的理解是这样的。
&&运算符
- &&运算符左边的结果和右边的结果同时为真时，结果真。
- &&运算符左边的结果和右边的结果同时为假时，结果为假。
- &&运算符左边的结果和右边的结果有一个为假时，结果为假。
总结：同真为真，否则为假
||运算符
- ||运算符左边的结果和右边的结果同时为真，结果为真。
- ||运算符左边的结果和右边的结果有一个为假时，结果为真。
- ||运算符左边的结果和右边的结果同时为假时，结果为假。
总结：同假为假，否则为真
但是实际上真的是这样吗?我们看下关于&&运算符的小demo
<!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..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中&&运算符与||运算符使用的文章就介绍到这了,更多相关JS中&&运算符与||运算符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Javascript 按位与运算符 (&)使用介绍
复制代码 代码如下: result = [整数1] & [整数1] & 对两个 32 位表达式的每一个位执行按位"与"运算. 如果两个位均为 1,则结果是 1. 否则,结果为 0. 位1 位2 位与 0 0 0 1 1 1 0 1 0 1 0 0下面的示例演示如何使用 & 位与运算符和 &= 按位与赋值运算符: 复制代码 代码如下: // 9 二进制是 1001,补足32位为 00000000000000000000000000001001 var ex
-
利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页
在JScript的众多运算符里,提供了三个逻辑运算符&&.||和!,噢?! 是高级语言都提供的.按我们对逻辑运算的正常认识,逻辑运算的结果因该是ture或者false.但是JScript的逻辑运算却不完全是这么定义的,这里只有!运算符总是返回true|false,而||和&&运算比较的好玩. JScript对于逻辑运算的true|false是这么定义的: 所有对象都被认为是 true. 字符串当且仅当为空(""或'')时才被认为是 false. null
-
Javascript 按位与赋值运算符 (&=)使用介绍
Javascript 按位与赋值运算符 (&=),对变量值与表达式值设置按位"与"运算的结果. 变量和表达式均被视为 32 位二进制值,而一般表达式里面都是十进制整数,此时需要先转换成对应的二进制,然后向前加0,补足32位. 复制代码 代码如下: result &= [整数2]等价于result = result & [整数2] & 对两个 32 位表达式的每一个位执行按位"与"运算. 如果两个位均为 1,则结果是 1. 否则,结果为
-
js 与或运算符 || && 妙用
首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step
-
运算符&&的三个不同层次
运算符可以从三个不同的层次进行理解. 第一层理解 当操作数都是布尔值时,"&&"对两个值执行布尔与(AND)操作. 复制代码 代码如下: x==0 && y==0 // 只有当x和y都是0时,才返回true 关系运算符的优先级比"&&"要高. 第二层理解 "&&"可以对真值和假值进行布尔与(AND)操作.(假值有false.null.undefined.0.NaN和"&qu
-
JavaScript中使用Spread运算符的八种方法总结
Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如
-
javascript 中模板方法单例的实现方法
javascript 中模板方法单例的实现方法 模板方法单例 模板方法的定义:父类中定义一组操作算法骨架,将一些实现步骤延伸到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 代码块 html部分,例如: <div id="content"></div> js部分,例如: //格式化字符串方法 function fromateString(str, data) { return str.replace(/\{#(\w+)#\}/g,
-
详解JavaScript中的4种类型识别方法
具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console
-
JavaScript 中Date对象的格式化代码方法汇总
JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面说说我总结的JavaScript时间格式化方法. 很多时候,我们可以利用JavaScript中Date对象的内置方法来格式化,如: var d = new Date(); console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间) console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013
-
javascript中函数作为参数调用的方法
本文实例讲述了javascript中函数作为参数调用的方法.分享给大家供大家参考.具体分析如下: 先来看示例: function Map(){ var obj = {}; this.put = function(key, value){ obj[key] = value; } this.eachMap = function(fn){ for(var attr in obj){ fn(attr, obj[attr]); } } } var m = new Map(); m.put('01', 'a
-
JavaScript中windows.open()、windows.close()方法详解
windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记
-
javascript中的后退和刷新实现方法
<input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.Go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button
-
Javascript中document.referrer隐藏来源的方法
前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包
-
基于JavaScript中字符串的match与replace方法(详解)
1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace方法的返回值为:一个新的字符串. 3.说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换. 示例代码: <!DOCTYPE html> <html lang
-
JavaScript中async,await的使用和方法
JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符