网络上找到的一篇关于逻辑与和逻辑或的文章,详细记录一下。

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,与或运算符 || 妙用相关推荐

  1. js中“||”和“”的高级用法

    例1:用于赋值 &&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦) || : 从左往右依次判断,当当前值为false则继续,为t ...

  2. html dom createevent,js 中 document.createEvent的用法

    js 中 document.createEvent的用法 更新时间:2010年08月29日 23:22:02   作者: 用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象. ...

  3. js 中 document.createEvent的用法-转载

    js 中 document.createEvent的用法 <a class="comment-mod" οnclick="alert('ss')" hre ...

  4. 详解Vue中watch的高级用法

    转载自  详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...

  5. Excel表格中替换的高级用法

    Excel表格中替换的高级用法 目录 Excel表格中替换的高级用法 1.例如:将F列中合格替换为不合格 2. 在[开始]选项卡中,找到[替换]点击,在查找内容中输入[合格]替换为中输入[不合格],勾 ...

  6. aspect 方法入参 获取_谈谈Spring AOP中@Aspect的高级用法示例

    前言 本文主要跟大家分享介绍了关于Spring AOP中@Aspect的高级用法,下面话不多说了,来随着小编一起看看详细的介绍吧. 1 切点复合运算 支持在切点定义中加入以下运算符进行复合运算: 运算 ...

  7. 前端开发:JS中截取字符串的用法总结

    前言 在前端开发过程中,对JS相关的字符串处理可谓是家常便饭,对字符串对处理也是前端开发过程中使用频率非常高的知识点之一,对从后台获取到的字符串进行二次处理也是非常普遍的需求,那么本文就来分享一下在前 ...

  8. js中的extend的用法及其JS中substring与substr的区别

    1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...

  9. js中的escape的用法汇总

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

最新文章

  1. 定期删除各子文件下数据
  2. Xcode中添加代码块的方式
  3. Bzoj4561 [JLoi2016]圆的异或并
  4. kali用x-shell连接_良心国产工具,比Xshell好用还免费!
  5. UI设计师必知:link和@import引用css文件方法的区别
  6. IAR切BANK--程序中的使用
  7. 什么C++程序员,什么Java程序员
  8. win7设置html,Windows7怎么设置默认浏览器?
  9. 医生- 患者 - 图标
  10. informix——ODBC数据源配置
  11. 南宁研祥智谷远程预付费电能管理系统的应用
  12. Linux 内核 下载 编译 安装 2021 ubuntu
  13. java cms 源码_PublicCMS开源Java系统 v4.0.190312
  14. Photoshop CC 2021 软件安装教程
  15. Android实现60秒倒计时
  16. 高德纳(Donald Knuth)语录
  17. 解决OneNote同步失败的问题
  18. Android 去掉Power键屏保功能,但保留长按关机功能。
  19. 为什么画出的人物是平面,怎样才能画出有立体感的人物
  20. 如何做成gif动画图片?教你简单三步制作gif动图

热门文章

  1. HBase cell
  2. 【收藏】使用命令行创建maven web项目
  3. 【网址收藏】k8s zookeeper-operator示例
  4. loadrunner脚本运行时设置:Run Logic设置运行次数
  5. @RabbitListener组合注解消费消息
  6. Hadoop分布式文件系统hdfs的shell操作命令大全
  7. Spring data elasticsearch的使用
  8. 手机900e模式如何救_苹果手机如何将显示模式改为黑底白字?这个简单!只需4步...
  9. linux 串口工具_Zynq下linux系统搭建
  10. 记录 McAfee WebAdvisor 产生大量日志文件,卸载时一直转圈圈,成功卸载方式