JavaScript比较两个数组的内容是否相同(推荐)


Posted in Javascript onMay 02, 2017

今天意外地发现JavaScript是不能用==或===操作符直接比较两个数组是否相等的。

alert([]==[]);  // false
alert([]===[]);  // false

以上两句代码都会弹出false。

因为JavaScript里面Array是对象,==或===操作符只能比较两个对象是否是同一个实例,也就是是否是同一个对象引用。目前JavaScript没有内置的操作符判断对象的内容是否相同。

但是惯性思维让人以为数组也是值,是可以比较的。

如果要比较数组是否相等,就只能遍历数组元素比较。

在网上流传很普遍的一种做法是将数组转换成字符串:

JSON.stringify(a1) == JSON.stringify(a2)

 或

a1.toString() == a2.toString()

请不要使用这种方法。

这种方法在某些情况下是可行的,当两个数组的元素顺序相同且元素都可以转换成字符串的情况下确实可行,但是这样的代码存有隐患,比如数字被转换成字符串,数字“1”和字符串“1”会被认为相等,可能造成调试困难,不推荐使用。

在StackOverflow上有大神已经提供了正确的方法,我就做下搬运工吧:

// Warn if overriding existing method
if(Array.prototype.equals)
  console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.");
// attach the .equals method to Array's prototype to call it on any array
Array.prototype.equals = function (array) {
  // if the other array is a falsy value, return
  if (!array)
    return false;
  // compare lengths - can save a lot of time 
  if (this.length != array.length)
    return false;
  for (var i = 0, l = this.length; i < l; i++) {
    // Check if we have nested arrays
    if (this[i] instanceof Array && array[i] instanceof Array) {
      // recurse into the nested arrays
      if (!this[i].equals(array[i]))
        return false;    
    }      
    else if (this[i] != array[i]) { 
      // Warning - two different object instances will never be equal: {x:20} != {x:20}
      return false;  
    }      
  }    
  return true;
}
// Hide method from for-in loops
Object.defineProperty(Array.prototype, "equals", {enumerable: false});

大神还顺手给了比较Object的方法:

Object.prototype.equals = function(object2) {
  //For the first loop, we only check for types
  for (propName in this) {
    //Check for inherited methods and properties - like .equals itself
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
    //Return false if the return value is different
    if (this.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {
      return false;
    }
    //Check instance type
    else if (typeof this[propName] != typeof object2[propName]) {
      //Different types => not equal
      return false;
    }
  }
  //Now a deeper check using other objects property names
  for(propName in object2) {
    //We must check instances anyway, there may be a property that only exists in object2
      //I wonder, if remembering the checked values from the first loop would be faster or not 
    if (this.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {
      return false;
    }
    else if (typeof this[propName] != typeof object2[propName]) {
      return false;
    }
    //If the property is inherited, do not check any more (it must be equa if both objects inherit it)
    if(!this.hasOwnProperty(propName))
     continue;
    //Now the detail check and recursion
    //This returns the script back to the array comparing
    /**REQUIRES Array.equals**/
    if (this[propName] instanceof Array && object2[propName] instanceof Array) {
          // recurse into the nested arrays
      if (!this[propName].equals(object2[propName]))
            return false;
    }
    else if (this[propName] instanceof Object && object2[propName] instanceof Object) {
          // recurse into another objects
          //console.log("Recursing to compare ", this[propName],"with",object2[propName], " both named \""+propName+"\"");
      if (!this[propName].equals(object2[propName]))
            return false;
    }
    //Normal value comparison for strings and numbers
    else if(this[propName] != object2[propName]) {
      return false;
    }
  }
  //If everything passed, let's say YES
  return true;
}

以上所述是小编给大家介绍的JavaScript比较两个数组的内容是否相同(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 #Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 #Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 #Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 #Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 #Javascript
ES6学习教程之对象的扩展详解
May 02 #Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 #Javascript
You might like
用Php实现链结人气统计
2006/10/09 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
使用vue构建移动应用实战代码
2017/08/02 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
女方婚礼新郎答谢词
2014/01/11 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
家长通知书家长意见
2015/06/03 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
妇产科护理心得体会
2016/01/22 职场文书
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL