js中判断变量是否相等的几种方式

最新推荐文章于 2023-04-27 17:21:35 发布

渐暖吧

最新推荐文章于 2023-04-27 17:21:35 发布

阅读量841

点赞数

分类专栏：技术交流传智播客西安中心

原文链接：http://bbs.itheima.com/forum.php?mod=viewthread&tid=479815

版权

传智播客西安中心同时被 2 个专栏收录

888 篇文章 2 订阅

订阅专栏

技术交流

752 篇文章 4 订阅

订阅专栏

无论是在开发中，还是面试时，在js中判断变量是否相等，都是一个比较常见的问题。比较典型的有，== 和 === 的区别？判断变量是否相等有哪些方式？

这里打算总结一下判断变量是否相等的方式，以及做一些简单的分析。

判断变量相等的方式

判断变量是否相等，大致有以下一些方式

== 以及 ===；
利用数组中的toString方法；
ES6中的Object.is方法；
利用JSON.stringify，转换为String类型来比较；
自定义方法实现；

== 及 ===

==为转换类型比较运算符，===为严格比较运算符，在数据类型相同的情况下，使用==一般不会造成问题。

let num = 5;

let num2 = 5;

num == num2;//true

num === num2;//true

但在数据类型不一致的情况下，==会做一些隐性的类型转换。

let num = 5;

let str = '5';

num == str;//true

num === str;//false

'' == false;//true

'' === false;//false

null == undefined;//true

null === undefined;//false

隐性转换类型可以带来一些便利性，但也有可能造成不易发现的bug，所以还是更推荐使用===来进行比较，这也是TS之所以流行的原因之一。

此外，上面列举的都是基本数据类型的比较，而在用===比较引用类型时，会存在一定的局限性。

let a = {xx: 1};

let b = a;

a === b;//true

let c = {xx: 1};

let d = {xx: 1};

c === d;//false

在比较引用类型时，===比较的是变量的引用是否相同，而非值，当引用不同时，就会返回false。
由此可见，===并不是一枚无往不利的银弹，在比较对象是否相等时，还需要借助其他更可靠的方法。
Array toString方法前端给后端传参时，后端有时会要求多个参数,隔开，Array toString方法就比较有用了，这一方法也能用作数组比较。

let arr = [1,3,5,7,9];

let arr2 = [1,3,5,7,9];

arr.toString() === arr2.toString();//true "1,3,5,7,9"

不过也存在一定的局限性，不能用来比较二维及以上的数组、不能包含null、undefined、object、function等，否则容易出错，如下

[1,3,5,[2,4,6]].toString();//"1,3,5,2,4,6"

[1,null,undefined,'',2].toString();//"1,,,,2"

[{xx:2},window,1,2].toString();//"[object Object],[object Window],1,2"

Object.is方法

Object.is是ES6中新增的方法，与===非常类似，同样用作比较两个值是否相等。

Object.is(1,1);//true

Object.is('str','str');//true

Object.is({},{});//false

不同的是在判断+0和-0、NaN和NaN时的区别。

+0 === -0 //true

NaN === NaN //false

Object.is(+0, -0) //false

Object.is(NaN, NaN) //true

在处理兼容性问题时，polyfill可以这么写。

if (!Object.is) {

Object.is = function(x, y) {

if (x === y) {

// 针对+0 不等于 -0的情况

return x !== 0 || 1 / x === 1 / y;

} else {

// 针对NaN的情况

return x !== x && y !== y;

}

};

}

JSON.stringify

JSON.stringify方法用于把对象或者数组转换为一个 JSON字符串，得出的字符串便可以用作对象的比较。

let obj = {name: 'lin', age: 24};

let obj2 = {name: 'lin', age: 24};

obj === obj2;//false

JSON.stringify(obj) === JSON.stringify(obj2);//true

JSON.stringify弥补了===无法准确比较对象的局限，不过它也有一定的局限性，在遇到undefined、function以及symbol值时会忽略。
另外，值得一提的是利用JSON.parse、JSON.stringify可实现对象深拷贝，局限性同上。

自定义方法

上面介绍的方法各有其用处及局限，如果要找一个覆盖更多使用场景的方法，无疑需要自己造轮子了，不过这里更推荐underscore的isEqual方法，毕竟是现有经得起考验的。

var eq, deepEq;

eq = function(a, b, aStack, bStack) {

if (a === b) return a !== 0 || 1 / a === 1 / b;

if (a == null || b == null) return false;

if (a !== a) return b !== b;

var type = typeof a;

if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;

return deepEq(a, b, aStack, bStack);

};

deepEq = function(a, b, aStack, bStack) {

if (a instanceof _) a = a._wrapped;

if (b instanceof _) b = b._wrapped;

var className = toString.call(a);

if (className !== toString.call(b)) return false;

switch (className) {

case '[object RegExp]':

case '[object String]':

return '' + a === '' + b;

case '[object Number]':

if ( + a !== +a) return + b !== +b;

return + a === 0 ? 1 / +a === 1 / b: +a === +b;

case '[object Date]':

case '[object Boolean]':

return + a === +b;

case '[object Symbol]':

return SymbolProto.valueOf.call(a) === SymbolProto.valueOf.call(b);

}

var areArrays = className === '[object Array]';

if (!areArrays) {

if (typeof a != 'object' || typeof b != 'object') return false;

var aCtor = a.constructor,

bCtor = b.constructor;

if (aCtor !== bCtor && !(_.isFunction(aCtor) && aCtor instanceof aCtor && _.isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) {

return false;

}

aStack = aStack || [];

bStack = bStack || [];

var length = aStack.length;

while (length--) {

if (aStack[length] === a) return bStack[length] === b;

}

aStack.push(a);

bStack.push(b);

if (areArrays) {

length = a.length;