首页 > 代码库 > underscore学习总结,献给晦涩的函数式编程之美

underscore学习总结,献给晦涩的函数式编程之美

underscore.js 越看越美,如果在项目中不断尝试underscore的方法,将会事半功倍

underscore 体现出 functionial javascript的思想,采用函数式编程的思路来解决日常生活中的一些 util的小问题

javascript 属于弱语言,对象类型用得最多的就是 array和object,underscore是基于js 封装一些对象和数组方法的库,使用起来非常便捷

这里推荐一本函数式编程的书,Functionial Javascript ,这本书对于函数式编程艺术表现形式发挥得淋漓精致,实在是越看越美

collection function 部分强烈建议看完,后半部分的array function有点水,想复习的可以看看,不想看的就别看了,略水(其中数组的flatten方法建议还是看下)

Functional Javascript

源码一开始就给出了非常实用的 创建 通用回调函数的方法

_.iteratee = function(value, context, argCount) {    if (value =http://www.mamicode.com/= null) return _.identity;    if (_.isFunction(value)) return createCallback(value, context, argCount);    if (_.isObject(value)) return _.matches(value);    return _.property(value);  };

iteratee :产生通用回调函数callback的内部入口

1、如果 value是 null 就直接返回 identity函数

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

看似没用的identity方法,在函数式编程中属于一个通用的接口(该想法纯属个人理解,如有更好的理解方式,欢迎告知)

2、如果value是 函数

即返回一个 由 creatCallback 创建的 callback

var createCallback = function(func, context, argCount) {    if (context === void 0) return func;    switch (argCount == null ? 3 : argCount) {      case 1: return function(value) {        return func.call(context, value);      };      case 2: return function(value, other) {        return func.call(context, value, other);      };      case 3: return function(value, index, collection) {        return func.call(context, value, index, collection);      };      case 4: return function(accumulator, value, index, collection) {        return func.call(context, accumulator, value, index, collection);      };    }    return function() {      return func.apply(context, arguments);    }; };

 1、如果上下文是 void 0(查资料void 0 实际就是等于undefined),那么直接返回 func

 2、argCount 核心方法,underscore 中很多的方法的callback都是基于 这个switch实现的

譬如 map,each,find,filter ,argCount 对应的是3,对应的callback的参数为 value, index, list

tips:这里要讲讲这3个参数,参数名字不是随便起的,是有意义的

value代表一组list中的一个值,index代表索引值,list(collection)代表那个list集合数组或对象,理解这些变量的含义对于理解作者的程序有很大的帮助_each:

_.each = _.forEach = function(obj, iteratee, context) {    if (obj == null) return obj;    iteratee = createCallback(iteratee, context);    var i, length = obj.length;    if (length === +length) {      for (i = 0; i < length; i++) {        iteratee(obj[i], i, obj);      }    } else {      var keys = _.keys(obj);      for (i = 0, length = keys.length; i < length; i++) {        iteratee(obj[keys[i]], keys[i], obj);      }    }    return obj;  };

each 方法,argCount为undefined,那么undefined==null,那么他就是 argCount为3的回调函数

这里有2个分支,如果是数组,如果是对象,采用内部方法keys来实现,underscore很多的方法都是基于这个判断

_.keys = function(obj) {    if (!_.isObject(obj)) return [];    if (nativeKeys) return nativeKeys(obj);    var keys = [];    for (var key in obj) if (_.has(obj, key)) keys.push(key);    return keys; };

如果对象不存在,那么返回空数组,如果存在内部keys方法,则使用内部keys方法

那么什么是内部keys方法呢   nativeKeys = Object.keys,

由于现代浏览器支持 ecmascript5的规范,浏览器本身支持keys方法的话,则直接使用浏览器内部方法,加速执行效率

_.has方法,判断是否是对象的自有属性(hasOwnProperty),默认不使用继承的prototype的属性

最后返回数组keys,这里需要注意的是,为了接口的一致性,数组和对象经过处理之后全部可以使用相同的方法接口的 数组

_.map :

map方法并没有特殊的地方,只是在内部创建了一个新的result数组,然后逐个编辑数组对象func求值后插入result数组,最终返回这个数组

_.find:

_.find = _.detect = function(obj, predicate, context) {    var result;    predicate = _.iteratee(predicate, context);    _.some(obj, function(value, index, list) {      if (predicate(value, index, list)) {        result = value;        return true;      }    });    return result;  };
_.some = _.any = function(obj, predicate, context) {    if (obj == null) return false;    predicate = _.iteratee(predicate, context);    var keys = obj.length !== +obj.length && _.keys(obj),        length = (keys || obj).length,        index, currentKey;    for (index = 0; index < length; index++) {      currentKey = keys ? keys[index] : index;      if (predicate(obj[currentKey], currentKey, obj)) return true;    }    return false; };

这里需要提一下的是这个predicate,什么是predicate ,predicate是一个函数,返回 true or false,这对于查找和判断非常有用

some是如果有一个 值满足 predicate 那么就是返回true,some结合 find方法 可以找到 第一个满足 predicate的 值

相当于 sql中的 limit one

_.filter:

内部使用 each遍历+predicate判断的方法 ,创建 result 数组,然后符合predicate的true值就插入push返回,没啥多说的

_.reject:

filter的 reverse方法,返回的result 是 false的情况

_.every:

some函数的升级版本,如果所有的集合元素和符合predicate,那么返回true,如果有一个不符合条件就返回false

argCount=4的情况

_reduce:

_.reduce = _.foldl = _.inject = function(obj, iteratee, memo, context) {    if (obj == null) obj = [];    iteratee = createCallback(iteratee, context, 4);    var keys = obj.length !== +obj.length && _.keys(obj),        length = (keys || obj).length,        index = 0, currentKey;    if (arguments.length < 3) {      if (!length) throw new TypeError(reduceError);      memo = obj[keys ? keys[index++] : index++];    }    for (; index < length; index++) {      currentKey = keys ? keys[index] : index;      memo = iteratee(memo, obj[currentKey], currentKey, obj);    }    return memo; };

这里多了一个参数 memo,对应于 createCallback中就是 accumulator

accumulator顾名思义就是一个累加器,这里有一个分支,如果累加器不存在,默认取数组的第一个值作为memo的初始值

然后循环执行iteratee后,返回最终的memo

_reduceRight

reduceRight的内部实现原理和reduce一致,只是循环的顺序从数组最后一个开始, while (index--)  的方式实现

相关扩展函数

_.pluck = function(obj, key) {    return _.map(obj, _.property(key)); };
_.where = function(obj, attrs) {    return _.filter(obj, _.matches(attrs));  };
_.findWhere = function(obj, attrs) {    return _.find(obj, _.matches(attrs));  };

这里开始体现函数式编程的强大优美之处,扩展现有的函数,实现新的函数,这就是函数式编程,

pluck基于 map,map使用property

where基于filter,filter使用matches,matches使用pairs,pairs使用keys,一切皆是函数

_.property,_matches属于基础函数

_.property = function(key) {    return function(obj) {      return obj[key];    };  };

propery是锁定了key值,可以被map用来获取每个元素指定的key值,这里是用到js中强大的闭包功能

 _.matches = function(attrs) {    var pairs = _.pairs(attrs), length = pairs.length;    return function(obj) {      if (obj == null) return !length;      obj = new Object(obj);      for (var i = 0; i < length; i++) {        var pair = pairs[i], key = pair[0];        if (pair[1] !== obj[key] || !(key in obj)) return false;      }      return true;    }; };
_.pairs = function(obj) {    var keys = _.keys(obj);    var length = keys.length;    var pairs = Array(length);    for (var i = 0; i < length; i++) {      pairs[i] = [keys[i], obj[keys[i]]];    }    return pairs; };

pairs是一个 数组,每一个元素又是一个数组,每个数组有2个值,index 0为key值,index 1为 value值

这里要注意 matches 返回的也是一个function,这个function是一个predicate,这里再次强调predicate的重要性,他的重要性就是这个思想,返回true or false

用来 筛选 结果,一个会经常使用的功能。

下面说一说其他的 collection function ,由于缺少关联性,所以就逐一列举说明

_.contains = _.include = function(obj, target) {    if (obj == null) return false;    if (obj.length !== +obj.length) obj = _.values(obj);    return _.indexOf(obj, target) >= 0; };

如果说keys是返回对象的key值数组的话,那么values函数就是返回对象的 value值数组,用法基本是一致的

_indexOf:

_.indexOf = function(array, item, isSorted) {    if (array == null) return -1;    var i = 0, length = array.length;    if (isSorted) {      if (typeof isSorted == ‘number‘) {        i = isSorted < 0 ? Math.max(0, length + isSorted) : isSorted;      } else {        i = _.sortedIndex(array, item);        return array[i] === item ? i : -1;      }    }    for (; i < length; i++) if (array[i] === item) return i;    return -1; };

这里的 isSorted有3个分支

1. 为undefined, 这个情况说明 查找的数组不需要跳过几个元素进行查找,从下标为0开始查找

2.为 数值,这个跟undefined严格来说是属于一个分支,从下表为 isSorted 开始查找,如果是负值,先求max再循环查找

3.为 true ,那么使用 binary search (二进制查找,本人算法需要勤加修炼,如翻译不对,欢迎拍砖)

_.sortedIndex = function(array, obj, iteratee, context) {    iteratee = _.iteratee(iteratee, context, 1);    var value =http://www.mamicode.com/ iteratee(obj);    var low = 0, high = array.length;    while (low < high) {      var mid = low + high >>> 1;      if (iteratee(array[mid]) < value) low = mid + 1; else high = mid;    }    return low; };

这里一起过一遍这个算法 low代表 0, high 代表最后一个元素  >>>运算符相当于 除以2

mid是 高位的一半+低位

如果 中间mid 小于这个 value,那么 低位就要变成 mid+1位 ,然后继续循环,让high位除以2

如果中间mid大于这个value,那么高位high变成mid位,继续循环

直到low位大于high位

此时就找到了 low 这个 数组 索引 index的值,如果这个index对应的值跟item的值相同,则返回相关的索引

_invoke

_.invoke = function(obj, method) {    var args = slice.call(arguments, 2);    var isFunc = _.isFunction(method);    return _.map(obj, function(value) {      return (isFunc ? method : value[method]).apply(value, args);    }); };

使用指定的上下文 来触发函数的执行

method可以使 函数,或者是字符串

_max 和 _min 函数

2种情况,有判断函数和没有判断函数

有判断函数就求值判断,没有就遍历数组或对象,然后使用内置方法比较返回

_shuffle

_.random = function(min, max) {    if (max == null) {      max = min;      min = 0;    }    return min + Math.floor(Math.random() * (max - min + 1)); };
_.shuffle = function(obj) {    var set = obj && obj.length === +obj.length ? obj : _.values(obj);    var length = set.length;    var shuffled = Array(length);    for (var index = 0, rand; index < length; index++) {      rand = _.random(0, index);      if (rand !== index) shuffled[index] = shuffled[rand];      shuffled[rand] = set[index];    }    return shuffled; };

这个函数其实没有什么特别的作用,就是重新排列集合中的元素

这里的算法还是比较精妙的,一开始没看懂,看几遍又懂了,过几天再看,又晦涩难懂了,有一种被智商压制的感觉

这里的精妙之处就在于 _.random(0,index)

第一次进入循环,index为0,那么random值肯定是0   shuffled[0]=set[0];

第二次进入循环  index为 1  那么 random值为0或1  

什么情况会出现 rand !==index , 那么 index为 1, rand=0 ,这个时候 shuffled[1]=shuffled[0],  shuffled[0]=set[1],互换了位置

如果 rand!==index不成立,那么 shuffed[1]=set[1];

下面看第三次循环  index为2 ,random值为 0,1,2 ,他要shuffle几次,还是一次,原理就是index互换

这个shuffle每次只换了一个元素,效率奇高,而且也做到了shuffle 可能存在的所有结果,非常高效,不管你有几个元素,每次shuffle只做了一个切换,

自己写不出这种感觉有木有,实在是牛x。

 _.sample

_.sample = function(obj, n, guard) {    if (n == null || guard) {      if (obj.length !== +obj.length) obj = _.values(obj);      return obj[_.random(obj.length - 1)];    }    return _.shuffle(obj).slice(0, Math.max(0, n)); };

guard官方说是一个保护值,如果有guard,那么无论n给多少值,都是取一个值

多个值的情况使用了shuffle函数

_.sortBy

_.sortBy = function(obj, iteratee, context) {    iteratee = _.iteratee(iteratee, context);    return _.pluck(_.map(obj, function(value, index, list) {      return {        value: value,        index: index,        criteria: iteratee(value, index, list)      };    }).sort(function(left, right) {      var a = left.criteria;      var b = right.criteria;      if (a !== b) {        if (a > b || a === void 0) return 1;        if (a < b || b === void 0) return -1;      }      return left.index - right.index;    }), ‘value‘);  };

乍一看比较吓人,现在肢解一下

iteratee 回调函数

pluck 接受2个参数,一个集合,一个 key值,这里的key值就是"value"

map 返回的是一个 数组 集合对象,每个对象包含3个 键值对,然后使用 含有 sort  function 方法的进行最后返回一个 经过排序的 values 数组,分解之后思路就比较清晰了。

_.toArray:

_.toArray = function(obj) {    if (!obj) return [];    if (_.isArray(obj)) return slice.call(obj);    if (obj.length === +obj.length) return _.map(obj, _.identity);    return _.values(obj); };

官方的解释是可以将任何 可迭代的集合对象转换为数组

obj.length === +obj.length  可以表示一个带有length属性的伪数组对象

关于伪数组对象的概念,欢迎告知更为精确的理解方式

_.size:

_.size = function(obj) {    if (obj == null) return 0;    return obj.length === +obj.length ? obj.length : _.keys(obj).length; };

返回集合对象或者数组的长度

_.partition

_.partition = function(obj, predicate, context) {    predicate = _.iteratee(predicate, context);    var pass = [], fail = [];    _.each(obj, function(value, key, obj) {      (predicate(value, key, obj) ? pass : fail).push(value);    });    return [pass, fail]; };

从英文来看是分区的概念,并没有什么特别之处,就是将filter和reject 2个函数的结果放入到一个数组中去,true的数组叫pass,fail的数组为fail

最后说一下集合函数中又一个重要的group函数

内部groupby 函数

var group = function(behavior) {    return function(obj, iteratee, context) {      var result = {};      iteratee = _.iteratee(iteratee, context);      _.each(obj, function(value, index) {        var key = iteratee(value, index, obj);        behavior(result, value, key);      });      return result;    }; };

 behavior本身是一个函数,可以理解为group 传递一个函数,然后返回一个函数,返回的函数将使用到这个behavior函数

这个包含3个group使用到的函数

_.groupBy = group(function(result, value, key) {    if (_.has(result, key)) result[key].push(value); else result[key] = [value];  });
_.indexBy = group(function(result, value, key) {    result[key] = value;  });
_.countBy = group(function(result, value, key) {    if (_.has(result, key)) result[key]++; else result[key] = 1;  });

groupBy:

groupBy的 key值其实就是 iteratee 函数的 return 结果值,每个分组由一个数组保存,最后的result根据group的定义可知,是一个map对象

然后根据 结果值 分组

indexBy:

默认传入的集合中的元素是唯一的

countBy:

countBy的结果是 进行统计,跟 result push不同,但是原理是相同的

自此所有的集合函数都已经复习完毕

******************华丽的分割线*************************

Array Functions  数组函数

下面都是一些工具函数,没啥新意,就当一起复习下吧

_first:

_.first = _.head = _.take = function(array, n, guard) {    if (array == null) return void 0;    if (n == null || guard) return array[0];    if (n < 0) return [];    return slice.call(array, 0, n); };

返回数组的第一个元素,或者slice(0,n)个元素,如果n为负值,那么会返回空数组,如果存在guard值为true,无论n为多少都只会返回第一个元素

_.initial:

_.initial = function(array, n, guard) {    return slice.call(array, 0, Math.max(0, array.length - (n == null || guard ? 1 : n))); };

返回数组中 length-n个元素,如果guard值存在,就剔除最后一个元素返回

_.last:

_.last = function(array, n, guard) {    if (array == null) return void 0;    if (n == null || guard) return array[array.length - 1];    return slice.call(array, Math.max(array.length - n, 0)); };

返回数组的最后一个元素,或者slice(n)到数组结尾个元素,如果n为负值,那么会返回全数组,如果存在guard值为true,无论n为多少都只会返回最后一个元素

_rest:

_.rest = _.tail = _.drop = function(array, n, guard) {    return slice.call(array, n == null || guard ? 1 : n);  };

剔除数组中的第一个元素,如果n存在,返回n到数组结尾的数组,如果guard存在,剔除第一个数组中的元素返回

_.compact

_.compact = function(array) {    return _.filter(array, _.identity); };

剔除 所以会判断为false的 数组值,内部使用filter实现,这里就能看出identity函数的作用了

下面是比较重要的一个flatten 函数,先来看内部实现

var flatten = function(input, shallow, strict, output) {    if (shallow && _.every(input, _.isArray)) {      return concat.apply(output, input);    }    for (var i = 0, length = input.length; i < length; i++) {      var value =http://www.mamicode.com/ input[i];      if (!_.isArray(value) && !_.isArguments(value)) {        if (!strict) output.push(value);      } else if (shallow) {        push.apply(output, value);      } else {        flatten(value, shallow, strict, output);      }    }    return output; };

shallow 控制是否是深度 迭代

譬如 数组 a=[1,2,[2,3,[1,2]]]

shallow=true的情况

flatten之后的结果为 [1,2,2,3,[1,2]]

shallow 为假的情况

flatten[1,2,2,3,1,2]

strict 控制是否 字符串也可以 作为 数组来 扁平化(flatten)

具体的实现函数如下:

_.flatten

 _.flatten = function(array, shallow) {    return flatten(array, shallow, false, []); };

flatten 函数默认 strict为false

_.difference

_.difference = function(array) {    var rest = flatten(slice.call(arguments, 1), true, true, []);    return _.filter(array, function(value){      return !_.contains(rest, value);    }); };

可以看到这里使用了filter函数,内部又使用了contains函数,这里还要注意的是 strict为true,那么如果你传入字符串的话,是没有用,不会去重

_.difference([2,3],"23",[2]);

result: [3]

_.union

_.union = function() {    return _.uniq(flatten(arguments, true, true, [])); };
_.uniq = _.unique = function(array, isSorted, iteratee, context) {    if (array == null) return [];    if (!_.isBoolean(isSorted)) {      context = iteratee;      iteratee = isSorted;      isSorted = false;    }    if (iteratee != null) iteratee = _.iteratee(iteratee, context);    var result = [];    var seen = [];    for (var i = 0, length = array.length; i < length; i++) {      var value =http://www.mamicode.com/ array[i];      if (isSorted) {        if (!i || seen !== value) result.push(value);        seen = value;      } else if (iteratee) {        var computed = iteratee(value, i, array);        if (_.indexOf(seen, computed) < 0) {          seen.push(computed);          result.push(value);        }      } else if (_.indexOf(result, value) < 0) {        result.push(value);      }    }    return result;  };
if (!_.isBoolean(isSorted)) {      context = iteratee;      iteratee = isSorted;      isSorted = false;}

这一段代码是典型的修正变量的代码,在jquery的实现里面大量的出现

函数传入的参数非常灵活

如果isSorted函数不传递的话

那么 isSorted这个位置的参数值,实际是 iteratee函数

那么每个参数都需要进行一次修正

context=iteratee 3->4

iteratee=isSorted 2->3

isSorted=false false->2

isSorted 由用户自行判断是否是已经排序过的数组,如果是已经排序过的数组,内部使用简洁快速的方法进行排序

如果iteratee 自定义函数存在,那么 执行运算后判断是否是新值

如果不存在,直接取 array中元素的值进行 indexOf的判断

_.without

_.without = function(array) {    return _.difference(array, slice.call(arguments, 1));  };

difference的扩展方法,用法基本于difference一致

_.intersection

_.intersection = function(array) {    if (array == null) return [];    var result = [];    var argsLength = arguments.length;    for (var i = 0, length = array.length; i < length; i++) {      var item = array[i];      if (_.contains(result, item)) continue;      for (var j = 1; j < argsLength; j++) {        if (!_.contains(arguments[j], item)) break;      }      if (j === argsLength) result.push(item);    }    return result; };

本方法不支持深层递归

a=[[1,2],3]

b=[[1,2],3]

_.intersect(a,b)  result=> [3]

根据arguments的长度来判断,只要一个元素不在任何一个数组中,那么就剔除这个元素,该元素的引用地址必须相同

如果对象的引用地址相同,则返回那个共有的对象

a={}  b=a

arr1=[a,1]

arr2=[b,2]

_.intersect(a,b)  result=> {}

_.zip

_.zip = function(array) {    if (array == null) return [];    var length = _.max(arguments, ‘length‘).length;    var results = Array(length);    for (var i = 0; i < length; i++) {      results[i] = _.pluck(arguments, i);    }    return results; };

根据 数组长度的最大值判断 新的数组中每个一个元素数组的长度, max内部是使用_.property函数获取了length这个属性

Example

_.zip([1,2,3],[2,3],[3]);

result [[1,2,3],[2,3,undefined],[3,undefined,undefined]]

一般使用的方法为 每个数组长度都是相同的

_.object

_.object = function(list, values) {    if (list == null) return {};    var result = {};    for (var i = 0, length = list.length; i < length; i++) {      if (values) {        result[list[i]] = values[i];      } else {        result[list[i][0]] = list[i][1];      }    }    return result; };

如果values存在 将 2个数组 结合为一个对象

如果values不存在 则使用list中每一个item[0]作为 key值,item[1] 作为 value值

最后返回这个合成的对象

_.lastIndexOf

_.lastIndexOf = function(array, item, from) {    if (array == null) return -1;    var idx = array.length;    if (typeof from == ‘number‘) {      idx = from < 0 ? idx + from + 1 : Math.min(idx, from + 1);    }    while (--idx >= 0) if (array[idx] === item) return idx;    return -1; };

并没有什么特别的地方,判断了小于0和大于边界的情况,一如既往的向前遍历 使用 while循环

_.range:

_.range = function(start, stop, step) {    if (arguments.length <= 1) {      stop = start || 0;      start = 0;    }    step = step || 1;    var length = Math.max(Math.ceil((stop - start) / step), 0);    var range = Array(length);    for (var idx = 0; idx < length; idx++, start += step) {      range[idx] = start;    }    return range; };

如果只有一个参数, start的值给到stop, start 默认从0开始

step如果不存在,就使用1

length值代表每一个step的元素个数

实际的效果就是 给到一个 基于step 断点的效果

_.range(1,30,4)

result=>[1,5,9,13,17,21,25,29]

自此 数组方法也已经复习完毕,写的有点累,相关的 oop、util Function、object function、函数式函数,将在以后进行复习

underscore学习总结,献给晦涩的函数式编程之美