js中“||”和“”的高级用法 js,与或运算符 || 妙用
网络上找到的一篇关于逻辑与和逻辑或的文章,详细记录一下。
http://www.jb51.net/article/21339.htm
例1:用于赋值
&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)
|| : 从左往右依次判断,当当前值为false则继续,为true则返回此值(是返回未转换为布尔值时的原值哦)
// => aaa var attr = true && 4 && "aaa";// => 0 var attr = true && 0 && "aaa";// => 100 var attr = 100 || 12;// => e var attr = "e" || "hahaha"// => hahaha var attr = "" || "hahaha"
例2 经过多次判断的赋值
/* x>=15时 => 4 x>=12时 => 3 x>=10时 => 2 x>=5时 => 1 x<5时 => 0 */ console.log((x>=15 && 4) || (x>=12 && 3) || (x>=10 && 2) || (x>=5 && 1) || 0);
例3 与对象形式的变量合体
/* x=15 时 => 4 x=12 时 => 3 x=10 时 => 2 x=5 时 => 1 其它 => 0 */ console.log( {'5':1,'10':2,'12':3,'15':4}[x] || 0 );
例4 用于执行语句
if(a >=5){alert("你好");} //可以写成: a >= 5 && alert("你好");
首先我们来梳理一下一个概念,请你一定要记住:在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||和&&就会出现问题。
这里顺便提下:经常有人问我,看到很多代码if(!!attr),为什么不直接写if(attr);
其实这是一种更严谨的写法:
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。
下面主要讨论下逻辑运算符&&和||。
几乎所有语言中||和&&都遵循“短路”原理,如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反。
js也遵循上述原则。但是比较有意思的是它们返回的值。
代码:var attr = true && 4 && “aaa”;
那么运行的结果attr就不是简单的true或这false,而是”aaa”
再来看看||:
代码:var attr = attr || “”;这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则:如果实参需要是0、""、null、false、undefined、NaN的时候也会当false来处理。
if(a >=5){
alert("你好");
}
可以写成:
a >= 5 && alert("你好");
这样只需一行代码就搞定。但是需要注意的一点就是:js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了。
一方面精简js代码,能实质性的减少网络流量,尤其是大量应用的js公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。
我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,尤其是像JQuery等js框里的代码,不理解这些你就很难看懂别人的代码。
像var Yahoo = Yahoo || {};这种是非常广泛应用的。
ok,最后让我们来看一段jQuery中的代码吧:
var wrap = // option or optgroup !tags.indexOf("<opt") && [ 1, "<select multiple='multiple'>", "</select>" ] || !tags.indexOf("<leg") && [ 1, "<fieldset>", "</fieldset>" ] || tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && [ 1, "<table>", "</table>" ] || !tags.indexOf("<tr") && [ 2, "<table><tbody>", "</tbody></table>" ] || // <thead> matched above (!tags.indexOf("<td") || !tags.indexOf("<th")) && [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || !tags.indexOf("<col") && [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || // IE can't serialize <link> and <script> tags normally !jQuery.support.htmlSerialize && [ 1, "div<div>", "</div>" ] || [ 0, "", "" ]; // Go to html and back, then peel off extra wrappers div.innerHTML = wrap[1] + elem + wrap[2]; // Move to the right depth while ( wrap[0]-- ) div = div.lastChild;
这段代码是作者用来处理 $(html) 时,有些标签必须要约束的,如<option>必须在<select></select>之内的。
可能你也发现了作者还有一个很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很简单的就实现了startWith的功能了,没有一点多余的代码。jquery源代码中还有很多如此精妙的代码,大家可以去学习学习。
转载于:https://www.cnblogs.com/nana33/p/10272670.html
js中“||”和“”的高级用法 js,与或运算符 || 妙用相关推荐
- js中“||”和“”的高级用法
例1:用于赋值 &&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦) || : 从左往右依次判断,当当前值为false则继续,为t ...
- html dom createevent,js 中 document.createEvent的用法
js 中 document.createEvent的用法 更新时间:2010年08月29日 23:22:02 作者: 用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象. ...
- js 中 document.createEvent的用法-转载
js 中 document.createEvent的用法 <a class="comment-mod" οnclick="alert('ss')" hre ...
- 详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
- Excel表格中替换的高级用法
Excel表格中替换的高级用法 目录 Excel表格中替换的高级用法 1.例如:将F列中合格替换为不合格 2. 在[开始]选项卡中,找到[替换]点击,在查找内容中输入[合格]替换为中输入[不合格],勾 ...
- aspect 方法入参 获取_谈谈Spring AOP中@Aspect的高级用法示例
前言 本文主要跟大家分享介绍了关于Spring AOP中@Aspect的高级用法,下面话不多说了,来随着小编一起看看详细的介绍吧. 1 切点复合运算 支持在切点定义中加入以下运算符进行复合运算: 运算 ...
- 前端开发:JS中截取字符串的用法总结
前言 在前端开发过程中,对JS相关的字符串处理可谓是家常便饭,对字符串对处理也是前端开发过程中使用频率非常高的知识点之一,对从后台获取到的字符串进行二次处理也是非常普遍的需求,那么本文就来分享一下在前 ...
- js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
- js中的escape的用法汇总
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
最新文章
- 定期删除各子文件下数据
- Xcode中添加代码块的方式
- Bzoj4561 [JLoi2016]圆的异或并
- kali用x-shell连接_良心国产工具,比Xshell好用还免费!
- UI设计师必知:link和@import引用css文件方法的区别
- IAR切BANK--程序中的使用
- 什么C++程序员,什么Java程序员
- win7设置html,Windows7怎么设置默认浏览器?
- 医生- 患者 - 图标
- informix——ODBC数据源配置
- 南宁研祥智谷远程预付费电能管理系统的应用
- Linux 内核 下载 编译 安装 2021 ubuntu
- java cms 源码_PublicCMS开源Java系统 v4.0.190312
- Photoshop CC 2021 软件安装教程
- Android实现60秒倒计时
- 高德纳(Donald Knuth)语录
- 解决OneNote同步失败的问题
- Android 去掉Power键屏保功能,但保留长按关机功能。
- 为什么画出的人物是平面,怎样才能画出有立体感的人物
- 如何做成gif动画图片?教你简单三步制作gif动图
热门文章
- HBase cell
- 【收藏】使用命令行创建maven web项目
- 【网址收藏】k8s zookeeper-operator示例
- loadrunner脚本运行时设置:Run Logic设置运行次数
- @RabbitListener组合注解消费消息
- Hadoop分布式文件系统hdfs的shell操作命令大全
- Spring data elasticsearch的使用
- 手机900e模式如何救_苹果手机如何将显示模式改为黑底白字?这个简单!只需4步...
- linux 串口工具_Zynq下linux系统搭建
- 记录 McAfee WebAdvisor 产生大量日志文件,卸载时一直转圈圈,成功卸载方式