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下判断是否为闰年的Datetime包
Oct 26 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
JavaScript门道之标准库
May 26 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
php文件上传的简单实例
2013/10/19 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python保存字符串到文件的方法
2015/07/01 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python递归实现快速排序
2018/08/18 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python函数的作用域及关键字详解
2019/08/20 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
销售员岗位职责范本
2014/02/03 职场文书
运动会通讯稿200字
2014/02/16 职场文书
优秀护士先进事迹
2014/05/08 职场文书
项目建议书范文
2014/05/12 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015教师年度考核评语
2015/03/25 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python