js 使用 reduce 实现将 一维数组 转 二维数组 javascript 可指定数量

另外lodash有一个chunk方法,可以同样按指定数量切割数组
使用场景:
在进行业务开发时,遇到表单需要分行渲染,也就是每四个数据对象渲染为一行,此时后端返回的数据格式是[{ id: 1 }, { id: 2 }, { id: 3 }],
需要将后端这个数据进行处理,以符合渲染表单时每行放四个字段,实现思路:按每4个数据对象存储为一个数组中,然后将全部数组放到一个大的数组中,如: [ [{ id: 1 }, { id: 2 }], [ { id: 3 }, { id: 4 } ] ] 这很适合使用 ES6 的 reduce 数组方法进行处理,reduce是对数组中每个值进行处理并最终汇集到一个值中的方法,所以当遇到数组内的值需要进行聚合值的操作时就可以选取reduce来做处理。

前置知识:
数组方法 reduce 的使用,附上文档: https://developer.mozilla.org/zh-cn/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

将传入的一维数组按指定数量分割为二维数组。

参数:
source: 要分割的一维数组
num: 几个为一个数组的数量

浅拷贝示例

function oneTransTwo(source, num) {
      return source.reduce((v, item, index) => {
        let r = null;
        if (index % num === 0) {
          r = [...v, [item]];
        } else {
          v[v.length - 1].push(item);
          r = v;
        }
        return r;
      }, []);
};

注意:浅拷贝例子,修改返回数组中对象的值会影响 source 原数组的值

深拷贝示例

function oneTransTwo(source, num) {
      return source.reduce((v, item, index) => {
        let r = null;
        if (index % num === 0) {
          r = [...v, [JSON.parse(JSON.stringify(item))]];
        } else {
          v[v.length - 1].push(item);
          r = v;
        }
        return r;
      }, []);
};

示例:

使用方式:oneTransTwo([{id: 1}, {id: 2}], 1)

效果:

posted @ 2020-12-17 16:06  StackOcean  阅读(743)  评论(0编辑  收藏  举报