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压缩利器
Feb 20 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
js常见遍历操作小结
Jun 06 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python字典DICT类型合并详解
2017/08/17 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
竞职演讲稿范文
2014/01/11 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
2014年会计工作总结
2014/11/27 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
二十年同学聚会感言
2015/07/30 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书