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]