JS一维数组与二维数组互相转换的方法

一维数组转化为二维数组

使用场景举例:接口返回一个数组对象,展示时每行固定显示n个,则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。

分析:我们将一维数组,截取设定的长度,放入的一个新数组中。同时通过设定的长度,决定二维数组中的元素个数,但是一维数组的长度由总个数和设定的长度共同决定的。

Math.floor

floor() 方法返回小于等于x的最大整数。【向下取整】

slice

slice() 方法可从已有的数组中返回一个新的数组,包含从 start 到 end (不包括该元素)的元素。

a.数组元素为基本类型:

let baseArray = [1, 2, 3, 4, 5, 6, 7, 8];
let len = baseArray.length;
let n = 4; //假设每行显示4个
let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
  // slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
  let temp = baseArray.slice(i*n, i*n+n);
  res.push(temp);
}
console.log(res);

通过数组中index 和 设定长度 来建立一个新数组,iconsArr[0].push(item) 

function arrTrans(num, arr) { // 一维数组转换为二维数组
  const iconsArr = []; // 声明数组
  arr.forEach((item, index) => {
    const page = Math.floor(index / num); // 计算该元素为第几个素组内
    if (!iconsArr[page]) { // 判断是否存在
      iconsArr[page] = [];
    }
    iconsArr[page].push(item);
  });
  return iconsArr;
},

b.数组元素为对象

当数组元素为对象的时候,就不能使用slice方法进行截取了,因为slice属于浅拷贝,导致的问题就是你修改了新生成的数组对象值,会影响原始数组中对象的值,但很多时候我们并不想影响原来的值。

深拷贝和浅拷贝主要是针对对象类型,基本类型并不涉及。

let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
let len = objArray.length;
let n = 4; //假设每行显示4个
let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
let temp = objArray.slice(i*n, i*n+n);
  res.push(JSON.parse(JSON.stringify(temp)));
}
console.log(res);

二维数组转化为一维数组

const arr=[[1,2,3],[3,4],[5]];
console.log([].concat.apply([],arr));
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

参考:js数组合并concat()和运用.apply()实现扁平化具体解析

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值