JavaScript相等运算符的九条规则示例详解


Posted in Javascript onOctober 20, 2019

简介

Java的等号有=,==,===三个运算符虽然都读成“等于”,但概念是不一样的,=指的是赋值,在这篇文章中我们不会进行更多的介绍;==称为相等运算符,比较的是两个操作数值是否相等;===称为严格相等运算符,比较的是两个操作数是否是“同一个值”。

针对相等运算符==和===,有两个对应的!=和!==运算符,这两个不相等运算符的运算结果是==和===运算结果的相反值。

严格相等运算符

严格相等运算符在对操作数进对比运算时,是不进行类型转换的。对比规则如下:

1. 操作数类型不同

对比结果是false

1 === "1" // false
true === "true" // false
undefined === true //false
1 === true //false

2.同一类原始类型值

如果两个值都是原始类型值(数字、字符串、布尔值),值相同就返回true,值不同就返回false。

对于原始类型值,要注意的是,0和-0是相等的;如果两个值是字符串,需要它们在16位编码的相同位置上有相同的值才是相等。如果是不同的16位编码序列,就算有相同的内容,相同的长度,结果也是不相等。

'1' === '0' //false
1 === 0x1 // true

3.同是对象

如果两个值是对象(数组、函数、对象、Symbol),对于两个对象比较的是引用,如果引用指向的是不同的对象,则结果是不相等。

{} === {} // false
[] === [] // false
(function () {} === function () {}) // false

var v1 = {};
var v2 = v1; //v2和v1指向同一个引用地址
v1 === v2 // true 

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');
let s3 = s1;
s1 === s2 // false
s1 === s2 // true

4. null和undefined

如果两个值都是null或者都是undefined,结果是true

null === null //true
undefined === undefined //true

5.NaN

如果两个值都是NaN,结果是false

NAN === NAN //false

NaN和任何数字都不相等,包括它自身

相等运算符

1. 值的类型相同

应用严格相等运算符转换规则的值类型相同规则(除:操作数类型不同)。

2.不同原始类型值

如果是不同原始类型值(数字、字符串、布尔值)进行比较,将非数字类型转换成数字,再进行比较。

0 == undefined //false
// 等同于 0 == Number(undefined)
// 等同于0 == NAN

0 == null //false
// 等同于 0 == Number(null)

1 == true // true
// 等同于 1 == Number(true)

'true' == true // false
// 等同于 Number('true') == Number(true)
// 等同于 NaN === 1

'' == 0 // true
// 等同于 Number('') == 0
// 等同于 0 == 0

'1' == true // true
// 等同于 Number('1') == Number(true)
// 等同于 1 == 1

'\n 123 \t' == 123 // true
// 因为字符串转为数字时,省略前置和后置的空格

3. 对象和原始类型值

如果其中一个操作数是对象,另外一个是原始类型值(数字、字符串、布尔值),按如下规则转:

  • 将对象转换成原始类型值
  • 转换后的原始类型值与另一个操作数的类型一样,使用值类型相同的规则
  • 如果不一样,将非数字类型转换成数字再进行比较。

例1:对象对比数字

[1] == 1 //true

解析:

a. [1]先转换成原始值"1";

b. 转换后与右边的操作数1类型不一样,将"1"转换成1;

c. 1 == 1 结果是true

例2:对象对比字符串

[1] == "1"

解析:

a. [1]先转换成原始值"1";

b. 转换后与右边的操作数"1"类型一样,"1"=="1",结果是true;

例3:对象对比布尔值

[1] == true

解析:

a. [1]先转换成原始值"1";

b. 转换后与右边的操作数true类型不一样,将右边的操作数true转换成1;

c. 1 == 1结果是true

4. null和undefined

如果其中一个值是null,另外一个是undefined,结果是相等

null == undefined

对象转换为原始类型规则

比较操作符的操作数可能是任意类型,然而只有数字和字符串才能真正执行比较操作,因此那些不是数字和字符串的类型都将进行类型转换。转换的规则如下:

  1. 如果对象类型是Date,会调用该对象的toString();
  2. 其他情况下,如果valueOf()返回的是原始类型,会调用对象的valueOf();
  3. 其他情况下(如果valueOf()不存在或没有返回原始类型),会调用toString()方法,大部分情况下是用的这种转换。
  4. 如果没有toString()方法,则抛出一个类型异常错误

上面的规则只是应用于+、==、!=中涉及到的对象转为原始类型的转换规则,如果是> ,< 等其他运算符涉及的转换,转换规则中除去日期对象的特殊情况,其他是一样的,也就是说规则是下面这样的:

  1. 其他情况下,如果valueOf()返回的是原始类型,会调用对象的valueOf();
  2. 其他情况下(如果valueOf()不存在或没有返回原始类型),会调用toString()方法,大部分情况下是用的这种转换。
  3. 如果没有toString()方法,则抛出一个类型异常错误

总结

严格相等运算符的比较是不对操作数进行类型转换的,只要操作数类型不一致,返回就是false;对于操作数都是原始类型,值相等就返回true,反之返回fase;对于对象,对比的是引用指向的地址,地址是同一个,就返回false,反之返回true;另外介绍了几个特殊的操作数的对比,undefined、null、NaN,其中null和undefined是严格相等的,而NaN和任何类型的操作数都不会相等包括它自己。

相等运算符是会对操作数进行类型转换的,如果操作数的类型相同,则按严格相等运算符的规则。如操作数是不同的原始值类型,则都转换成数字再进行比较;如果是原始值类型和对象的比较,则对象先转换成原始类型值再对比,再比较时如果是相同类型就比较值,如果还是不同,都转换成数字再进行比较;null和undefined是相等的

+、==、!=在进行运算时如果涉及到对象类型转为原始值时,转换规则和其他的运算符是不一样的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
js实现验证码功能
Jul 24 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 #Javascript
vue实现二级导航栏效果
Oct 19 #Javascript
vue.js实现二级菜单效果
Oct 19 #Javascript
vue实现多级菜单效果
Oct 19 #Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
You might like
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
python re模块和正则表达式
2021/03/24 Python
网页设计个人找工作求职信
2013/11/28 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
教师个人年终总结
2015/02/11 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
python三子棋游戏
2022/05/04 Python