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 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python实现机器人行走效果
2018/01/29 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
应聘教师推荐信
2013/10/31 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
班级课外活动总结
2014/07/09 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
公司年夜饭通知
2015/04/25 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技