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 相关文章推荐
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
vue-router 中 meta的用法详解
Nov 01 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
用Flash图形化数据(二)
2006/10/09 PHP
php目录操作实例代码
2014/02/21 PHP
PHPThumb图片处理实例
2014/05/03 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python的logging模块基本用法
2020/12/24 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
什么是lambda函数
2013/09/17 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
高中生班主任评语
2014/04/25 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
北京奥运会口号
2014/06/21 职场文书
超市店庆活动方案
2014/08/31 职场文书
二人合伙经营协议书
2014/09/13 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年度党员个人总结
2015/02/14 职场文书
幼儿园开学通知
2015/04/24 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
企业宣传稿范文
2015/07/23 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技