防冲突

underscore 使用 作为函数的挂载对象，如果页面中已经存在了 对象，underscore 就会覆盖该对象，举个例子：

  1. var _ = {value: 1 }
  2.  
  3. // 引入 underscore 后
  4. console.log(_.value); // undefined

所以 underscore 提供了 noConflict 功能，可以放弃 underscore 的控制变量 _，返回 underscore 对象的引用。

  1. var _ = {value: 1 }
  2.  
  3. // 引入 underscore 后
  4.  
  5. // 放弃 "_"，使用 "$"
  6. var $ = _.noConflict();
  7.  
  8. console.log(_.value); // 1
  9.  
  10. // 使用 underscore 的方法
  11. $.each([1, 2, 3], alert);

那么 noConflict 函数是如何实现的呢？

首先，在 underscore 执行的时候，会储存之前的 对象，然后当执行 noConflict 函数的时候，再将之前储存的 对象赋给全局对象，最后返回 underscore 对象。这样，我们就可以利用返回的 underscore 对象使用 underscore 提供的各种方法。

  1. // 源码一开始的时候便储存之前的 _ 对象
  2. var previousUnderscore = root._;
  3.  
  4. _.noConflict = function() {
  5.     root._ = previousUnderscore;
  6.     return this;
  7. };

是的，就是这么简单。你可以轻松为你的函数库添加防冲突功能。

接下来我们看 underscore 中的一些功能函数。

_.identity

  1. _.identity = function(value) {
  2.     return value;
  3. };

看起来匪夷所思的一个函数，传入一个值，然后返回该值，为什么不直接使用该值呢？

还记得我们在《underscore 系列之内部函数 cb 和 optimizeCb》中接触过这个函数吗？

如果我们自己编写了一个 _.map 函数：

  1. _.map = function(arr, iteratee){
  2.     return arr.map(iteratee)
  3. }

然而当我们这样使用 .map([1, 2, 3]) 时便会报错，因为我们没有传入 iteratee 函数，然而使用 underscore 却没有问题，结果是返回一个相同的新数组，原因就在于当 iteratee 为 undefined 的时候，underscore 视为传入了 .identity 函数。就相当于：

  1. _.map = function(arr, iteratee){
  2.     if (!iteratee) iteratee = _.identity
  3.     return arr.map(iteratee)
  4. }

简而言之，如果我们想要复制一个数组：

  1. var clonedArr = [1, 2, 3].map(_.identity) // [1, 2, 3]

_.constant

  1. _.constant = function(value) {
  2.     return function() {
  3.         return value;
  4.     };
  5. };

该函数传入一个 value，然后返回一个返回该 value 的函数，这又有什么用呢？我们来看个 demo：

  1. var value = 1;
  2. var getValue = _.constant(value);
  3.  
  4. value = 2;
  5.  
  6. getValue(); // 1
  7. getValue(); // 1

这很容易让人想到 ES6 的 const，我一开始以为就是用来表示 ES6 的 const ，后来看了这个函数起源的 issue，才发现并非如此，它其实像下面的 _.noop 函数一样可以作为默认函数使用。

举个例子：

  1. _.select(collection, filterFunction || function() { return true; })

我们根据 filterFunction 筛选 collection 中符合条件的元素，如果没有传 filterFunction，我们就返回所有的元素，如果有 _.constant 函数，我们可以将其简化为：

  1. _.select(collection, filterFunction || _.constant(true))

尽管没有什么大的改变，但是语义更加明确。

_.noop

  1. _.noop = function(){};

一个空函数，看起来依旧没什么用……

noop 函数可以用于作为默认值，这样就可以省去是否存在的判断，举个例子：

  1. // 不使用 noop
  2. function a(value, callback){
  3.     // 每次使用 callback 都要判断一次
  4.     _.isFunction(callback) && callback()
  5. }
  6.  
  7. // 使用 noop
  8. function a(value, callback) {
  9.     // 判断一次
  10.     if(!_.isFunction(callback)) callback = _.noop;
  11.  
  12.     // 以后都可以直接使用
  13.     callback()
  14. }

deepGet

  1. var deepGet = function(obj, path) {
  2.     var length = path.length;
  3.     for (var i = 0; i < length; i++) {
  4.         if (obj == null) return void 0;
  5.         obj = obj[path[i]];
  6.     }
  7.     return length ? obj : void 0;
  8. };

deepGet 用于获得对象深层次的值。举个例子：

  1. var obj = { 
  2.     value: { 
  3.         deepValue: 2
  4.     } 
  5. }
  6.  
  7. console.log(deepGet(obj, ['value', 'deepValue']))

使用这个函数，可以避免深层次取值时，因为没有其中的一个属性，导致的报错。

shallowProperty

  1. var shallowProperty = function(key) {
  2.     return function(obj) {
  3.       return obj == null ? void 0 : obj[key];
  4.     };
  5. };

shallowProperty 也是用于获取对象的属性，也许你会好奇在开发中，直接使用. 不就可以获取对象的属性了，为什么还要写成这样呢？我们来举个例子：

  1. // 获取 arr 所有元素的 name 属性
  2. var arr = [
  3.     {
  4.         value: 1,
  5.         name: 'Kevin'
  6.     },
  7.     {
  8.         value: 2,
  9.         name: 'Daisy'
  10.     }
  11. ]
  12.  
  13. // 普通方式
  14. var names = arr.map(function(item){
  15.     return item.name;
  16. })
  17.  
  18. // 使用 shallowProperty
  19. var names = arr.map(shallowProperty('name'))

_.property

  1. _.property = function(path) {
  2.     if (!_.isArray(path)) {
  3.       return shallowProperty(path);
  4.     }
  5.     return function(obj) {
  6.       return deepGet(obj, path);
  7.     };
  8. };

_.property 结合了 deepGet 和 shallowProperty，可以获取元素深层次的值。上面一个例子也可以写成：

  1. var names = arr.map(_.property('name'))

_.propertyOf

  1. _.propertyOf = function(obj) {
  2.     if (obj == null) {
  3.         return function(){};
  4.     }
  5.     return function(path) {
  6.         return !Array.isArray(path) ? obj[path] : deepGet(obj, path);
  7.     };
  8. };

_.property 返回一个函数，这个函数返回任何传入的对象的指定属性。

.propertyOf 与 .property 相反。需要一个对象，并返回一个函数，这个函数将返回一个提供的属性的值。

我们写个例子：

  1. // 获取 person 对象的所有属性值
  2. var person = {
  3.     name: 'Kevin',
  4.     age: '18'
  5. };
  6.  
  7. // 普通方式
  8. var values = Object.keys(person).map((key) => person[key]); // ["Kevin", "18"]
  9.  
  10. // 使用 _.propertyOf
  11. var values = Object.keys(person).map(_.propertyOf(person)); // ["Kevin", "18"

_.random

返回一个 min 和 max 之间的随机整数。如果你只传递一个参数，那么将返回 0 和这个参数之间的整数。

  1. _.random = function(min, max) {
  2.     if (max == null) {
  3.       max = min;
  4.       min = 0;
  5.     }
  6.     return min + Math.floor(Math.random() * (max - min + 1));
  7.   };

注意：该随机值有可能是 min 或 max。

underscore 系列

underscore 系列目录地址：https://github.com/mqyqingfeng/Blog。

underscore 系列预计写八篇左右，重点介绍 underscore 中的代码架构、链式调用、内部函数、模板引擎等内容，旨在帮助大家阅读源码，以及写出自己的 undercore。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。