天天一個lodash方法-chunk

前言

以前作的足夠多，可是不夠好。批評本身的話萬萬千，不如真是作點小事日積月累來的實在。比起vue，react之類的大庫，看的頭暈，先從小庫寫起來吧。

17年但願本身能克服不夠堅持，不夠認真的毛病，踏踏實實積累一點東西，遠離浮躁，認真的學習，夯實基礎。目標沒必要太過遠大，先從lodash開始。天天看一個lodash方法。

chunk方法源碼連接

功能

將數組（array）拆分紅多個 size 長度的區塊，並將這些區塊組成一個新數組。 若是array 沒法被分割成所有等長的區塊，那麼最後剩餘的元素將組成一個區塊。

使用方法

`_.chunk(array, [size=1])

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

這是在源碼裏的執行效果。它接收一個數組，傳入一個size，會將原數組按照size生成若干個新的數組，並組成一個數組。

看api文檔的時候注意，[size=1]，大概意思就是在不傳size的狀況下，size默認爲1 作了個測試

var data = [1,2,3,4,5]

console.log(_.chunk(data))
//=> [[1],[2],[3],[4],[5]]

須要注意的是thunk方法是一個純函數。它不會對傳入的data有任何影響，這很不起眼，但很重要。

嘗試本身實現一個chunk方法

簡單分析，傳入的參數有兩個，第一個爲數組，第二個爲size，默認爲1

function chunk(arr,size){
  var size = size || 1;
  // 
  var result = [];
  
  // 我這裏能想到的是遍歷
  var l = arr.length; //數組的長度
  var s = Math.ceil(l/size)//  假如咱們有長度爲10的數組，size傳入的是3，是要分紅4個自數組的。
  for(var i =0;i<s;i++){
    result[i] = arr.slice(size*i,size*(i+1))
  }
  return result
}

console.log(chunk(data,2))

實現的思路。若是我傳入一個長度爲10的數組，size爲3，那麼我按照每三個一組分，應該獲得的結果是4個數組。10處以3再向上取整，恰好Math.ceil這個方法能知足個人須要。以後，再用一個for循環處理數組，放入個人result數組裏，返回獲得的result。

lodash的chunk實現

import slice from './slice.js'

function chunk(array, size) {
  size = Math.max(size, 0)  // 這裏我沒想明白，若是size爲undefined  Math.max(size)豈不是NaN了，若有大佬指出，不勝感激。
  const length = array == null ? 0 : array.length //array若是不是null就取出length，不然length 爲0
  if (!length || size < 1) {
    return [] // 不是array，就直接返回一個空數組。
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))// Math.ceil(10/3) = 4 result應該爲4個長度的數組。

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size)) // while循環生成result的數組。
  }
  return result
}

export default chunk

不一樣之處

• Math.max(size,0)
• 對length進行了判斷，若是長度爲0，就直接返回空數組。
• 對result 我使用的是result = [],而lodash使用的是 new Array(),這裏我google一圈也沒搜索到new Array()的好處。new的性能要低於 字面變量result=[]的，微乎其微。
• loop的話，while我使用的不多，大多數都是用for實現。這更像是我的傾向的一種選擇。可是while循環的話，少了一個i，若是你的邏輯都很好的寫在了循環體內，顯然更簡潔。

下一篇，slice方法吧。