本文中介绍原生JS实现一维对象数组转换二维数组，可实现二维数组中的每个子数组包含不同个数的元素。

原生JS实现一维对象数组转换二维数组可分为如下的两种种情况：

  • JS 二维数组中子数组元素数相同，即：每个子数组包含的元素的个数相同
  • JS 二维数组中子数组元素数不同，即：每个子数组包含的元素的个数不同

如果你要将 js二维数组转换成一维数组请查看：js二维数组转换成一维数组

JS二维数组中子数组元素数相同

原生JS实现一维对象数组转换二维数组时，二维数组中每列的元素个数相同也分为两种情概况：

  • 只知二维数组的每个子数组的列数
  • 已知二维数组的行数和列数，此时一维数组的元素数最好是二维数组行数和列数的乘积（当然也可以不是）

只知JS二维数组的列数

使用该种方式能够处理完一维数组中的每一个元素。

示例：

const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var arr_2d = [];
const cols = 5;

var row = 0;
var col = 0;

arr_1d.forEach((item) => {
  if (col == 0) {
    arr_2d.push([]);
    arr_2d.at(row).push(item);
    col += 1;
  } else if (col < cols) {
    arr_2d.at(row).push(item);
    col += 1;
  } else {
    row += 1;
    arr_2d.push([]);
    arr_2d.at(row).push(item);
    col = 1;
  }
});
console.log(arr_2d);

代码解释：

  • 第一次col为零时，需要添加一个[]空数组，然后向空数组中添加当前元素，而且该语句只执行一次
  • 执行else时，即col == cols，这时已经时下一个子数组的第一个元素，因此要先执行row += 1，然后再添加一个[]空数组，并附加当前元素。因为子数组的第一个元素已经附加，col要赋值为1，不能赋值为0

已知JS二维数组的行数和列数

已知JS二维数组的行数和列数，可以按照只知二维数组的列数来处理，也推荐使用：只知二维数组的列数来处理，因为这种情况能完全处理完一维数组的元素。

JS一维对象数组转换二维数组，使用数组的slice()函数最简单，示例代码：

const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
var arr_2d = [];
const rows = 4;
const cols = 5;

for (let row=0; row<rows; row++) {
  arr_2d[row] = arr_1d.slice(row*cols, (row+1)*cols);
}
console.log(arr_2d);

使用双循环实现JS一维对象数组转换二维数组，代码如下：

const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
const arr_len = arr_1d.length;
var arr_2d = [];
const rows = 4;
const cols = 5;

for (let row=0; row<rows; row++) {
  for (let col=0; col<cols; col++) {
    if (col == 0) {
      arr_2d.push([]);
    }
    let idx = row * cols + col;
    if ( idx == arr_len) break;
    arr_2d.at(row).push(arr_1d.at(idx));
  }
}
console.log(arr_2d);

代码解释：

  • 每次col为零时，需要添加一个[]空数组，它的作用是搭建二维数组的框架，然后向空数组中添加元素，
  • push()可附加一个元素，也可以附加一个数组元素
  • 使用行数和列数的双循环时，当JS一维数组的元素个数超过行列乘积时，后面的元素就会被舍弃。

JS二维数组中每列的元素数不同

原生JS实现一维对象数组转换二维数组时，如果二维数组的每列的元素数不同，那么需要给出每列的元素数，那么自然也能得知二维数组的行数，可以使用两种方式实现：

  • 使用单循环实现JS实现一维对象数组转换二维数组
  • 使用双循环实现JS实现一维对象数组转换二维数组

使用JS单循环转换

示例：

const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
var arr_2d = [];
const cols = [5, 4, 3, 4, 4];

var nums = 0;
cols.forEach((item) => {
  nums += item;
});
const arr_len = arr_1d.length;

var row = 0;
var col = 0;

for (let idx=0; idx<nums; idx++) {
  if (idx==arr_len) break;
  if (col == 0) {
    arr_2d.push([]);
    arr_2d.at(row).push(arr_1d.at(idx));
    col += 1;
  } else if (col < cols.at(row)) {
    arr_2d.at(row).push(arr_1d.at(idx));
    col += 1;
  } else {
    row += 1;
    arr_2d.push([]);
    arr_2d.at(row).push(arr_1d.at(idx));
    col = 1;
  }
}
console.log(arr_2d);

代码解释：

  • 第一次col为零时，需要添加一个[]空数组，然后向空数组中添加当前元素，而且该语句只执行一次。
  • 执行else时，即col == cols，这时已经时下一个子数组的第一个元素，因此要先执行row += 1，然后再添加一个[]空数组，并附加当前元素。因为子数组的第一个元素已经附加，col要赋值为1，不能赋值为0。
  • break 是一维数组中元素个数少于各列之和时，中断循环。
  • 循环的次数是各列之和

使用JS双循环转换

示例：

const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var arr_2d = [];

const cols = [5, 4, 3, 4, 4];
const rows = cols.length;

var nums = 0;
cols.forEach((item) => {
  nums += item;
});
const arr_len = arr_1d.length;

for (let row=0; row<rows; row++) {
  for (let col=0; col<cols.at(row); col++) {
    if (col == 0) {
      arr_2d.push([]);
    }
    let idx = row * cols.at(row) + col;
    if ( idx == arr_len) break;
    arr_2d.at(row).push(arr_1d.at(idx));
  }
}
console.log(arr_2d);

代码解释：

  • 每次col为零时，需要添加一个[]空数组，它的作用是搭建二维数组的框架，然后向空数组中添加元素。
  • nums为各列之和，即：二维数组中元素的个数。
  • break语句是一维数组中的元素个数少于二维数组应添加的个数时，中断循环。

总结

本文中介绍了原生JS实现一维对象数组转换二维数组，可实现二维数组中的每个子数组包含不同个数的元素。并介绍了原生JS实现一维对象数组转换二维数组的两种实现情况： JavaScript 二维数组中每列的元素数相同，即：每个子数组包含的元素的个数相同； JS 二维数组中每列的元素数不同，即：每个子数组包含的元素的个数不同。