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段

         function chunk(array, size) {
             size = Math.max(size, 0);
             const length = array == null ? 0 : array.length;
             if (!length || size < 1) {
                 return [];
             }
             let index = 0;
             let resIndex = 0;
             const result = new Array(Math.ceil(length / size));

             while (index < length) {
                 result[resIndex++] = array.slice(index, (index += size));
             }
             return result;
         }

第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用法，抽取出来，便于分析

         function drop(array, n = 1) {
             const length = array == null ? 0 : array.length;
             return length
                 ? array.slice( n < 0 ? 0 : n, length)
                 : [];
         }

         console.log( drop( [ 10, 20, 30 ] ) ); //[ 20, 30 ]
         console.log( drop( [ 10, 20, 30 ], 3 ) ); //[]
         console.log( drop( [ 10, 20, 30 ], 2 ) ); //[30]