没看过前几篇的可以猛戳这里:
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
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
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