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异步请求数据实例代码
Dec 28 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
[原创]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对数组排序代码分享
2014/02/24 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python dict乱码如何解决
2020/06/07 Python
解决python运行效率不高的问题
2020/07/20 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
谈谈python垃圾回收机制
2020/09/27 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
英语系毕业生自荐信
2013/10/31 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
nginx共享内存的机制详解
2022/03/21 Servers
Android实现图片九宫格
2022/06/28 Java/Android