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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 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中如何防止表单的重复提交
2013/08/02 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Django实现celery定时任务过程解析
2020/04/21 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
实习生个人找工作的自我评价
2013/10/30 职场文书
诉前财产保全担保书
2014/05/20 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
临时用工协议书范本
2014/10/29 职场文书
顶岗实习协议书
2015/01/29 职场文书
大学生求职意向书
2015/05/11 职场文书
干部培训简讯
2015/07/20 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server