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自执行函数之伪命名空间封装法
Dec 25 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
对vuex中store和$store的区别说明
Jul 24 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript引导程序
2008/10/26 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
浅谈js的异步执行
2016/10/18 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python中with用法讲解
2020/02/07 Python
Django权限设置及验证方式
2020/05/13 Python
cf收人广告词
2014/03/14 职场文书
职工代表大会主持词
2014/04/01 职场文书
市场营销工作计划书
2014/05/06 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电