这几天遇到一个比较两个对象中属性值是否相等的问题。写了一个比较函数,如下:
function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a); var bProps = Object.getOwnPropertyNames(b); if (aProps.length != bProps.length) { return false; } for (var i = 0; i < aProps.length; i++) { var propName = aProps[i]; if (a[propName] !== b[propName]) { return false; } } return true; }这里使用了Object.getOwnPropertyByNames(obj)这个函数。该方法返回一个由指定对象的所有 自身属性的属性名(包括不可枚举属性)组成的数组,但是不会获取到原型链上的属性。这个方法在IE8下测试时发现不兼容。
准备用最原始的for-in遍历对象属性,但是这样的话for-in还会遍历出一个对象从其原型链上继承到的可枚举属性。
可是我需要一个一个对象的所有属性,包括不可枚举的。看到还有一个Object.keys(),它也是从IE9开始才支持。最后写了一个兼容IE8的Object.keys函数,如下:
Object.keys = Object.keys || function(obj){ if (obj !== Object(obj)){ return; } var arr = []; for(var i in obj){ //obj.hasOwnProperty(属性) 检测对象在排除原型链的情况下是否具有某个属性。 // if(obj.hasOwnProperty(i)){ if(Object.prototype.hasOwnProperty.call(obj,i)){ arr.push(i) } } return arr; };上面的获取对象属性值得方法即为:
var aprops = Object.keys(a);在IE8下测试时,又发现一个情况:
//屏蔽(覆盖)不可枚举的方法 toString() var obj = { toString:"ok" } for(var i in obj){ if(i === "toString"){ alert(obj[i]);//IE中不会弹出 "ok" } }原来是IE8等早期浏览器的BUG,屏蔽了(即覆盖)原型中不可枚举属性的实例属性也会在for-in循环中返回。因为只要是开发人员定义的属性都是可以枚举的,即使覆盖了原型中原来不可以枚举的属性,但是IE8及早期版本不买账。
那么这个bug会影响哪些属性和方法呢,包括toString()在内的以下七种:hasOwnProperty(),propertyIsEnumerable(),toLocaleString(),toString(),valueOf(),isPrototypeOf,constructor。
参考的实现如下:
if (!Object.keys) { Object.keys = (function () { var hasOwnProperty = Object.prototype.hasOwnProperty, hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), dontEnums = [ 'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', 'constructor' ], dontEnumsLength = dontEnums.length; return function (obj) { if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object'); var result = []; for (var prop in obj) { if (hasOwnProperty.call(obj, prop)) result.push(prop); } if (hasDontEnumBug) { for (var i=0; i < dontEnumsLength; i++) { if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]); } } return result; } })() };最主要的是 hasDontEnumBug = !({toString: null}).propertyIsEnumerable(‘toString’).
首先屏蔽了创建对象 {toString:null} 用来屏蔽(覆盖)原型中不可枚举的toString()方法,即hasDontEnumBug为true时则为IE8及以下浏览器,然后进行数组push即可:
上面的代码在IE7(也许IE8也是)下有个问题,就是如果传入一个来自其他 window 对象下的对象时,不可枚举的属性也会获取到。 解决办法就是那就用window.frameElement判断是不是当前窗口:
if(window.frameElement == null && !Object.keys){ //code }其实上述还有很多的问题存在:
1) 如果该属性值之一本身就是一个对象
2) 如果属性值中的一个是NaN等等
所以最好是依赖完善的测试库来涵盖各种便捷情况,Underscore和Lo-Dash有一个名为_.isEqual()方法,用来比较好的处理深度对象的比较。
最后附上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, [], []); };
参考:
https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/keys