js比较两个单独的数组或对象是否相等的实例代码


Posted in Javascript onApril 28, 2019

所谓js的中的传值,其实也就是说5种基本数据类型(null,undefind,boolean,number,string)

传引用也就是说的那个引用数据类型,(array和object)

基本数据类型的值不可变,而引用数据类型的值是可变的

所以当你比较数组和对象时,都是false;除非你是克隆的原份数据

即: var a = { name: "李四" }; var b = a;

大家通常称对象为引用类型,以此来和基本类型进行区分; 而对象值都是引用,所以的对象的比较也叫引用的比较,当且当他们都指向同一个引用时,即都引用的同一个基对象时,它们才相等.

1.比较两个单独的数组是否相等

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

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

要判断2个数组是否相同,把数组转换成字符串进行比较。

如果要比较两个数组的元素是否相等,则:

JSON.stringify([1,2,3].sort()) === JSON.stringify([3,2,1].sort());

[1,2,3].sort().toString() === [3,2,1].sort().toString();

判断2个数组是否相同,首先要把数组进行排序,然后转换成字符串进行比较。

2.比较两个单独的对象是否相等

let cmp = ( x, y ) => {
// If both x and y are null or undefined and exactly the same
 if ( x === y ) {
  return true;
 }
// If they are not strictly equal, they both need to be Objects
 if ( ! ( x instanceof Object ) || ! ( y instanceof Object ) ) {
  return false;
 }
//They must have the exact same prototype chain,the closest we can do is
//test the constructor.
 if ( x.constructor !== y.constructor ) {
  return false;
 }
 for ( var p in x ) {
  //Inherited properties were tested using x.constructor === y.constructor
  if ( x.hasOwnProperty( p ) ) {
  // Allows comparing x[ p ] and y[ p ] when set to undefined
  if ( ! y.hasOwnProperty( p ) ) {
   return false;
  }
  // If they have the same strict value or identity then they are equal
  if ( x[ p ] === y[ p ] ) {
   continue;
  }
  // Numbers, Strings, Functions, Booleans must be strictly equal
  if ( typeof( x[ p ] ) !== "object" ) {
   return false;
  }
  // Objects and Arrays must be tested recursively
  if ( ! Object.equals( x[ p ], y[ p ] ) ) {
   return false;
  }
  }
 }
 for ( p in y ) {
  // allows x[ p ] to be set to undefined
  if ( y.hasOwnProperty( p ) && ! x.hasOwnProperty( p ) ) {
  return false;
  }
 }
 return true;
};

下面是StackOverflow大神封装的方法,可以学习一下:

1.比较数组

// 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});

2.比较对象

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;
}

总结

以上所述是小编给大家介绍的js比较两个单独的数组或对象是否相等的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
JavaScript函数详解
Nov 17 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
Angular PWA使用的Demo示例
Jan 31 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 #Javascript
vue操作动画的记录animate.css实例代码
Apr 26 #Javascript
JS原生瀑布流效果实现
Apr 26 #Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 #Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
第三节--定义一个类
2006/11/16 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js验证身份证号码记录的方法
2019/04/26 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
详解python 中in 的 用法
2019/12/12 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
详解python tcp编程
2020/08/24 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
测试工程师岗位职责
2013/11/28 职场文书
美德少年事迹材料
2014/01/23 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
接收函格式
2015/01/30 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS