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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值