黑马程序员技术交流社区

标题: js中判断变量是否相等的几种方式 [打印本页]

作者: 逆风TO 时间: 2019-12-23 11:55
标题: js中判断变量是否相等的几种方式
本帖最后由逆风TO 于 2019-12-23 11:56 编辑

无论是在开发中，还是面试时，在js中判断变量是否相等，都是一个比较常见的问题。比较典型的有，== 和 === 的区别？判断变量是否相等有哪些方式？
这里打算总结一下判断变量是否相等的方式，以及做一些简单的分析。
判断变量相等的方式
判断变量是否相等，大致有以下一些方式

== 以及 ===；
利用数组中的toString方法；
ES6中的Object.is方法；
利用JSON.stringify，转换为String类型来比较；
自定义方法实现；
== 及 ===
==为转换类型比较运算符，===为严格比较运算符，在数据类型相同的情况下，使用==一般不会造成问题。

[JavaScript] 纯文本查看 复制代码

let num = 5;

let num2 = 5;



num == num2;//true

num === num2;//true

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

[JavaScript] 纯文本查看 复制代码

let num = 5;

let str = '5';



num == str;//true

num === str;//false



'' == false;//true

'' === false;//false



null == undefined;//true

null === undefined;//false



隐性转换类型可以带来一些便利性，但也有可能造成不易发现的bug，所以还是更推荐使用===来进行比较，这也是TS之所以流行的原因之一。
此外，上面列举的都是基本数据类型的比较，而在用===比较引用类型时，会存在一定的局限性。
[mw_shl_code=javascript,true]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方法就比较有用了，这一方法也能用作数组比较。

[JavaScript] 纯文本查看 复制代码

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等，否则容易出错，如下

[JavaScript] 纯文本查看 复制代码

[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中新增的方法，与===非常类似，同样用作比较两个值是否相等。

[AppleScript] 纯文本查看 复制代码

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

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

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

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

[AppleScript] 纯文本查看 复制代码

+0 === -0 //true

NaN === NaN //false



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

Object.is(NaN, NaN) //true

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

[AppleScript] 纯文本查看 复制代码

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字符串，得出的字符串便可以用作对象的比较。

JSON.stringify弥补了===无法准确比较对象的局限，不过它也有一定的局限性，在遇到undefined、function以及symbol值时会忽略。

另外，值得一提的是利用JSON.parse、JSON.stringify可实现对象深拷贝，局限性同上。

自定义方法

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

[JavaScript] 纯文本查看 复制代码

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;

    if (length !== b.length) return false;

    while (length--) {

      if (!eq(a[length], b[length], aStack, bStack)) return false;

    }

  } else {

    var keys = _.keys(a),

    key;

    length = keys.length;

    if (_.keys(b).length !== length) return false;

    while (length--) {

      key = keys[length];

      if (! (_.has(b, key) && eq(a[key], b[key], aStack, bStack))) return false;

    }

  }

  aStack.pop();

  bStack.pop();

  return true;

};



_.isEqual = function(a, b) {

  return eq(a, b);

};

[JavaScript] 纯文本查看 复制代码

_.isEqual(NaN,NaN);//true

_.isEqual(1,'1');//false

_.isEqual({},{});//true

underscore的isEqual方法大致如上，感兴趣的可以自己稍加修改，移植到自己的常用方法中。

这里推荐我的前一篇文章，【总结】做一个自己的前端js工具库，把常用方法封装到自己的工具库中，可以便于后续使用。

何时使用它们

不一样的场景可能有不一样的需求，如果只比较基本数据类型，那么===就足够了，如果想“一劳永逸”，那么付出一定的成本使用自定义方法无疑是有必要的。

在日常反复的开发中，还是要多多探索吧。

作者: 逆风TO 时间: 2019-12-23 16:07
辛苦了加油哦！

作者: zhaosongzhi 时间: 2019-12-23 16:18
感谢分享

作者: 我是小圆圆 时间: 2019-12-23 16:49
66666666666666666

作者: duanshaobo 时间: 2019-12-23 16:51
六六六六六六六六六六六六六六六六六六六六六六六六

作者: zhanghua342 时间: 2019-12-23 16:51
哇厉害了！！！！

作者: 我爱我1022 时间: 2019-12-23 16:52
棒棒的加油哦

作者: 小公举 时间: 2019-12-23 17:13
感谢分享谢谢楼主的分享

作者: 李娟玲老师 时间: 2019-12-23 17:16
66666666666666666

作者: 王锦 时间: 2019-12-23 17:17
666666666666666666666

作者: zhuyanting 时间: 2019-12-23 17:18
看到代码就头大的我表示佩服

作者: 温柔一刀！喵！ 时间: 2019-12-23 17:20
辛苦分享~

作者: 哦嗨呦 时间: 2019-12-23 17:34
谢谢分享

作者: 宗进1 时间: 2019-12-23 17:40
加油加油

作者: 孙丽 时间: 2019-12-23 17:45
666666666666666

作者: 孙丽 时间: 2019-12-23 17:46
6666666666666666666666

作者: lzq123 时间: 2019-12-23 18:07
66666666666666666666666666666666666

作者: zplxwl 时间: 2019-12-23 20:41
6666666666666666666

作者: lvxinvip 时间: 2019-12-23 22:26

作者: 黑马程序员啊 时间: 2019-12-23 22:55

棒棒的66666

作者: 九月丫 时间: 2019-12-23 23:04
6666666666666666666666666

作者: 耙丫丫 时间: 2019-12-23 23:26
666666666666666

作者: 大安 时间: 2019-12-24 10:23
感谢楼主分享呀

作者: 章鱼顶呱呱 时间: 2019-12-24 10:39
66666666666666666666666666666666

作者: 爱笑的姑娘 时间: 2019-12-24 10:52
666666666666666666666666666666666666666666

作者: daoqin 时间: 2019-12-24 10:57

感谢分享谢谢楼主的分享

作者: hello！！！ 时间: 2019-12-24 10:59

作者: 大智叔叔 时间: 2019-12-24 13:29

感谢分享谢谢楼主的分享

作者: 霍尔 时间: 2019-12-24 14:35
棒棒哒，赞

作者: sdjadyhm 时间: 2019-12-24 18:08
66666666666666

作者: fujiangbo 时间: 2019-12-24 19:34

作者: 零度☆黎明 时间: 2019-12-24 20:53
不错, 不错 .................. ..................

作者: manyihang 时间: 2019-12-25 05:21
6666666666666666666666666666

作者: 殷凯老师 时间: 2019-12-25 10:01
好帖必顶！！！！！！！！

作者: Emmmmm~ 时间: 2019-12-25 10:10
辛苦了，感谢分享

作者: json0314 时间: 2019-12-25 10:13
好好好!!!

作者: yujq 时间: 2019-12-25 11:13
6666666666666

作者: longyu3 时间: 2019-12-25 11:47
代码代码代码代码等待我去码一下

作者: 影@子~ 时间: 2019-12-25 15:18
感谢分享

作者: dendi 时间: 2019-12-25 17:22
黑马程序员，西安校区威武

作者: dendi 时间: 2019-12-25 21:26
厉害了6666666666666666

作者: 你不爱我 时间: 2019-12-25 21:38
优秀66666666666666666666666

作者: 素问 时间: 2019-12-25 21:42
很有用的比较，值相等和引用相当，以及数组与对象的相等判断都写得很不错！

作者: 半个程序员 时间: 2019-12-25 21:47
加油加油6666666666666

作者: 举个栗子 时间: 2019-12-25 21:58
加油加油6666666666666

作者: ruoquan 时间: 2019-12-25 22:08
牛牛牛6666666666666

作者: mydorling11 时间: 2019-12-25 23:14
6666666666666666666666666666

作者: 八戒猪 时间: 2019-12-25 23:16
66666666666666

作者: jsnoob 时间: 2019-12-26 02:33
加油加油加油加油！！

作者: 王微 时间: 2019-12-26 18:36

谢谢分享

作者: 竹竹竹竹 时间: 2019-12-27 09:50
感谢分享

作者: kdhdjdj 时间: 2019-12-27 10:08
6666666666666666666666666666666666666666666666666666666666666666

作者: 雨落轻舟 时间: 2019-12-27 18:24
辛苦了，感谢总结

作者: 逆风TO 时间: 2020-1-2 11:37

逆风TO 发表于 2019-12-23 16:07
辛苦了加油哦！

好好学习，天天向上