lodash框架中的chunk与drop函数源码逐行分析
lodash是一个工具库,跟underscore差不多
chunk函数的作用: 把一维数组,按照固定的长度分段成二维数组
如:
chunk( [ 10, 20, 30, 40 ], 2 ) 结果: [[10, 20], [ 30, 40 ]]
解释:把数组[ 10, 20, 30, 40] 按每2个元素分成一段, 一共分成2段
chunk( [ 10, 20, 30, 40 ], 3 ) 结果: [[10, 20, 30], [40]]
解释:把数组[10, 20, 30, 40] 按每3个元素分成一段, 剩下的那个元素,独立作为一段
chunk( [ 10, 20, 30, 40 ], 1 ) 结果: [[10],[20],[30],[40]]
解释:把数组[10, 20, 30, 40] 按每个元素分成一段, 一共可以分成4段
1 function chunk(array, size) { 2 size = Math.max(size, 0); 3 const length = array == null ? 0 : array.length; 4 if (!length || size < 1) { 5 return []; 6 } 7 let index = 0; 8 let resIndex = 0; 9 const result = new Array(Math.ceil(length / size)); 10 11 while (index < length) { 12 result[resIndex++] = array.slice(index, (index += size)); 13 } 14 return result; 15 }
第2行: size=Math.max( size, 0 ); 获取0和size之间的较大值, 纵观整个函数, 通俗点讲就是,如果size是负数,把size变为0,其实整个函数 有个小bug, 那就是没有对size是否传递参数做判断,
如果这样用 chunk( [ 10, 20, 30 ] ) 这样会报错,因为size没有传,默认为undefined, 在第9行 length / size的时候就会报错, 所以我认为更加严谨的做法是在第二行代码之间,再加一句判断:
size = ( typeof size === 'undefined' ) ? 0 : size;
这样就算是size没有传递参数,也可以把他变为0
第3行: const length = array == null ? 0 : array.length; 用来判断是否传递的是空数组,如果是length = 0, 如果不是length就是数组的实际长度
第4行:
if (!length || size < 1) {
return [];
}
如果长度为0, 或者size < 1 就不用往下执行了, 直接返回一个空数组
第9行:
const result = new Array(Math.ceil(length / size));
这句话是整个分段数组功能中很关键的一句, 把一维数组根据size需要分成的段数算出来了,
如 [ 10, 20, 30, 40 ], 这个一维数组, length = 4,
如果size = 1, 就可以分成4段 [ [], [], [], [] ]
如果size = 2, 就可以分成2段 [ [], [] ]
如果size = 3, 还是分成2段 [ [], [] ]
如果size = 4, 分成1段 [ [] ]
第11-13行就是 把具体的值 插入到对应的段
while (index < length) {
result[resIndex++] = array.slice(index, (index += size));
}
写法非常的精简,这段代码,如果我改成for循环,相信你应该很容易就能看懂
for( ; index < length; ) {result[resIndex] = array.slice( index, index + size );resIndex++;index = index + size;}
正常情况需要3句,现在精简成一句。
drop函数: 其实就是把slice封装了一次,其实lodash本身并不是这么写的,在lodash中,slice被重新封装了一次,我把他改成原生slice用法,抽取出来,便于分析
1 function drop(array, n = 1) { 2 const length = array == null ? 0 : array.length; 3 return length 4 ? array.slice( n < 0 ? 0 : n, length) 5 : []; 6 } 7 8 console.log( drop( [ 10, 20, 30 ] ) ); //[ 20, 30 ] 9 console.log( drop( [ 10, 20, 30 ], 3 ) ); //[] 10 console.log( drop( [ 10, 20, 30 ], 2 ) ); //[30]
作者:ghostwu, 出处:http://www.cnblogs.com/ghostwu
博客大多数文章均属原创,欢迎转载,且在文章页面明显位置给出原文连接