The time is out of joint: O cursed spite, That ever I was born to set it right. --莎士比亞

最艱難的第一步

最近學習遇到了些障礙，浮躁浮躁又浮躁。很難靜下心來做一件事，北京的寒風也難以讓我冷靜下來.

之前一直很想找個源碼讀讀，太懶，總是各種理由敷衍自己.於是下定決心邁出第一步，讀Lodash源碼!

就從api的一個開始讀！

chunk.js

先看一下例子

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

chunk函數主要想實現的功能是:傳入一個數組，指定分割值，輸出分割後的數組

看一下chunk.js的源碼

import slice from './slice.js'

/**
 * Creates an array of elements split into groups the length of `size`.
 * If `array` can't be split evenly, the final chunk will be the remaining
 * elements.
 *
 * @since 3.0.0
 * @category Array
 * @param {Array} array The array to process.
 * @param {number} [size=1] The length of each chunk
 * @returns {Array} Returns the new array of chunks.
 * @example
 *
 * chunk(['a', 'b', 'c', 'd'], 2)
 * // => [['a', 'b'], ['c', 'd']]
 *
 * chunk(['a', 'b', 'c', 'd'], 3)
 * // => [['a', 'b', 'c'], ['d']]
 */
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++] = slice(array, index, (index += size))
  }
  return result
}

export default chunk

ok下麵開始分析：

1. 首先定義一個函數 chunk 需要傳遞兩個參數：一個數組：array，一個分割值：size

2. 先舉個慄子，如果我輸入的數組是 :array = [0,1,2] 分割值是: size = 1,最終應該返回一個這樣的數組: [[0],[1],[2]].

   再比如array = [0,1,2,3],分割值是: size = 3,那麼結果就是:[[0,1,2],[3]],有沒有發現規律（樣本這麼少發現才怪,逃...

3. 通過源碼可以發現數組的 length 與size有密切關聯.

   也就是說數組的長度是4,分割值為1時,應該返回四個數組;

   當分割值為2時,應該返回兩個數組;

   當分割值為3時,應該返回2個數組;

   當分割值為4時,應該返回一個數組.

   那麼問題來了,當分割值為3時,4/3=1.3333怎麼確保割後的數組長度為2呢.

   於是就需要引入Math.ceil這個方法,Math.ceil 表示大於或等於給定數字的最小整數.

   再舉個慄子

   Math.ceil(.95);    // 1
   Math.ceil(4);      // 4
   Math.ceil(7.004);  // 8
   Math.ceil(-0.95);  // -0
   Math.ceil(-4);     // -4
   Math.ceil(-7.004); // -7

4. 那麼有了最關鍵的部分，接下來就是分割數組了,這個方法比較常用就用Array.prototype.slice 方法實現,通過迴圈把分割的數組一個一個傳到一個新數組中去.

5. 大致思路就是這樣,接下來再次有請源碼上場:

function chunk(array, size) {
  size = Math.max(size, 0); // 尋找一組數中最大的值

  const length = array == null ? 0 : array.length; // 定義length的值 即array的length值

  if (!length || size < 1) {
    return []; // 如果length 為0 或者size 小於1的話 返回一個空數組
  }

  let index = 0;  //定義index,用於保存分割值

  let resIndex = 0; // 定義resIndex,用於保存數組下標

  const result = new Array(Math.ceil(length / size)); //定義一個 result 是一個只有數組長度的數組,通過length和size確定分割後數組的長度

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size)); // slice()方法 與原生Array.prototype.slice()用法一樣

    // 分析一下： array:[0,1,2],size 1 為例 那麼 length:3

    // result[0] = [0,1,2].slice(0,1) 即 result[0] =[0] ;index=1 resIndex = 1

    // while(1<3) result[1] = [0,1,2].slice(1,1+1) result[1] = [1] ;index = 2 resIndex = 2

     // while(2<3) result[2] = [0,1,2].slice(2,2+1) result[2] = [2] ;index = 3 resIndex = 3

     // while(3<3) 結束迴圈
  }
  return result; // 返回最終的數組
}

自己試(can)著(kao)寫一個

function chunk (array, size) {
  var length = array.length
  if (!length || !size || size < 1) {
    return []
  }
  var index = 0
  var resIndex = 0
  var result = new Array(Math.ceil(length / size))
  while (index < length) {
    result[resIndex++] = array.slice(index, (index += size))
  }
  return result
}

console.log(chunk([1, 2, 3], 1)) // [[1], [2], [3]]

console.log(chunk([1, 2, 3, 4], 2)) // [[1, 2], [3,4]]

console.log(chunk([1, 2, 3, 4], 3)) // [[1, 2, 3], [4]]

最後

這樣一步一步的分析,其實也不(tai)難(nan)。從網上參考了一些資料,對我解讀源碼有很大的幫助。最後由衷的感謝：lodash源碼解析——chunk函數這篇文章對我的幫助,寫的通俗易懂