摘要:其他判断构造函数实例我们看个例子虽然和都是,但是和属于不同构造函数的实例,为了做出区分,我们认为是不同的对象。
前言JavaScript 专题系列第十二篇,讲解如何判断两个参数是否相等
虽然标题写的是如何判断两个对象相等,但本篇我们不仅仅判断两个对象相等,实际上,我们要做到的是如何判断两个参数相等,而这必然会涉及到多种类型的判断。
相等什么是相等?在《JavaScript专题之去重》中,我们认为只要 === 的结果为 true,两者就相等,然而今天我们重新定义相等:
我们认为:
NaN 和 NaN 是相等
[1] 和 [1] 是相等
{value: 1} 和 {value: 1} 是相等
不仅仅是这些长得一样的,还有
1 和 new Number(1) 是相等
"Curly" 和 new String("Curly") 是相等
true 和 new Boolean(true) 是相等
更复杂的我们会在接下来的内容中看到。
目标我们的目标是写一个 eq 函数用来判断两个参数是否相等,使用效果如下:
function eq(a, b) { ... } var a = [1]; var b = [1]; console.log(eq(a, b)) // true
在写这个看似很简单的函数之前,我们首先了解在一些简单的情况下是如何判断的?
+0 与 -0如果 a === b 的结果为 true, 那么 a 和 b 就是相等的吗?一般情况下,当然是这样的,但是有一个特殊的例子,就是 +0 和 -0。
JavaScript “处心积虑”的想抹平两者的差异:
// 表现1 console.log(+0 === -0); // true // 表现2 (-0).toString() // "0" (+0).toString() // "0" // 表现3 -0 < +0 // false +0 < -0 // false
即便如此,两者依然是不同的:
1 / +0 // Infinity 1 / -0 // -Infinity 1 / +0 === 1 / -0 // false
也许你会好奇为什么要有 +0 和 -0 呢?
这是因为 JavaScript 采用了IEEE_754 浮点数表示法(几乎所有现代编程语言所采用),这是一种二进制表示法,按照这个标准,最高位是符号位(0 代表正,1 代表负),剩下的用于表示大小。而对于零这个边界值 ,1000(-0) 和 0000(0)都是表示 0 ,这才有了正负零的区别。
也许你会好奇什么时候会产生 -0 呢?
Math.round(-0.1) // -0
那么我们又该如何在 === 结果为 true 的时候,区别 0 和 -0 得出正确的结果呢?我们可以这样做:
function eq(a, b){ if (a === b) return a !== 0 || 1 / a === 1 / b; return false; } console.log(eq(0, 0)) // true console.log(eq(0, -0)) // falseNaN
在本篇,我们认为 NaN 和 NaN 是相等的,那又该如何判断出 NaN 呢?
console.log(NaN === NaN); // false
利用 NaN 不等于自身的特性,我们可以区别出 NaN,那么这个 eq 函数又该怎么写呢?
function eq(a, b) { if (a !== a) return b !== b; } console.log(eq(NaN, NaN)); // trueeq 函数
现在,我们已经可以去写 eq 函数的第一版了。
// eq 第一版 // 用来过滤掉简单的类型比较,复杂的对象使用 deepEq 函数进行处理 function eq(a, b) { // === 结果为 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); };
也许你会好奇是不是少了一个 typeof b !== function?
试想如果我们添加上了这句,当 a 是基本类型,而 b 是函数的时候,就会进入 deepEq 函数,而去掉这一句,就会进入直接进入 false,实际上 基本类型和函数肯定是不会相等的,所以这样做代码又少,又可以让一种情况更早退出。
String 对象现在我们开始写 deepEq 函数,一个要处理的重大难题就是 "Curly" 和 new String("Curly") 如何判断成相等?
两者的类型都不一样呐!不信我们看 typeof 的操作结果:
console.log(typeof "Curly"); // string console.log(typeof new String("Curly")); // object
可是我们在《JavaScript专题之类型判断上》中还学习过更多的方法判断类型,比如 Object.prototype.toString:
var toString = Object.prototype.toString; toString.call("Curly"); // "[object String]" toString.call(new String("Curly")); // "[object String]"
神奇的是使用 toString 方法两者判断的结果却是一致的,可是就算知道了这一点,还是不知道如何判断字符串和字符串包装对象是相等的呢?
那我们利用隐式类型转换呢?
console.log("Curly" + "" === new String("Curly") + ""); // true
看来我们已经有了思路:如果 a 和 b 的 Object.prototype.toString的结果一致,并且都是"[object String]",那我们就使用 "" + a === "" + b 进行判断。
可是不止有 String 对象呐,Boolean、Number、RegExp、Date呢?
更多对象跟 String 同样的思路,利用隐式类型转换。
Boolean
var a = true; var b = new Boolean(true); console.log(+a === +b) // true
Date
var a = new Date(2009, 9, 25); var b = new Date(2009, 9, 25); console.log(+a === +b) // true
RegExp
var a = /a/i; var b = new RegExp(/a/i); console.log("" + a === "" + b) // true
Number
var a = 1; var b = new Number(1); console.log(+a === +b) // true
嗯哼?你确定 Number 能这么简单的判断?
var a = Number(NaN); var b = Number(NaN); console.log(+a === +b); // false
可是 a 和 b 应该被判断成 true 的呐~
那么我们就改成这样:
var a = Number(NaN); var b = Number(NaN); function eq() { // 判断 Number(NaN) Object(NaN) 等情况 if (+a !== +a) return +b !== +b; // 其他判断 ... } console.log(eq(a, b)); // truedeepEq 函数
现在我们可以写一点 deepEq 函数了。
var toString = Object.prototype.toString; function deepEq(a, b) { 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; } // 其他判断 }构造函数实例
我们看个例子:
function Person() { this.name = name; } function Animal() { this.name = name } var person = new Person("Kevin"); var animal = new Animal("Kevin"); eq(person, animal) // ???
虽然 person 和 animal 都是 {name: "Kevin"},但是 person 和 animal 属于不同构造函数的实例,为了做出区分,我们认为是不同的对象。
如果两个对象所属的构造函数对象不同,两个对象就一定不相等吗?
并不一定,我们再举个例子:
var attrs = Object.create(null); attrs.name = "Bob"; eq(attrs, {name: "Bob"}); // ???
尽管 attrs 没有原型,{name: "Bob"} 的构造函数是 Object,但是在实际应用中,只要他们有着相同的键值对,我们依然认为是相等。
从函数设计的角度来看,我们不应该让他们相等,但是从实践的角度,我们让他们相等,所以相等就是一件如此随意的事情吗?!对啊,我也在想:undersocre,你怎么能如此随意呢!!!
哎,吐槽完了,我们还是要接着写这个相等函数,我们可以先做个判断,对于不同构造函数下的实例直接返回 false。
function isFunction(obj) { return toString.call(obj) === "[object Function]" } function deepEq(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; } } // 下面还有好多判断 }数组相等
现在终于可以进入我们期待已久的数组和对象的判断,不过其实这个很简单,就是递归遍历一遍……
function deepEq(a, b) { // 再接着上面的内容 if (areArrays) { length = a.length; if (length !== b.length) return false; while (length--) { if (!eq(a[length], b[length])) 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]))) return false; } } return true; }循环引用
如果觉得这就结束了,简直是太天真,因为最难的部分才终于要开始,这个问题就是循环引用!
举个简单的例子:
a = {abc: null}; b = {abc: null}; a.abc = a; b.abc = b; eq(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; eq(a, b)
为了给大家演示下循环引用,大家可以把下面这段已经精简过的代码复制到浏览器中尝试:
// demo 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; function eq(a, b, aStack, bStack) { if (typeof a == "number") { return a === b; } return deepEq(a, b) } function deepEq(a, b) { var keys = Object.keys(a); var length = keys.length; var key; while (length--) { key = keys[length] // 这是为了让你看到代码其实一直在执行 console.log(a[key], b[key]) if (!eq(a[key], b[key])) return false; } return true; } eq(a, b)
嗯,以上的代码是死循环。
那么,我们又该如何解决这个问题呢?underscore 的思路是 eq 的时候,多传递两个参数为 aStack 和 bStack,用来储存 a 和 b 递归比较过程中的 a 和 b 的值,咋说的这么绕口呢?
我们直接看个精简的例子:
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; function eq(a, b, aStack, bStack) { if (typeof a == "number") { return a === b; } return deepEq(a, b, aStack, bStack) } function deepEq(a, b, aStack, bStack) { aStack = aStack || []; bStack = bStack || []; var length = aStack.length; while (length--) { if (aStack[length] === a) { return bStack[length] === b; } } aStack.push(a); bStack.push(b); var keys = Object.keys(a); var length = keys.length; var key; while (length--) { key = keys[length] console.log(a[key], b[key], aStack, bStack) if (!eq(a[key], b[key], aStack, bStack)) return false; } // aStack.pop(); // bStack.pop(); return true; } console.log(eq(a, b))
之所以注释掉 aStack.pop()和bStack.pop()这两句,是为了方便大家查看 aStack bStack的值。
最终的 eq 函数最终的代码如下:
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
真让人感叹一句:eq 不愧是 underscore 中实现代码行数最多的函数了!
专题系列JavaScript专题系列目录地址:https://github.com/mqyqingfeng/Blog。
JavaScript专题系列预计写二十篇左右,主要研究日常开发中一些功能点的实现,比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等,特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84789.html
摘要:专题系列共计篇,主要研究日常开发中一些功能点的实现,比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等,特点是研究专题之函数组合专题系列第十六篇,讲解函数组合,并且使用柯里化和函数组合实现模式需求我们需要写一个函数,输入,返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 ext...
摘要:写在前面专题系列是我写的第二个系列,第一个系列是深入系列。专题系列自月日发布第一篇文章,到月日发布最后一篇,感谢各位朋友的收藏点赞,鼓励指正。 写在前面 JavaScript 专题系列是我写的第二个系列,第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇,主要研究日常开发中一些功能点的实现,比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...
摘要:专题系列第十八篇,讲解递归和尾递归定义程序调用自身的编程技巧称为递归。然而非尾调用函数,就会创建多个执行上下文压入执行上下文栈。所以我们只用把阶乘函数改造成一个尾递归形式,就可以避免创建那么多的执行上下文。 JavaScript 专题系列第十八篇,讲解递归和尾递归 定义 程序调用自身的编程技巧称为递归(recursion)。 阶乘 以阶乘为例: function factorial(n...
摘要:专题系列第三篇,讲解各种数组去重方法,并且跟着写一个前言数组去重方法老生常谈,既然是常谈,我也来谈谈。它类似于数组,但是成员的值都是唯一的,没有重复的值。 JavaScript 专题系列第三篇,讲解各种数组去重方法,并且跟着 underscore 写一个 unique API 前言 数组去重方法老生常谈,既然是常谈,我也来谈谈。 双层循环 也许我们首先想到的是使用 indexOf 来循...
阅读 802·2021-09-22 15:18
阅读 1151·2021-09-09 09:33
阅读 2733·2019-08-30 10:56
阅读 1151·2019-08-29 16:30
阅读 1448·2019-08-29 13:02
阅读 1427·2019-08-26 13:55
阅读 1613·2019-08-26 13:41
阅读 1904·2019-08-26 11:56