Javascript的比较汇总


Posted in Javascript onJuly 25, 2016

在Javascript应用过程中会遇到各式各样的比较,今天给大家整理了三种情况,一起来学习下。

1.两个对象的比较

Javascript的比较中参杂了一些比较奇怪的特性,我们来看一些比较简单的比较。

// 原始值的比较
> var a = 12
undefined
> var b = 12
undefined
> a == b
true
> a === b
true
// 对象的比较
> var c = []
undefined
> var d = []
undefined
> c == d
false
> c === d
false

由上面的结果可以看出比较两个原始值跟比较对象规则似乎有点不同,比较两个对象值的话即便它们的值相同,但是最后的结果是不一样的。比较两个对象,应该比较的是两个对象的引用。

如果我们这样操作:

> var m = {}
undefined
> n = m
{}
> n === m
true

表示两个变量都指向同一个对象,所以它们就是相同的了。

2.不同类型的比较

还有下面这个比较特殊的情况

> 12 == "12"
true

> null == undefined
true
> undefined == false
false
> null == false
false
> null === undefined
false

为什么整型能够等于字符串?这是由于==(等于而非全等)并不比较类型,它比较之前会将需要比较的值进行类型转换,这里的话会将字符串转换成数值类型然后进行比较。为什么这么肯定? 我们做一下实验。

> 1 + 2
3
> 1 + "2"
'12'
> 2 < "12"
true
> "2" < "12"
false

从上面例子可以看出,数值2确实是比字符串12小的。如果比较之前是数值转换成字符串那结果应该是"2" > "12"才对。
还不相信?我再举个例子。

> "12d" > 12
false
> "12d" < 12
false
> "12d" == 12
false
> "12" < "12d"
true

这是为什么呢?如果是将12转换成字符串的话,那12d应该是大于12才对吧。为什么怎么比较都是false?我估计是由于下面这个特殊的家伙。

> NaN < 1
false
> NaN > 1
false

NaN无论跟什么进行比较,都会返回false。包括它自己。所以要判断一个变量是不是NaN最好的办法就是x != x如果返回的是true则表明x是NaN。那么这里应该就是当12d要转换成数值类型的时候由于带有特殊的字符,最后变成了NaN了,跟数值类型无论怎么比较结果都是false。

对于数字与字符串操作符来说,加号运算符跟比较运算符的行为有所不同。加号运算符更偏爱字符串,如果其中一个操作数是字符串的话则会转换成字符串。而比较运算符则比较偏爱数字,只有在两个数字都为字符串的时候才会进行字符串比较。
至于上面的null 跟 undefined。。。。。我暂时也不知道怎么解释它们的行为。我也只能姑且记住。因为它们比较特殊。

3.对象跟原始值的比较

如果两个需要比较的对象一个是javascript对象一个是字符串,则会进行某种程度上的类型转换。想办法把对象的值转换成原始值。一般来说就有valueOf, toString两种方法。下面是一个空对象的转换流程:

// 我直接明文写出来了
> a = {}
{}
// 1. valueOf 转换
> a.valueOf()
{}

// 2. 如果上面操作得到的不是一个原始值则进而用toString 转换。(反之亦然)
> a.toString()
'[object Object]'
> a == '[object Object]'
true

上面其实是一个内置对象的转换过程,也是javascript的机制。首先它会调用valueOf进行转换,如果得到的值并不是一个原始值,则会进而调用toString进行转换,最后得到的值是'[object Object]'一个很奇怪的值,不过它是原始值。如果把变量a跟这个值做相等判断(不是全等)则可以得出一个true的结果。(是不是被它搞崩溃了?)

然而权威指南给了如下原则,我们可以参考一下。

原始值的转换JavaScript语言核心内置类首先尝试使用ValueOf转换,然后使用toString进行转换。除了日期类,它只使用toString进行转换。那些不是JavaScript核心中的对象则通过各自的实现中定义的方式来转换为原始值。
根据上面的解释。我们的a={}与原始值进行比较的时候,会先调用valueOf函数,它的结果是{}显然不是一个原始值。则会使用toString进行转换。最后得出了那个很奇怪的结果。不过这个很奇怪的结果'[object Object]'确实是 {}的原始值。(它是字符串的字面量)。

以上就是Javascript中的比较汇总,希望本文所述对大家学习javascript时有所帮助。

Javascript 相关文章推荐
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 #Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 #Javascript
JS本地刷新返回上一页代码
Jul 25 #Javascript
jQuery layui常用方法介绍
Jul 25 #Javascript
Bootstrap Validator 表单验证
Jul 25 #Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 #Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
php判断linux下程序问题实例
2015/07/09 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
再谈javascript原型继承
2014/11/10 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
js实现每日签到功能
2018/11/29 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Python中 Lambda表达式全面解析
2016/11/28 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
django做form表单的数据验证过程详解
2019/07/26 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python 默认参数相关知识详解
2019/09/18 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
中学教师管理制度
2014/01/14 职场文书
高中体育教学反思
2014/01/24 职场文书
村抢险救灾方案
2014/05/09 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
详细了解MVC+proxy
2021/07/09 Java/Android
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android