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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
详解php反序列化
2020/06/10 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
Vue指令指令大全
2019/02/09 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python中property函数用法实例分析
2018/06/04 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
一套带答案的C++笔试题
2014/01/10 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
贷款担保书范文
2014/05/13 职场文书
运动会加油稿100字
2014/09/19 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL