JavaScript代码里的判断小结


Posted in Javascript onAugust 22, 2016

比较判断

比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件。JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别

严格相等运算符===

判断            返回
两个值类型不同            false
两个值都是null/undefined/true/false true   
两个值其中之一为NaN         false
两个值都为数值且值相等         true
两个值都为字符串,且值相等       true
两个值都指向同一个引用类型       true

1 === "1" // false
true === true // true
undefined === undefined // true
null === null // true
1 === 1 // true
NaN === NaN // false
+0 === -0 // true
({} === {}) // false
[] === [] // false
(function (){} === function (){}) // false
var v1 = {};
var v2 = v1; //两个值引用同一个对象
v1 === v2 // true

严格相等运算符有一个对应的严格不相等运算符(!==),两者的运算结果正好相反

相等运算符==

if 相等运算符比较相同类型的数据时,同严格相等运算符
else if 相等运算符比较不同类型的数据时:
原始类型的数据会转换成数值类型,把字符串和布尔值都转为数值,再进行比较
null == undefined 返回true
一个是对象,另一个是数字或者字符串,把对象转成基本类型值再比较
else false

123 == 123; //true
'123' == 123; //true,'123'会转成成数值123
false == 0; //true,false 转成数值就是0
'a' == 'A'; //false,转换后的编码不一样
123 == {}; //false,执行toString()或valueOf()会改变
123 == NaN; //false,只要有NaN,都是false
{} == {}; //false,比较的是他们的地址,每个新创建对象的引用地址都不同

null == undefined //true
'NaN' == NaN //false
123 == NaN //false
NaN == NaN //false
false == 0 //true
true == 1 //true
true == 2 //false
undefined == 0 //false
null == 0 //false
'123' == 123 //true
'123' === 123 //false

相等运算符有一个对应的不相等运算符(!=),两者的运算结果正好相反

!!判断

!!相当于Boolean,写代码时用!!转化为Boolean类型做判断非常好用

!!'xzavier';  // true
!!'';     // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!0      // false
!!undefined  // false
!!null     // false
!!NaN     // false
!!{};     // true
!!{name:'xz'} // true
!![];     // true
!![1,2,3];   // true
!!true;    // true

!判断

取反运算符 ! 用于将布尔值变为相反值,即true变成false,false变成true。对于非布尔值的数据,取反运算符会自动将其转为布尔值。规则是,以下六个值取反后为true,其他值取反后都为false

undefined null false 0(包括+0和-0) NaN 空字符串('')

!undefined  // true
!null     // true
!false    // true
!0      // true
!NaN     // true
!""      // true  
!54      // false
!'hello'   // false
![]      // false
![1,2,3]   // false
!{}      // false
!{name:'xz'} // false

[]和{}判断

对于[]和{},我们在业务代码中肯定会对其做判断,如上

!!{};     // true
!!{name:'xz'} // true
!![];     // true
!![1,2,3];   // true

不能用!!和!做判断,对于数组,我们用它的length属性做判断

[].length    // 0 false
[1,2,3].length // 3 true

对象的话,可以采用jQuery的方法$.isEmptyObject(obj) ,也可以js封装一个方法,就模仿jQuery 写一个

function isEmptyObject(obj) {
  var name;
  for ( name in obj ) {
    return false;
  }
  return true;
}
isEmptyObject({}); //true
isEmptyObject({name: 'xzavier'}); false

推荐一个工具库underscore,它也有个方法isEmpty(object)

const _ = require('underscore');
_.isEmpty({}); // true

&&判断

用在条件表达式中,规则是:

num1 && num2
true  true  true
true  false  false
false  true  false
false  false  false

用在语句中,规则是 :

result = expression1 && expression2

如果expression1的计算结果为false,则result为expression1。否则result为expression2

(1 - 1) && ( x += 1) // 0
(2 > 1) && ( 5 + 5)  // 10
(2 + 1) && ( 5 + 5)  // 10

||判断

用在条件表达式中,规则是:

num1 || num2
true  true   true
true  false  true
false  true   true
false  false  false

用在语句中,规则是:

     如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值

     如果第一个运算子的布尔值为false,则返回第二个运算子的值

||运算符一般在业务代码中做条件表达式判断和容错处理,我们在取数据时取不到的情况下,又不能影响后面的业务代码,就需要进行容错。||就是一个非常好的容错写法,相当于提供一个备用数据。

var data = undefined || backup_data; //请求出错,数据为undefined时,就去备用数据backup_data

三目判断

规则:

condition ? expression1 : expression2;

function absN(xzavier) {
  return xzavier > 0 ? xzavier : -xzavier;
}
absN(-123); //123
absN(123); //123

如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。

总结

以上就是为大家整理JavaScript代码里的判断的全部内容个,希望本文的内容对大家使用Javascript能有所帮助。

Javascript 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
javascript自执行函数
Feb 10 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 #Javascript
js严格模式总结(分享)
Aug 22 #Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 #Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 #Javascript
angularjs 源码解析之injector
Aug 22 #Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
详解python开发环境搭建
2016/12/16 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Anaconda入门使用总结
2018/04/05 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
运动会广播稿400字
2014/01/25 职场文书
助理政工师申报材料
2014/06/03 职场文书
医学会议开幕词
2016/03/03 职场文书