星空网 > 软件开发 > Java

underscore.js源码解析(四)

没看过前几篇的可以猛戳这里:

underscore.js源码解析(一)

underscore.js源码解析(二)

underscore.js源码解析(三)

underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js

本文解析的underscore.js版本是1.8.3

 _.pluck

1  _.pluck = function(obj, key) {2   return _.map(obj, _.property(key));3  };

 _.pluck的作用就是获取数据对象中的相应属性,然后存在数组当中返回

_.where

1  _.where = function(obj, attrs) {2   return _.filter(obj, _.matcher(attrs));3  };

_.where就是遍历数据,然后返回所有满足条件的键值对,存在数组当中

_.findWhere

1  _.findWhere = function(obj, attrs) {2   return _.find(obj, _.matcher(attrs));3  }

_.findWhere和where不同的是只返回第一个满足条件的

_.max

 1  _.max = function(obj, iteratee, context) { 2   var result = -Infinity, lastComputed = -Infinity, 3     value, computed; 4   //如果没有iteratee 5   if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) { 6    obj = isArrayLike(obj) ? obj : _.values(obj); 7    //循环遍历求出最大值 8    for (var i = 0, length = obj.length; i < length; i++) { 9     value = obj[i];10     if (value != null && value > result) {11      result = value;12     }13    }14   } else {15   //有iteratte的情况16    iteratee = cb(iteratee, context);17    _.each(obj, function(v, index, list) {18     //迭代出的最大值结果19     computed = iteratee(v, index, list);20     if (computed > lastComputed || computed === -Infinity && result === -Infinity) {21      result = v;22      lastComputed = computed;23     }24    });25   }26   return result;27  };

获取obj中的最大值

_.min

underscore.js源码解析(四)underscore.js源码解析(四)
 1  _.min = function(obj, iteratee, context) { 2   var result = Infinity, lastComputed = Infinity, 3     value, computed; 4   if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) { 5    obj = isArrayLike(obj) ? obj : _.values(obj); 6    for (var i = 0, length = obj.length; i < length; i++) { 7     value = obj[i]; 8     if (value != null && value < result) { 9      result = value;10     }11    }12   } else {13    iteratee = cb(iteratee, context);14    _.each(obj, function(v, index, list) {15     computed = iteratee(v, index, list);16     if (computed < lastComputed || computed === Infinity && result === Infinity) {17      result = v;18      lastComputed = computed;19     }20    });21   }22   return result;23  };

View Code

获取最小值,跟max差不多,就不分析了

_.sample

 1  _.sample = function(obj, n, guard) { 2   //判断是否有n这个参数,如果没有 3   if (n == null || guard) { 4    if (!isArrayLike(obj)) obj = _.values(obj); 5    //随机取一个随机样本 6    return obj[_.random(obj.length - 1)]; 7   } 8   var sample = isArrayLike(obj) ? _.clone(obj) : _.values(obj); 9   var length = getLength(sample);10   n = Math.max(Math.min(n, length), 0);11   var last = length - 1;12   //下面就是一个打乱数组顺序的过程13   for (var index = 0; index < n; index++) {14    //生成一个随机的索引15    var rand = _.random(index, last);16    var temp = sample[index];17    sample[index] = sample[rand];18    sample[rand] = temp;19   }20   //最后返回前n个21   return sample.slice(0, n);22  };

 从数组中取出随意样本,如果有n则从被打乱的数组中返回前n个数据,如果没有则返回一个随机样本

_.shuffle

1  _.shuffle = function(obj) {2   return _.sample(obj, Infinity);3  };

 _.shuffle调用_.sample函数,并且出入infinity参数,来实现返回一个乱序的数组

_.sortBy

 1  _.sortBy = function(obj, iteratee, context) { 2   var index = 0; 3   iteratee = cb(iteratee, context); 4   return _.pluck(_.map(obj, function(value, key, list) { 5    return { 6     value: value, 7     index: index++, 8     criteria: iteratee(value, key, list) 9    };10   }).sort(function(left, right) {11   //先用criteria比较12    var a = left.criteria;13    var b = right.criteria;14    if (a !== b) {15     if (a > b || a === void 0) return 1;16     if (a < b || b === void 0) return -1;17    }18    //如果相等再用index来排序19    return left.index - right.index;20   }), 'value');21  };

 _.sortBy 就是一个返回按需排序后的数组,这个函数结构看上去挺复杂,其实拆分来看,就是调用_.pluck获取对象的属性值,然后里面是_.map.sort()来做一个排序,最后返回一个数组,这样拆分完是不是清晰了不少。

不理解sort的可以点击这里:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 group

 1  var group = function(behavior, partition) { 2   return function(obj, iteratee, context) { 3    //判断是否需要拆分为两个数组,这个在下面介绍_.partition的时候具体解释 4    var result = partition ? [[], []] : {}; 5    iteratee = cb(iteratee, context); 6    _.each(obj, function(value, index) { 7     var key = iteratee(value, index, obj); 8     behavior(result, value, key); 9    });10    return result;11   };12  };

 group第一眼一看也是有点复杂,函数里面返回函数,然后behavior参数还是个函数

结构简化之后其实就是下面这样:
function A(B){   return function(){     B();   }}

从return的函数里面来看就是遍历obj取出相应的key,然后把它传给behavior中,具体behavior这里怎么理解,放到下面groupBy一起说,容易理解一些。

_.groupBy

1  _.groupBy = group(function(result, value, key) {2   //判断result中是否有key值,如果有则加入value,如果没有将把value放入数组当中3   if (_.has(result, key)) result[key].push(value); else result[key] = [value];4  });

_.groupBy的作用就是根据相应的参数将集合进行分组
_.groupBy就是调用了group函数,把group融合到其中更容易理解一些
1 _.groupBy = function(obj, iteratee, context) {2    var result = partition ? [[], []] : {};3    iteratee = cb(iteratee, context);4    _.each(obj, function(value, index) {5     var key = iteratee(value, index, obj);6     if (_.has(result, key)) result[key].push(value); else result[key] = [value];7    });8    return result;9 };

 这样看group的结构彻底清晰了。

_.indexBy

1  _.indexBy = group(function(result, value, key) {2   result[key] = value;3  });

返回每一项索引的对象

_.countBy



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

 这个就是返回符合条件的对象数量

 

  _.partition = group(function(result, value, pass) {
    result[pass ? 0 : 1].push(value);
  }, true);

这就是一个按要求把一个数组拆分成两个的函数,调用group函数,遍历数组,将符合条件的放在第一个数组当中,不符合的放在第二个函数当中

_.toArray

 1  _.toArray = function(obj) { 2   //如果为空,返回空数组 3   if (!obj) return []; 4   //如果是数组,拷贝数组 5   if (_.isArray(obj)) return slice.call(obj); 6   if (_.isString(obj)) { 7    // 如果是字符串,则利用正则表达式提取匹配项 8    return obj.match(reStrSymbol); 9   }10   //如果类数组,通过map方法转化数组11   if (isArrayLike(obj)) return _.map(obj);12   //对象,取出属性值存入数组13   return _.values(obj);14  };

_.size

1  _.size = function(obj) {2   //判断是否为空3   if (obj == null) return 0;4   //如果是数组则返回数组长度,如果是对象返回属性的数量5   return isArrayLike(obj) ? obj.length : _.keys(obj).length;6  };

_.initial

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

返回筛选后的数组,n是第几个开始,如果n不存在那么就是array.length-1,也就是数组全拷贝一遍,Math.max是为了规避负数的情况

_.first

1  _.first = _.head = _.take = function(array, n, guard) {2   //参数判空处理3   if (array == null) return void 0;4   if (n == null || guard) return array[0];5   return _.initial(array, array.length - n);6  };

first就是取前几个元素的作用,调用了initial函数

_.rest

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

_.rest是获取第n个元素之后的元素

_.last

1  _.last = function(array, n, guard) {2   if (array == null) return void 0;3   if (n == null || guard) return array[array.length - 1];4   return _.rest(array, Math.max(0, array.length - n));5  };

返回最后n个元素,结构跟first差不多

flatten

 1  var flatten = function(input, shallow, strict, output) { 2   //output是存放结果的数组 3   output = output || []; 4   var idx = output.length; 5   //遍历input,input是要处理的数组 6   for (var i = 0, length = getLength(input); i < length; i++) { 7    var value = input[i]; 8    //判断是不是数组或者arguments对象 9    if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {10     // 是否只合并一次11     if (shallow) {12      var j = 0, len = value.length;13      while (j < len) output[idx++] = value[j++];14     } else {15      //如果不是,则递归调用flatten16      flatten(value, shallow, strict, output);17      idx = output.length;18     }19    //如果不是数组,并且是非严格的20    } else if (!strict) {21     //直接将value拷贝到output数组当中22     output[idx++] = value;23    }24   }25   return output;26  };

flatten作用就是将多维数组合并成一维数组,如果参数shallow为true的话,就只合并一次

_.difference

1  _.difference = restArgs(function(array, rest) {2   rest = flatten(rest, true, true);3   return _.filter(array, function(value){4    return !_.contains(rest, value);5   });6  });

作用是剔除第一数组中其他数组也有的元素,它是先调用flatten将其合并,再调用filter选出符合条件的,里面的条件是!_.cotains,也就是不存在的,所以最后取出的就是剔除完之后的元素数组了

_.uniq

 1  _.uniq = _.unique = function(array, isSorted, iteratee, context) { 2   //如果没有isSorted参数则对参数进行调整 3   if (!_.isBoolean(isSorted)) { 4    context = iteratee; 5    iteratee = isSorted; 6    isSorted = false; 7   } 8   //参数不为空,生成回调函数 9   if (iteratee != null) iteratee = cb(iteratee, context);10   var result = [];11   var seen = []; //缓存数据用的12   for (var i = 0, length = getLength(array); i < length; i++) {13    var value = array[i],14       computed = iteratee ? iteratee(value, i, array) : value;15    //如果是排序好的16    if (isSorted) {17     //因为是排序好的,按顺序比较就好了18     if (!i || seen !== computed) result.push(value);19     seen = computed;20    } else if (iteratee) {21     //处理对象,computed是上面回调函数返回的结果,然后比较,没有就添加22     if (!_.contains(seen, computed)) {23      seen.push(computed);24      result.push(value);25     }26   //判断result里是否有value,如果没有就添加27    } else if (!_.contains(result, value)) {28     result.push(value);29    }30   }31   return result;32  };

就是一个去重的函数,分别对有序的,对象和普通三种情况分别进行处理

_.intersection



 1  _.intersection = function(array) { 2   var result = []; 3   var argsLength = arguments.length; 4   //遍历第一个数组 5   for (var i = 0, length = getLength(array); i < length; i++) { 6    var item = array[i]; 7    //判断result中是否有 8    if (_.contains(result, item)) continue; 9    var j;10    //遍历其他数组11    for (j = 1; j < argsLength; j++) {12     //如果其他数组中,存在没有的情况就结束循环13     if (!_.contains(arguments[j], item)) break;14    }15    //如果循环完,说明每个里面都有,那么就是我们想要的交集结果16    if (j === argsLength) result.push(item);17   }18   return result;19  };

 作用就是去数组的交集,就是拿第一个数组中每一个元素跟后面的数组作比较

_.unzip

 1  _.unzip = function(array) { 2   //取出一个最大长度值 3   var length = array && _.max(array, getLength).length || 0; 4   var result = Array(length); 5   //循环取出每个数组中相同位置的元素,最后组成一个新的二维数组 6   for (var index = 0; index < length; index++) { 7    result[index] = _.pluck(array, index); 8   } 9   return result;10  };

_.object


underscore.js源码解析(四)underscore.js源码解析(四)
 1  _.object = function(list, values) { 2   var result = {}; 3   for (var i = 0, length = getLength(list); i < length; i++) { 4    if (values) { 5     result[list[i]] = values[i]; 6    } else { 7     result[list[i][0]] = list[i][1]; 8    } 9   }10   return result;11  };

View Code

 作用就是将数组转化为对象

_.range

 1  _.range = function(start, stop, step) { 2   //判断是否有stop参数 3   if (stop == null) { 4    stop = start || 0; 5    start = 0; 6   } 7   //step参数不存在的时候赋予默认值 8   if (!step) { 9    step = stop < start ? -1 : 1;10   }11   //获取数组长度12   var length = Math.max(Math.ceil((stop - start) / step), 0);13   var range = Array(length);14   for (var idx = 0; idx < length; idx++, start += step) {15    //数组赋值16    range[idx] = start;17   }18   return range;19  };

作用是按需生成一个整数数组

_.chunk

 1  _.chunk = function(array, count) { 2   //如果count为空或小于1,则返回空 3   if (count == null || count < 1) return []; 4   var result = []; 5   var i = 0, length = array.length; 6   while (i < length) { 7    //进行拆分 8    result.push(slice.call(array, i, i += count)); 9   }10   return result;11  };

小结

本打算上周就发出来的,但是忙着其他的事情耽搁了,underscore.js剩下的所有内容会在下一篇中都写完(不出意外的话是下周发出来)。

感谢大家的观看,也希望能够和大家互相交流学习,有什么分析的不对的地方欢迎大家批评指出

参考资料

http://www.w3cfuns.com/house/17398/note/class/id/bb6dc3cabae6651b94f69bbd562ff370
 

 




原标题:underscore.js源码解析(四)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

深圳至澳门专线:https://www.goluckyvip.com/tag/41223.html
深圳至美国货运:https://www.goluckyvip.com/tag/41224.html
深圳至义乌专线:https://www.goluckyvip.com/tag/41225.html
深圳专线:https://www.goluckyvip.com/tag/41228.html
深圳综试区:https://www.goluckyvip.com/tag/41229.html
优化关键词:https://www.goluckyvip.com/tag/4123.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流