在对于流程控制语句当中,我们最熟悉不过的就是

 if (条件){
   //代码块
 }else{
   //代码块
 }

对于一个执行不同的代码来说,如果执行的代码很多,可能就有必要使用上面这种方式

但往往我们开发当中,也会碰到一些赋值操作,如果使用上面方式,未免显得太过冗余。

举个例子:

var num1 = 10;
var num2 = 20;

// 假如 num2 > num1 就 alert( num2 ) 否则 alert( num1 )
// 可能见到的写法会有以下方式
if( num2 > num1 ){
alert( num2 );
}else{
  alert( num1 );
}

可以看见以上方式,只是输出一个结果,却用了五行代码来去实现。

接下来,我们见证下怎么使用一行代码去替代上面五行代码实现的结果

var num1 = 10;
var num2 = 20;
// 第一种方式 也可以使用 三目运算符 alert( num2 > mum1 ? num2 : num1 );
//第二种方式 就是使用 && ,|| alert( num2 > num1 && num2 || num1 );

使用 &&,|| 比三目运算的优势在于,它可以判断多个条件,也可以单独使用

举个 && 例子:

var num1 = 10;
var num2 = 5;

// 假如 num1,num2 都大于10 则输出 num1+num2;
   var result = num1>10 && num2 >10 && num1+ num2 || 0;
       alert(result);

我们开发知道,在开发当中,读取后端返回的数据可能因某种原因而未读取到,那么接收的数据如果是对象,都会在接收该字段的时候额外加上没有获取到时的字段

举个 || 例子:

var  reuslt = res && res.data || [];
      if ( result.length ) return;

使用这种方式,可以通过条件判断是否使用该变量,假如是对象,如果没有获取到,而使用该对象属性,则会报错。

而避免这种模式,就是在使用的时候,一定要判断,判断,判断

JS 巧用 && 与 ||的更多相关文章

  1. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

  2. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  3. 巧用JS内置对象Function

    在做练习的时候也好,做项目的时候也好,我经常会碰到想要的到一个字符串“”里面的东西的这样的需求. 注意,“”里面的东西可以是任何东西[],number等等 于是有了个大神教我一个绝招: 于是世界圆满了 ...

  4. 巧用开发者工具的控制台来调试页面中的js语句

    因为要弄某网页的一个自动登陆工具,所以需要对此网页中的元素利用js进行选取和操作,复杂的js选取如果直接在头脑中想很容易出错,而且一旦出错也不好判断错误原因. 而浏览器带的开发者工具的控制台功能,就给 ...

  5. Post请求data参数构造及巧用js脚本显示爬虫进度

    小爬最近随着对python中字符串.json等理解进一步加深,发现先前我随笔中提到的data构造和传参方法略复杂,原本有更简单的方法,Mark如下. 先前小爬我使用的requests.post请求中d ...

  6. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  7. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  8. 巧用JS中的join方法操作字符串

    1.将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 /** *把数组转换成特定符号分割的字符串 */ function arrayToString(arr,s ...

  9. 巧用函数实现js插入css样式

    我用的是webstorm,当写css 样式时候,会没有提示,可以按Ctrl+Alt+Space.

随机推荐

  1. 201521123107 《Java程序设计》第1周学习总结

    第1周学习总结 1.本周学习总结 本周我们正式开始了对一门新的编程语言java的学习.本周的主要内容是初步了解了java的发展过程,java具有简约且简单 .平台无关性等优点.java的3个关键的工具 ...

  2. 201521123071 《JAVA程序设计》第九周学习总结

    第九周-异常 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 此处仅部分知识点归纳 2. 书面作业 1. 常用异常,题目5-1 1.1 截图你的提交结果(出现学号) ...

  3. 201521123003《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  4. Java多线程高并发学习笔记(二)——深入理解ReentrantLock与Condition

    锁的概念 从jdk发行1.5版本之后,在原来synchronize的基础上,增加了重入锁ReentrantLock. 本文就不介绍synchronize了,有兴趣的同学可以去了解一下,本文重点介绍Re ...

  5. 通过SDK和API获取阿里云RDS的监控数据

    阿里云的RDS自带的监控系统获取数据不怎么直观,想要通过API获取数据通过zabbix显示,因为网上资料缺乏和其他一些原因,获取API签名很困难,但使用阿里云的SDK可以完美避开获取签名的步骤. 阿里 ...

  6. Spring-Struts2-基本集成

    步骤: 1,导入struts2的相关jar包(检查是否有冲突的包,即同一个包有不同的几个版本存在) 2,导入struts2和spring的整合包 struts2-spring-plugin-2.3.4 ...

  7. Hibernate中的主键生成器generator

    本文讲述Hibernate的generator属性的意义.Generator属性有7种class,本文简略描述了这7种class的意义和用法. [xhtml] view plaincopy <c ...

  8. eclipse安装java ee插件方法步骤

    1.本人以前使用的MyEclipse进行Javaweb开发,但是后来由于myeclipse实在太臃肿,经常在运行的过程中不流畅 (可能电脑内存也不是太高吧)   !所以坚决换用eclipse,但是问题 ...

  9. SpringMVC Restful api接口实现

    [前言] 面向资源的 Restful 风格的 api 接口本着简洁,资源,便于扩展,便于理解等等各项优势,在如今的系统服务中越来越受欢迎. .net平台有WebAPi项目是专门用来实现Restful ...

  10. MySQL_日期函数汇总

              如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!         关于MySQL日期时间函数,每回总 ...