JavaScript代码里的判断小结_javascript技巧

比较判断

比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件。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
javascript课程小结、微课制作技巧小结、攻辩小结技巧、javascript nan判断、javascript null判断,以便于您获取更多的相关知识。

时间: 2024-12-22 15:21:21

JavaScript代码里的判断小结_javascript技巧的相关文章

JAVASCRIPT代码编写俄罗斯方块网页版_javascript技巧

俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码里对应 1.背景图片:tetris.png 2.失败时候的弹出框图片:game-over.png 3.七种色彩小方块图片:  

超实用的JavaScript代码段 附使用方法_javascript技巧

JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 本文为大家整理了5段实用JavaScript代码,便于大家进行开发. 1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库

javascript中Number的方法小结_javascript技巧

一.构造函数 Number(value) new Number(value) 二.Number属性 1.Number.MAX_VALUE 返回能表示的最大数字. 2.Number.MIN_VALUE 能表示的最小数字. 3.Number.NAN 非数字值. 4.Number.NEGATIVE_INFINITY 负无穷,当溢出时返回. 5.Number.POSITIVE_INFINITY 正无穷,当溢出时返回. 三.Number方法 1.toString() 使用指定进制,将一个数字转换为字符串.

flash javascript之间的通讯方法小结_javascript技巧

不用getURL和fsCommand方法 flash使用的actionscript跟javascript是非常相通的,下面描述如何互相调用函数: 1:javascript调用flash中的函数 在flash的脚本中增加 import flash.external.ExternalInterface; 假定要调用的函数是hello,as代码如下 function hello(){ return "hello"; } ExternalInterface.addCallback("

JavaScript lodash常见用法系列小结_javascript技巧

lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左.John-David Dalton的最初目标,是提供更多"一致的跨浏览器行为--,并改善性能".之后,该项目在现有成功的基础之上取得了更大的成果,并于一月份发布了3.0版本. 下面给大家说下javascript lodash知识,具体详情如下所示: 1 _.compact用法 _.compact([0, 1, false, 2, '', 3,'mm']); var

javascript代码加载优化方法_javascript技巧

下面我们通过这个例子介绍1个更简单的方法: 我们用将统计代码保存到1个文件:文件路径:/config/counter.conf 统计代码如下: 复制代码 代码如下: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744406-1']); _gaq.push(['_trackPageview']); (function() { var ga = do

javascript继承的六大模式小结_javascript技巧

1.原型链 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubV

javascript进行数组追加方法小结_javascript技巧

javascript中给数组加元素是一个非常简单的问题,javascript本身就提供了大量这类函数,我们可以使用js自带函数快速给数组增加元素了,本文就javascript进行数组追加的方法做出如下小结. 以前常用的是arr.concat(arr2)这种方法来追加数组,例子如下: 复制代码 代码如下: <script type="text/javascript">var arr = new Array(3);arr[0] = "测试数组1为 1";ar

javascript的console.log()用法小结_javascript技巧

console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招". 这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错. 今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log.于是有人就提供了这样两句