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 选择器部分整理
Oct 28 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
详解一个基于套接字实现长连接的express
Mar 28 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
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Js四则运算函数代码
2012/07/21 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python爬取网页转换为PDF文件
2018/06/07 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
详解anaconda安装步骤
2020/11/23 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
毕业生就业自荐信
2013/12/04 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
给老师的感谢信
2015/01/20 职场文书
学生通报表扬范文
2015/05/04 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS