JavaScript中的相等操作符使用详解

ECMAScript 中的相等操作符由两个等于号 ( == ) 表示，如果两个操作数相等，则返回 true。

相等操作符会先转换操作数（通常称为强制转型），然后比较它们的相等性。

在转换不同的数据类型时，相等操作符遵循下列基本规则：

1. 如果有一个操作数是布尔值，则在比较相等性之前，将其转换为数值；

2. 如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转换为数值；

3. 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较；

4. 如果有一个操作数是 NaN，无论另一个操作数是什么，相等操作符都返回 false；

5. 如果两个操作数都是对象，则比较它们是不是同一个对象。如果指向同一个对象，则相等操作符返回 true；

6. 在比较相等性之前，不能将 null 和 undefined 转成其他值。

7. null 和 undefined 是相等的。

以上内容摘自《 JavaScript 高级程序设计（第3版）》3.5.7

一、基本规则

上面阐述的 1、2、3 三条规则，总结成一句话就是：

如果相等操作符两边的操作数，不包含 null 或者 undefined，且两个操作数不全是对象，

在执行相等比较之前，会先调用 Number() 将两个操作数强制转为 Number 类型，然后进行比较

所以在使用相等操作符的时候，会有以下情况：

'55' == 55; //true
false == 0; //true
"wise" == 3; //false （ Number("wise") -> NaN ）
[] == 0; //true （ Number([]) -> 0 ）

但是在特殊情况下，也就是两边都有对象的时候，会产生看似不合理的结果：

NaN == NaN; //false （参考第4条规则）
[] == []; //false
[] == ![]; //true
{} == {}; //false
{} == !{}; //false

二、[] == [] 和 {} == {}

在 JavaScript 中，Object、Array、Function、RegExp、Date 都是引用类型

声明引用类型的时候，变量名保存在 js 的栈内存里面，而对应的值保存在堆内存里面

而这个变量在栈内存中实际保存的是：这个值在堆内存中的地址，也就是指针

var a = {};
var b = {};

上面的代码中，声明变量 a 的时候，在堆内存中存储了一个 Object，而 a 实际保存的这个 Object 的地址

然后声明变量 b 的时候，又存储了一个新的 Object

虽然 a 和 b 都保存了一个 Object，但这是两个独立的 Object，它们的地址是不同的

再结合前面的第5条规则：如果两个对象指向同一个对象，相等操作符返回 true

所以 {} == {} 的结果是 false，同样的， [] == [] 的结果也是 false

var c = b;
b == c; //true（变量c保存的是b的指针，它们指向同一个对象）

三、[] == ![] 和 {} == !{}

参考链接：JavaScript 运算符优先级

ECMAScript 中规定，逻辑非 (!) 的优先级高于相等操作符 ( == )

在比较 [] == ![] 的时候，先计算 ![] 得到布尔值 false

所以实际上比较的是 [] == false

然后根据上面的第1条规则和第3条规则，将两个操作数转为数值类型：

Number([]) == Number(false); // -> 0 == 0 -> true

在比较 {} == !{} 的时候，也是遵守同样的规则：

{} == !{} -> {} == false -> Number({}) == Number(false) -> NaN == 0

然后第4条规则规定：如果有一个操作数是 NaN，相等操作符返回 false

所以 {} == !{} 的结果是 false

小结：

“==”在比较不同类型值得时候会进行隐式的类型转化，而”===”不会转化，全等一定相等，相等却不一定全等，这是一个充分不必要条件。undefined和null相等而不全等，且在相等比较的时候不会转化为其他类型的值。NaN是不等于NaN 的，要判断某个变量是不是NaN，要用”!=”。对象和非对象在进行比较的时候会先转为基本类型值然后再根据上面的规则进行比较。

赞 (0)

相关推荐

  • 判断JavaScript中的两个变量是否相等的操作符

    1.为什么要判断? 可能有些同学看到这个标题就会产生疑惑,为什么我们要判断JavaScript中的两个变量是否相等,JavaScript不是已经提供了双等号"=="以及三等号"==="给我们使用了吗? 其实,JavaScript虽然给我们提供了相等运算符,但是还是存在一些缺陷,这些缺陷不符合我们的思维习惯,有可能在使用的时候得到一些意外的结果.为了避免这种情况的出现,我们需要自己函数来实现JavaScript变量之间的对比. 2.JavaScript等号运算符存在哪

  • JS之相等操作符详解

    1.相等 == 和不相等 != 先转换操作数再比较相等性 在转换不同的数据类型时,相等和不相等遵循以下规则: 1.1 如果有一个操作数是布尔值,则在比较相等性前先将其转换为数值---false转换为0,true转换为1; 1.2 如果一个操作数是字符串,另一个操作数是数值,则在比较相等性前将字符串转换为数值 1.3 如果一个操作数是对象昂,另一个不是,则调用对象的valueOf()方法,用得到的基本类型值按照前面的规则比较 1.4 null和undefined是相等的 1.5 在比较相等性之前,

  • javascript中的相等操作符(==与===区别)

    1.前言 我们在编程的过程中,经常会遇到判断两个变量是否相等的情况,ECMAscript提供了两种相等操作符"=="和"==="来判断,这两种操作都会返回一个boolean值.一般来说,我们把"=="称之为相等,称"==="为全等.当两相比较的两个变量数据类型一致时,情况比较简单,而当操作符两边的变量类型不一致,甚至其中的某个变量是对象时,情况就比较复杂了,下面分别介绍当操作数类型不同时运算结果会怎么样. 2.全等操作符 &q

  • JavaScript中的相等操作符使用详解

    ECMAScript 中的相等操作符由两个等于号 ( == ) 表示,如果两个操作数相等,则返回 true. 相等操作符会先转换操作数(通常称为强制转型),然后比较它们的相等性. 在转换不同的数据类型时,相等操作符遵循下列基本规则: 1. 如果有一个操作数是布尔值,则在比较相等性之前,将其转换为数值: 2. 如果一个操作数是字符串,另一个操作数是数值,在比较之前先将字符串转换为数值: 3. 如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf() 方法,用得到的基本类型值按照前面

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript中Array的filter函数详解

    目录 描述 理解 示例 原生实现 描述 filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组.callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用.那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中. 理解 filter不会改变原数组,它返回过滤后的新数组. filter遍历的元素范围在第一次调用callback之前就已经确定了.在调用f

  • JavaScript中事件委托的示例详解

    JavaScript中事件委托的示例详解

    目录 事件流 事件委托 结尾 大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流 事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件 冒泡事件 我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev

  • JavaScript中的原型和继承详解(图文)

    JavaScript中的原型和继承详解(图文)

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

随机推荐