JavaScript判断两个值相等的方法详解

目录

前言非严格相等严格相等同值零同值总结

前言

在 JavaScript 中如何判断两个值相等，这个问题看起来非常简单，但并非如此，在 JavaScript 中存在 4 种不同的相等逻辑，如果你不知道他们的区别，或者认为判断相等非常简单，那么本文非常适合你阅读。
ECMAScript 是 JavaScript 的语言规范，在ECMAScript 规范中存在四种相等算法，如下图所示：

上图中四种算法对应的中文名字如下，大部分前端应该熟悉严格相等和非严格相等，但对于同值零和同值却不熟悉，下面我们分别介绍这四种算法。

同值同值零非严格相等严格相等

非严格相等

非严格相等使用两个等号，也就是我们熟悉的双等，非严格相等表示语义相等，不要求类型一样，非严格相等在比较前会先将比较参数类型转换为一致，再进行比较，代码示例如下：

1. 1 == 1; // true
2. 1 == '1'; // true 类型不同，不影响比较结果

复制代码

非严格相等有非常复杂的转换规则，非常难以记忆，社区中有人将上面的规则总结成了图片，一图胜千言，如下图所示：

为了方便记住非严格相等的的转换逻辑，作者将非对象值，可以总结为如下三条则：

Undefined 只和 Null 相等和 Number 比较时，另一个值会自动转换为 Number和 Boolean 比较时，另一个值会转换为 Number

如果值为对象，会使用内部的 ToPrimitive 转换，可以通过自定义 Symbol.toPrimitive 改变返回值，需要注意的是在相等的判断中 Symbol.toPrimitive 接受的 hint 参数都是 default。

1. const obj = {
2.   [Symbol.toPrimitive](hint) {
3.     console.log(hint);
4.     if (hint == 'number') {
5.       return 1;
6.     }
7.     if (hint == 'string') {
8.       return 'yan';
9.     }
10.     return true;
11.   },
12. };
14. console.log(obj == 1); // obj 返回 true
15. console.log(obj == '1'); // obj 返回 true
16. console.log(obj == true); // obj 返回 true

复制代码

非严格相等并非带来了很多便利，通过隐式的自动转换，简化了部分场景的工作，比如 Number 和 String 的自动转换，简化了前端从表单，url 参数中获取值的比较问题，但自动转换带来的问题比便利还多。
隐式转换的规则，大部分情况下难以驾驭，现在主流的观点已经不建议使用，作者建议只在判断 undefined 和 null 的场景下可以使用非严格相等。

严格相等

严格相等是另一种比较算法，其和非严格想等的区别是不会进行类型转换，类型不一致时直接返回 false，严格相等对应===操作符，因为使用三个等号，也被称作三等或者全等，严格相等示例如下：

1. 1 === 1; // true
2. 1 === '1'; // false 类型不同，影响比较结果

复制代码

不同类型值判断规则如下，和前面的非严格相等对比，严格相等更符合直觉。

严格相等解决了非严格相等中隐式转换带来的问题，但也丢失了隐式转换带来的便利，对于类型可能不一致的情况下，比如从表单中获取的值都是字符串，保险的做法是，在比较前手动类型转换，代码示例如下：

1. 1 === Number('1'); // true 手动类型转换，类型防御

复制代码

严格相等几乎总是正确的，但也有例外情况，比如 NaN 和正负 0 的问题。
Number 类型有个特殊的值 NaN，用来表示计算错误的情概况，比较常见是非 Number 类型和 Number 类型计算时，会得到 NaN 值，代码示例如下所示，这是从表单和接口请求获取数据时很容易出现的问题。

1. const a = 0 / 0; // NaN
2. const b = 'a' / 1;
3. const c = undefined + 1; // NaN

复制代码

在严格相等中，NaN 是不等于自己的，NaN 是(x !== x) 成立的唯一情况，在某些场景下其实是希望能够判断 NaN 的，可以使用 isNaN 进行判断，ECMAScript 2015 引入了新的 Number.isNaN，和 isNaN 的区别是不会对传入的参数做类型转换，建议使用语义更清晰的 Number.isNaN，但是要注意兼容性问题，判断 NaN 代码示例如下：

1. NaN === NaN; // false
3. isNaN(NaN); // true
4. Number.isNaN(NaN); // true
6. isNaN('aaa'); // true 自动转换类型 'aaa'转换为Number为NaN
7. Number.isNaN('aaa'); // false 不进行转换，类型不为Number，直接返回false

复制代码

严格相等另一个例外情况是，无法区分+0 和-0，代码示例如下，在一些数学计算场景中是要区分语义的。

1. +0 === -0; // true

复制代码

JavaScript 中很多系统函数都使用严格相等，比如数组的 indexOf，lastIndexOf 和 switch-case 等，需要注意，这些对于 NaN 无法返回正确结果，代码示例如下：

1. [NaN].indexOf(NaN); // -1 数组中其实存在NaN
2. [NaN].lastIndexOf(NaN); // -1

复制代码

同值零

同值零是另一种相等算法，名字来源于规范的直译，规范中叫做 SameValueZero，同值零和严格相等功能一样，除了处理 NaN 的方式，同值零认为 NaN 和 NaN 相等，这在判断 NaN 是否在集合中的语义下是非常合理的。
ECMAScript 2016 引入的 includes 使用此算法，此外 Map 的键去重和 Set 的值去重，使用此算法，代码示例如下：

1. [NaN].incdudes(NaN); // true 注意和indexOf的区别，incdudes的语义更合理
3. new Set([NaN, NaN]); // [NaN] set中只会有个一个NaN，如果 NaN !== NaN的话，应该是[NaN, NaN]
5. new Map([
6.   [NaN, 1],
7.   [NaN, 2],
8. ]); // {NaN => 2} 如果 NaN !== NaN的话，应该是 {NaN => 1, NaN => 2}

复制代码

同值

同值是最后一种相等算法，其和同值零类似，但认为 +0 不等于 -0，ECMAScript 2015 带来的 Object.is 使用同值算法，代码示例如下：

1. Object.is(NaN, NaN); // true
2. Object.is(+0, -0); // false  注意这里

复制代码

同值算法的使用场景是，确定两个值是否在任何情况下功能上是相同的，比较不常用，defineProperty 使用此算法确认键是否存在，例如，将存在的只读属性值-0 修改为+0 时会报错，如果设置为同样的-0 将执行正常，代码示例如下：

1. function test() {
2.   'use strict'; // 需要开启严格模式
3.   var a = {};
5.   Object.defineProperty(a, 'a1', {
6.     value: -0,
7.     writable: false,
8.     configurable: false,
9.     enumerable: false,
10.   });
12.   Object.defineProperty(a, 'a1', {
13.     value: -0,
14.   }); // 正常执行
16.   Object.defineProperty(a, 'a1', {
17.     value: 0,
18.   }); // Uncaught TypeError: Cannot redefine property: a1
19. }
20. test();

复制代码

对于数组判断是否存在的场景，如果想区分+0 和-0，可以使用 ECMAScript 2015 引入的 find 方法，自行控制判断逻辑，代码示例如下：

1. [0].includes(-0); // 不能区分-0
2. [0].find((val) => Object.is(val, -0)); // 能区分+0和-0

复制代码

总结

最后来对比下四种算法的区别，区别如下表所示：

	隐式转换	NaN 和 NaN	+0 和 -0
非严格相等(==)	是	false	true
严格相等(===)	否	false	true
同值零(includes 等)	否	true	true
同值(Object.is)	否	true	false

到此这篇关于JavaScript判断两个值相等的方法详解的文章就介绍到这了,更多相关JavaScript判断值相等内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！