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 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js判断两个数组相等的5种方法
May 06 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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
js实现无缝滚动图
2017/02/22 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
工程师自我评价怎么写
2013/09/19 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
中层干部岗位职责
2013/12/18 职场文书
《画家乡》教学反思
2014/04/22 职场文书
小学社会实践活动总结
2014/07/03 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
zabbix监控mysql的实例方法
2021/06/02 MySQL
PHP RabbitMQ消息列队
2022/05/11 PHP