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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
JS实现简单九宫格抽奖
Jun 28 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
德生PL330的评价与改造
2021/03/02 无线电
聊天室php&amp;mysql(四)
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python对象体系深入分析
2014/10/28 Python
Python每天必学之bytes字节
2016/01/28 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python如何访问字符串中的值
2020/02/09 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
医院领导班子四风对照检查材料
2014/09/27 职场文书
Python3 类型标注支持操作
2021/06/02 Python