在Javascript中相等运算包括"==","==="全等,两者不同之处,不必多数,本篇文章我们将来讲述如何判断两个对象是否相等? 你可能会认为,如果两个对象有相同的属性,以及它们的属性有相同的值,那么这两个对象就相等。那么下面我们通过一个实例来论证下:

var obj1 = {
name: "Benjamin",
sex : "male"
} var obj2 = {
name: "Benjamin",
sex : "male"
} //Outputs: false
console.log(obj1 == obj2); //Outputs: false
console.log(obj1 === obj2);

通过上面的例子可以看到,无论使用"=="还是"===",都返回false。主要原因是基本类型string,number通过值来比较,而对象(Date,Array)及普通对象通过指针指向的内存中的地址来做比较。看下面一个例子:

var obj1 = {
name: "Benjamin",
sex : "male"
}; var obj2 = {
name: "Benjamin",
sex : "male"
}; var obj3 = obj1; //Outputs: true
console.log(obj1 == obj3); //Outputs: true
console.log(obj1 === obj3); //Outputs: false
console.log(obj2 == obj3); //Outputs: false
console.log(obj2 === obj3);

上例返回true,是因为obj1和ob3的指针指向了内存中的同一个地址。和面向对象的语言(Java/C++)中值传递和引用传递的概念相似。 因为,如果你想判断两个对象是否相等,你必须清晰,你是想判断两个对象的属性是否相同,还是属性对应的值是否相同,还是怎样?如果你判断两个对象的值是否相等,可以像下面这样:

function isObjectValueEqual(a, b) {
// Of course, we can do it use for in
// Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b); // If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
} for (var i = 0; i < aProps.length; i++) {
var propName = aProps[i]; // If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
} // If we made it this far, objects
// are considered equivalent
return true;
} var obj1 = {
name: "Benjamin",
sex : "male"
}; var obj2 = {
name: "Benjamin",
sex : "male"
}; //Outputs: true
console.log(isObjectValueEqual(obj1, obj2));

正如你所看到的,检查对象的“值相等”我们基本上是要遍历的对象的每个属性,看看它们是否相等。虽然这个简单的实现适用于我们的例子中,有很多情况下,它是不能处理。例如: 1) 如果该属性值之一本身就是一个对象吗? 2) 如果属性值中的一个是NaN(在JavaScript中,是不是等于自己唯一的价值?) 3) 如果一个属性的值为undefined,而另一个对象没有这个属性(因而计算结果为不确定?) 检查对象的“值相等”的一个强大的方法,最好是依靠完善的测试库,涵盖了各种边界情况。Underscore和Lo-Dash有一个名为_.isEqual()方法,用来比较好的处理深度对象的比较。您可以使用它们像这样:

// Outputs: true
console.log(_.isEqual(obj1, obj2));

最后附上Underscore中isEqual的部分源码:

  // Internal recursive comparison function for `isEqual`.
var eq = function(a, b, aStack, bStack) {
// Identical objects are equal. `0 === -0`, but they aren't identical.
// See the [Harmony `egal` proposal](http://wiki.ecmascript.org/doku.php?id=harmony:egal).
if (a === b) return a !== 0 || 1 / a === 1 / b;
// A strict comparison is necessary because `null == undefined`.
if (a == null || b == null) return a === b;
// Unwrap any wrapped objects.
if (a instanceof _) a = a._wrapped;
if (b instanceof _) b = b._wrapped;
// Compare `[[Class]]` names.
var className = toString.call(a);
if (className !== toString.call(b)) return false;
switch (className) {
// Strings, numbers, regular expressions, dates, and booleans are compared by value.
case '[object RegExp]':
// RegExps are coerced to strings for comparison (Note: '' + /a/i === '/a/i')
case '[object String]':
// Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
// equivalent to `new String("5")`.
return '' + a === '' + b;
case '[object Number]':
// `NaN`s are equivalent, but non-reflexive.
// Object(NaN) is equivalent to NaN
if (+a !== +a) return +b !== +b;
// An `egal` comparison is performed for other numeric values.
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
case '[object Date]':
case '[object Boolean]':
// Coerce dates and booleans to numeric primitive values. Dates are compared by their
// millisecond representations. Note that invalid dates with millisecond representations
// of `NaN` are not equivalent.
return +a === +b;
}
if (typeof a != 'object' || typeof b != 'object') return false;
// Assume equality for cyclic structures. The algorithm for detecting cyclic
// structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
var length = aStack.length;
while (length--) {
// Linear search. Performance is inversely proportional to the number of
// unique nested structures.
if (aStack[length] === a) return bStack[length] === b;
}
// Objects with different constructors are not equivalent, but `Object`s
// from different frames are.
var aCtor = a.constructor, bCtor = b.constructor;
if (
aCtor !== bCtor &&
// Handle Object.create(x) cases
'constructor' in a && 'constructor' in b &&
!(_.isFunction(aCtor) && aCtor instanceof aCtor &&
_.isFunction(bCtor) && bCtor instanceof bCtor)
) {
return false;
}
// Add the first object to the stack of traversed objects.
aStack.push(a);
bStack.push(b);
var size, result;
// Recursively compare objects and arrays.
if (className === '[object Array]') {
// Compare array lengths to determine if a deep comparison is necessary.
size = a.length;
result = size === b.length;
if (result) {
// Deep compare the contents, ignoring non-numeric properties.
while (size--) {
if (!(result = eq(a[size], b[size], aStack, bStack))) break;
}
}
} else {
// Deep compare objects.
var keys = _.keys(a), key;
size = keys.length;
// Ensure that both objects contain the same number of properties before comparing deep equality.
result = _.keys(b).length === size;
if (result) {
while (size--) {
// Deep compare each member
key = keys[size];
if (!(result = _.has(b, key) && eq(a[key], b[key], aStack, bStack))) break;
}
}
}
// Remove the first object from the stack of traversed objects.
aStack.pop();
bStack.pop();
return result;
}; // Perform a deep comparison to check if two objects are equal.
_.isEqual = function(a, b) {
return eq(a, b, [], []);
};

感谢您的阅读,希望此篇文章对您有所帮助,文中不足之处欢迎批评斧正。

转载声明:

本文标题:Javascript 判断对象是否相等

本文链接:http://www.zuojj.com/archives/775.html,转载请注明转自Benjamin-专注前端开发和用户体验

Javascript 判断对象是否相等的更多相关文章

  1. JavaScript判断对象的类型

    JavaScript判断对象的类型 最近阅读了一些关于JavaScript判断对象类型的文章.总结下来,主要有constructor属性.typeof操作符.instanceof操作符和Object. ...

  2. JavaScript判断对象类型及节点类型、节点名称和节点值

    一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...

  3. javascript 判断对象类型

    typeof typeof是一个一元运算符,它返回的结果 始终是一个字符串,对不同的操作数,它返回不同的结果. 此表总结了typeof所有可能的返回值: 操作数类型 返回值 undefined &qu ...

  4. [转] javascript 判断对象是否存在的10种方法总结

    [From] http://www.jb51.net/article/44726.htm Javascript语言的设计不够严谨,很多地方一不小心就会出错.举例来说,请考虑以下情况.现在,我们要判断一 ...

  5. JavaScript 判断对象中是否有某属性

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined. ...

  6. javascript 判断对象的内置类型

    判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.在toString方法被调用时,会执行下面的操作步骤:1. 获取this对象的[[Class ...

  7. JavaScript判断对象数组中是否存在某个对象【转】

    1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) arr.ind ...

  8. javascript判断对象是否为domElement

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...

  9. JavaScript判断对象和数组

    在调用后端接口时,由于后端接口的不规范统一,接口最外层在没有数据时返回的是空数组(其实更想要的是空json对象,接口返回的data数据应该统一返回json对象,便于扩展),而在有数据时返回的是json ...

随机推荐

  1. 2013Top100summit公布重量级演讲嘉宾及大会日程

    TOP100SUMMIT对外公布重量级嘉宾及大会日程 第四届技术商业论坛暨全球软件案例研究峰会(TOP100summit)将于11月23-26日北京召开.本届大会以“技术推动商业变革”为主题,力邀业界 ...

  2. Oracle Function:COUNT

    Description The Oracle/PLSQL COUNT function returns the count of an expression. The COUNT(*) functio ...

  3. easyui 特殊操作

    --EasyUI - datagrid中单元格里编辑控件的单击事件如何获取当前行的index var rowIndex = $(this).parents('.datagrid-row').attr( ...

  4. Copying and Cloning Objects

    PHP Advanced and Object-OrientedProgrammingVisual Quickpro GuideLarry Ullman class someClass { publi ...

  5. mongo_action

    https://docs.mongodb.com/manual/introduction/ { name: "sue", age: 3, status: "A" ...

  6. Linux计划任务Crontab学习笔记

    1  http://www.jb51.net/LINUXjishu/345698.html 2  http://www.jb51.net/LINUXjishu/345705.html 3  http: ...

  7. LoadRunner-关联(自动关联和手动关联)

    使用LR录制脚本,新建课程:每次新建课程都会产生一个新的courseid和partid,直接使用录制的脚本执行是不行的.所以用到了关联. 注:关联分手动和自动关联,自动关联搜索出一些不必要关联的数据, ...

  8. Building a Space Station---poj2031(最小生成树)

    题目链接:http://poj.org/problem?id=2031 n个球型的cell,如果任意两个球表面没有接触或者没有包含关系,就选择最近的表面建立通道: 所以用maps[i][j]表示i,j ...

  9. Windows五种IO模型性能分析和Linux五种IO模型性能分析

    Windows五种IO模型性能分析和Linux五种IO模型性能分析 http://blog.csdn.net/jay900323/article/details/18141217 http://blo ...

  10. HTML5(字符标准,表单)

    字符标准 <meta charset="utf-8"> 表单 1.HTML 表单用于搜集不同类型的用户输入. 实例——创建文本字段 <form action=&q ...