判斷兩個物件相等—網易一面
阿新 • • 發佈:2018-12-10
思路:首先明白,JS的物件型別很多,針對每個型別判斷相等的方法都不同。
物件型別:string、Boolean、number、array、date、建構函式......
我們認為:
- NaN 和 NaN 是相等
- [1] 和 [1] 是相等
- {value: 1} 和 {value: 1} 是相等
不僅僅是這些長得一樣的,還有
- 1 和 new Number(1) 是相等
- 'Curly' 和 new String('Curly') 是相等
- true 和 new Boolean(true) 是相等
判斷字串和字串包裝物件是相等——隱式轉換
如:
console.log('Curly' + '' === new String('Curly') + ''); // true
思路:如果 a 和 b 的 Object.prototype.toString的結果一致,並且都是"[object String]",那我們就使用 '' + a === '' + b 進行判斷。
可是不止有 String 物件吶,Boolean、Number、RegExp、Date呢?
var toString = Object.prototype.toString; function isFunction(obj) { return toString.call(obj) === '[object Function]' } function eq(a, b, aStack, bStack) { // === 結果為 true 的區別出 +0 和 -0 if (a === b) return a !== 0 || 1 / a === 1 / b; // typeof null 的結果為 object ,這裡做判斷,是為了讓有 null 的情況儘早退出函式 if (a == null || b == null) return false; // 判斷 NaN if (a !== a) return b !== b; // 判斷引數 a 型別,如果是基本型別,在這裡可以直接返回 false var type = typeof a; if (type !== 'function' && type !== 'object' && typeof b != 'object') return false; // 更復雜的物件使用 deepEq 函式進行深度比較 return deepEq(a, b, aStack, bStack); }; function deepEq(a, b, aStack, bStack) { // a 和 b 的內部屬性 [[class]] 相同時 返回 true var className = toString.call(a); if (className !== toString.call(b)) return false; switch (className) { case '[object RegExp]': case '[object String]': return '' + a === '' + b; case '[object Number]': if (+a !== +a) return +b !== +b; return +a === 0 ? 1 / +a === 1 / b : +a === +b; case '[object Date]': case '[object Boolean]': return +a === +b; } var areArrays = className === '[object Array]'; // 不是陣列 if (!areArrays) { // 過濾掉兩個函式的情況 if (typeof a != 'object' || typeof b != 'object') return false; var aCtor = a.constructor, bCtor = b.constructor; // aCtor 和 bCtor 必須都存在並且都不是 Object 建構函式的情況下,aCtor 不等於 bCtor, 那這兩個物件就真的不相等啦 if (aCtor == bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) { return false; } } aStack = aStack || []; bStack = bStack || []; var length = aStack.length; // 檢查是否有迴圈引用的部分 while (length--) { if (aStack[length] === a) { return bStack[length] === b; } } aStack.push(a); bStack.push(b); // 陣列判斷 if (areArrays) { length = a.length; if (length !== b.length) return false; while (length--) { if (!eq(a[length], b[length], aStack, bStack)) return false; } } // 物件判斷 else { var keys = Object.keys(a), key; length = keys.length; if (Object.keys(b).length !== length) return false; while (length--) { key = keys[length]; if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack))) return false; } } aStack.pop(); bStack.pop(); return true; } console.log(eq(0, 0)) // true console.log(eq(0, -0)) // false console.log(eq(NaN, NaN)); // true console.log(eq(Number(NaN), Number(NaN))); // true console.log(eq('Curly', new String('Curly'))); // true console.log(eq([1], [1])); // true console.log(eq({ value: 1 }, { value: 1 })); // true var a, b; a = { foo: { b: { foo: { c: { foo: null } } } } }; b = { foo: { b: { foo: { c: { foo: null } } } } }; a.foo.b.foo.c.foo = a; b.foo.b.foo.c.foo = b; console.log(eq(a, b)) // true