每日源碼分析 - lodash(chunk.js)

一. 寫在前面：

---

本系列使用 lodash 4.17.4版本

這個函數的做用是用來切割數組的，經過傳入數組 Array 和塊數量 size 來進行數組分割，返回新的數組塊.

二. 函數使用示例

---

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
}
var ret = chunk(['a', 'b', 'c', 'd'], 2)
console.log(ret)
複製代碼

輸出結果爲：

[ [ 'a', 'b' ], [ 'c', 'd' ] ]
[Finished in 1.2s]
複製代碼

三. 模塊代碼：

---

import slice from './slice.js'

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
複製代碼

四. 對代碼的具體解釋(如下順序是按照代碼順序進行解釋的)

---

1. import slice from './slice.js' 經過 ECMAscript6新特性，引用 slice 模塊。

2. function chunk(array, size) {}

   （1）chunk 函數主體, 參數 array 表示原始數組，爲局部變量；

   （2）size 表示拆分後的每一個新數組長度，爲局部變量。

3. size = Math.max(size, 0)

   (1)尋找 0~size 之間的最大值，並賦值給size。

   (2)目的是檢查傳入的 size 值是否大於等於 0，若是 size 小於0，size 取0.

4. const length = array == null ? 0 : array.length

   （1）聲明一個變量length，const 聲明的變量須要同時初始化，並且只能賦值一次， 一旦初始化後，該變量的值就不能改變；

   （2） 若是 array is null, then length = 0,不然 length = array.length，這裏的條件語句用了簡寫模式，須要轉一下彎，否則容易搞錯。

5. 若是 length 等於0，或者 size 小於 1 時，返回空數組。

if (!length || size < 1) {
    return []
  }
複製代碼

6. 聲明塊級變量 index、 resIndex

let index = 0
  let resIndex = 0
複製代碼

7. const result = new Array(Math.ceil(length / size))

   （1）建立一個新的數組 result ，調用Math方法計算length / size 的值，並向上取整。

   （2）給 result 數組分配一個定長的內存空間。

8. 當 index 小於 length 時，原數組取 index 到 index+size 位元素,存到result數組裏。

while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
複製代碼

9. return result 返回新的result數組

10. export default chunk 默認導出函數 chunk

五. 寫在最後：

---

本文章來源於午安煎餅計劃Web組 - 初見

因爲本人水平有限，不少地方理解不到位，還請各位大佬指正。

相關連接：

每日源碼分析-Lodash（castArray.js）

每日源碼分析 - lodash ( after.js )

HTML 語義化

關於瀏覽器內核及其 CSS 寫法