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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
详解vue项目打包步骤
Mar 29 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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 面向对象的一个例子
2011/04/12 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python 实现集合Set的示例
2020/12/21 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
安全承诺书格式
2014/05/21 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
《迟到》教学反思
2016/02/24 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL