天天看点

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实现数组分组

继续阅读