摘要：最近开始看源码，并将源码解读放在了我的计划中。后文中均假设比较的两个参数为和。，如果和均是类型或者类型，我们可以用来判断是否。
Why underscore
最近开始看 underscore.js 源码，并将 underscore.js 源码解读 放在了我的 2016 计划中。
阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及 API 设计的原理（向后兼容）。
之后楼主会写一系列的文章跟大家分享在源码阅读中学习到的知识。
underscore-1.8.3 源码解读项目地址 https://github.com/hanzichi/underscore-analysis
underscore-1.8.3 源码全文注释 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js
underscore-1.8.3 源码解读系列文章 https://github.com/hanzichi/underscore-analysis/issues
欢迎围观~ （如果有兴趣，欢迎 star & watch~）您的关注是楼主继续写作的动力
_.isEqual本文跟大家聊聊 JavaScript 中如何判断两个参数 "相同"，即 underscore 源码中的 _.isEqual 方法。这个方法可以说是 underscore 源码中实现最复杂的方法（用了百来行），几乎没有之一。
那么，我说的 "相同" 到底是什么意思？举个栗子，1 和 new Number(1) 被认为是 equal，[1] 和 [1] 被认为是 equal（尽管它们的引用并不相同），当然，两个引用相同的对象肯定是 equal 的了。
那么，如何设计这个 _.isEqual 函数呢？我们跟着 underscore 源码，一步步来看它的实现。后文中均假设比较的两个参数为 a 和 b。
首先我们判断 a === b，为 true 的情况有两种，其一是 a 和 b 都是基本类型，那么就是两个基本类型的值相同，其二就是两个引用类型，那么就是引用类型的引用相同。那么如果 a === b 为 true，是否就是说 a 和 b 是 equal 的呢？事实上，99% 的情况是这样的，还得考虑 0 和 -0 这个 special case，0 === -0 为 true，而 0 和 -0 被认为是 unequal，至于原因，可以参考 http://wiki.ecmascript.org/doku.php?id=harmony:egal。
这部分代码可以这样表示：
// 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). // a === b 时 // 需要注意 `0 === -0` 这个 special case // 0 和 -0 不相同 // 至于原因可以参考上面的链接 if (a === b) return a !== 0 || 1 / a === 1 / b;
接下去的情况，也就是 a !== b 的情况了。
如果 a 和 b 中有一个是 null 或者 undefined，那么可以特判下，不用继续比较了。源码实现：
// A strict comparison is necessary because `null == undefined`. // 如果 a 和 b 有一个为 null（或者 undefined） // 判断 a === b if (a == null || b == null) return a === b;
个人觉得这里写的有点多余，因为根据上面的判断过滤，a === b 肯定是返回 false 的。
ok，我们继续，接下来我们可以先根据 a 和 b 的类型来判断，如果类型不一样，那么就没必要继续判断了。如何获取变量类型？没错，就是神奇的 Object.prototype.toString.call！
如果类型是 RegExp 和 String，我们可以将 a 和 b 分别转为字符串进行比较（如果是 String 就已经是字符串了），举个栗子：
var a = /a/;
var b = new RegExp("a");
console.log(_.isEqual(a, b)); // => true
其实它在 underscore 内部是这样判断的：
var a = /a/;
var b = new RegExp("a");
var _a = "" + a; // => /a/
var _b = "" + b; // => /a/
console.log(_a === _b); // => true
如果是 Number 类型呢？这里又有个 special case，就是 NaN！这里规定，NaN 仅和 NaN 相同，与别的 Number 类型均 unequal。这里我们将引用类型均转为基本类型，看如下代码：
var a = new Number(1); console.log(+a); // 1
没错，加个 + 就解决了，其他的不难理解，都在注释里了。
// `NaN`s are equivalent, but non-reflexive. // Object(NaN) is equivalent to NaN // 如果 +a !== +a // 那么 a 就是 NaN // 判断 b 是否也是 NaN 即可 if (+a !== +a) return +b !== +b; // An `egal` comparison is performed for other numeric values. // 排除了 NaN 干扰 // 还要考虑 0 的干扰 // 用 +a 将 Number() 形式转为基本类型 // 如果 a 为 0，判断 1 / +a === 1 / b // 否则判断 +a === +b return +a === 0 ? 1 / +a === 1 / b : +a === +b; // 如果 a 为 Number 类型 // 要注意 NaN 这个 special number // NaN 和 NaN 被认为 equal
接下来我们看 Date 和 Boolean 两个类型。跟 Number 类型相似，它们也可以用 + 转化为基本类型的数字！看下面代码：
var a = new Date(); var b = true; var c = new Boolean(false); console.log(+a); // 1464180857222 console.log(+b); // 1 console.log(+c); // 0
非常简单，其实 +new Date() （或者也可以写成 +new Date）获取的正是当前时间和 1970 年 1 月 1 日 0 点的毫秒数（millisecond），可能你听说过时间戳，其实时间戳就是这个数据除以 1000，也就是秒数。在用 canvas 做动画时，我经常用 +new Date 来当时间戳。
so，如果 a 和 b 均是 Date 类型或者 Boolean 类型，我们可以用 +a === +b 来判断是否 equal。
程序接着走，我们接着看，似乎还有两类重要的类型没有判断？没错，Array 和 Object！underscore 对此采用递归方法展开来比较。
还是举个栗子吧，举例比较直观。
假设 a，b 如下：
var a = {name: "hanzichi", loveCity: [{cityName: "hangzhou", province: "zhenjiang"}], age: 30};
var b = {name: "hanzichi", loveCity: [{cityName: "hangzhou", province: "zhenjiang"}], age: 25};
首先 a，b 是对象，我们可以分别比较其键值对，如果有一个键值对不同（或者说一个键值对 a 和 b 有一个没有），则 a 和 b unequal。如果是数组呢？那就一个一个元素比较喽。因为数组可能嵌套对象，对象的 value 又可能是数组，所以这里用了递归。
还是以上面的例子，我们可以把它拆成三次比较，分别比较三个 key 的 value 值是否相同。对于 loveCity 这个 key 的 value，因为其 value 又是个数组，所以我们将这个 value 传入比较函数，通过这个比较的结果，来判断最后的比较结果。递归就是这样，可以将大的东西，拆成一个个小的，根据小的结果，来汇总得到大的结果。
最后，给出代码位置。关于 _.isEqual 方法的源码，大家可以参考 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L1094-L1190
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79563.html
摘要：今天要讲的是，如何在数组中寻找元素，对应中的，，，以及方法。如果往一个有序数组中插入元素，使得数组继续保持有序，那么这个插入位置是这就是这个方法的作用，有序，很显然用二分查找即可。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...） 最近开始看 underscore.js 源码，并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一...
摘要：最近开始看源码，并将源码解读放在了我的计划中。今天就跟大家聊一聊中一些常用类型检查方法，以及一些工具类的判断方法。用是否含有属性来判断工具类判断方法接下来看下一些常用的工具类判断方法。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话...
摘要：而数组元素去重是基于运算符的。而如果有迭代函数，则计算传入迭代函数后的值，对值去重，调用方法，而该方法的核心就是调用方法，和我们上面说的方法一异曲同工。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...） 最近开始看 underscore.js 源码，并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像...
摘要：最近开始看源码，并将源码解读放在了我的计划中。像和使用内置构造函数所创建的对象都会继承自和的不可枚举属性，例如的方法或者的方法。循环将迭代对象的所有可枚举属性和从它的构造函数的继承而来的包括被覆盖的内建属性。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一些著名框架类库的源码...
摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...
阅读 4269·2021-09-26 10:11
阅读 2665·2021-07-28 00:37
阅读 3222·2019-08-29 15:29
阅读 1177·2019-08-29 15:23
阅读 3123·2019-08-26 18:37
阅读 2467·2019-08-26 10:37
阅读 596·2019-08-23 17:04
阅读 2346·2019-08-23 13:44
