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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
微信小程序入门教程
Nov 18 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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实现水仙花数的4个示例分享
2014/04/08 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
python+Splinter实现12306抢票功能
2018/09/25 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python time库基本使用方法分析
2019/12/13 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
你常见到的runtime exception
2016/09/05 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
《童年的发现》教学反思
2014/02/14 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
简历自荐信范文
2015/03/09 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015年招生工作总结
2015/05/04 职场文书
建党伟业的观后感
2015/06/01 职场文书