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 jQuery $.post $.ajax用法
Jul 09 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
详解在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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
理解Python垃圾回收机制
2016/02/12 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
pandas分区间,算频率的实例
2019/07/04 Python
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
教师辞职报告范文
2014/01/20 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
捐资助学倡议书
2014/04/15 职场文书
报到证办理个人委托书
2014/10/06 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
货款欠条范本
2015/07/03 职场文书
会计专业自荐信范文
2019/05/22 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers