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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解Vue demo实现商品列表的展示
May 07 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python画双y轴图像的示例代码
2019/07/07 Python
Django时区详解
2019/07/24 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
.NET程序员的数据库面试题
2012/10/10 面试题
为什么要用EJB
2014/04/17 面试题
医疗纠纷协议书
2014/04/16 职场文书
委托收款证明
2015/06/23 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python之基础函数案例详解
2021/08/30 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers