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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
node.js基础知识小结
Feb 26 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
vscode中使用npm安装babel的方法
Aug 02 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防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python中print和return的作用及区别解析
2019/05/05 Python
在python中画正态分布图像的实例
2019/07/08 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
详解Python中的路径问题
2020/09/02 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
会计专业自荐信范文
2013/12/02 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
五年级学生评语大全
2014/12/26 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
JVM之方法返回地址详解
2022/02/28 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers