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 相关文章推荐
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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的宝库目录--PEAR
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python多重继承实例
2014/10/11 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Python代码实现双链表
2022/05/25 Python
python manim实现排序算法动画示例
2022/08/14 Python