javascript實作數組分組

最終期望實作

編寫一個chunk函數，将數組拆分成多個 size 長度的塊，并組成一個新數組。 如果數組無法被分割成全部等長的塊，那麼最後剩餘的元素将組成一個塊。

參數

• array (Array)

  需要被處理的數組

• [size=0] (number)

  每個塊的長度

傳回值 (Array):

傳回一個拆分好的新數組

const arr = ['a', 'b', 'c', 'd'];

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

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

lodash中chunk用法

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

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

for循環+ slice()實作

const arr = ['a', 'b', 'c', 'd'];

function chunk(arr, size){
  var result = [];
  for(var i = 0, len = arr.length; i < len; i+= size){
    result.push(arr.slice(i, i+ size));
  }
  return result;
}

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

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

forEach() 實作

const arr = ['a', 'b', 'c', 'd'];
function chunk(arr, size) {
    const list = [];
    let current = [];
    arr.forEach(t => {
        current.push(t);
        if (current.length === size) {
            list.push(current);
            current = [];
        }
    });
    if (current.length) {
        list.push(current);
    }
    return list;
}
chunk(arr, 2);
// => [['a', 'b'], ['c', 'd']]

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

slice() + map() 實作

const arr = ['a', 'b', 'c', 'd'];
function chunk(arr, size){
	const result = Array.apply(null, {
    	length: Math.ceil(arr.length / size)
	}).map((item, index) => {
	    return arr.slice(index * size, (index + 1) * size);
	});
	return result;
}	

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

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

Array.apply() 是為了生成一個長度為 Math.ceil(data.length / groupByNum) 的數組作為 map() 的源，map() 不需要這個源的資料，隻需要這個源每個數組的 index。

Math.ceil() 用于保證在除法計算有餘數的時候對商 +1，即循環次數 +1。

然後在算得的循環次數中，通過 slice 傳回每一段結果，通過 map() 映射出來，最終生成需要的結果。

參考連結

chunk

JavaScript 數組分組的實作

JS實作數組分組