使用场景:
在进行业务开发时,遇到表单需要分行渲染,也就是每四个数据对象渲染为一行,此时后端返回的数据格式是[{ 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)
效果: