极客笔记JS 一维数组转二维数组
在前端开发中，我们经常会遇到将一维数组转换为二维数组的需求。一维数组是指只包含一级元素的数组，而二维数组是指包含多个一维数组的数组。本文将详细介绍如何使用 JavaScript 将一维数组转换为二维数组，包括手动实现和使用内置方法实现两种方式。
手动实现
方法一：指定列数进行分割
假设我们有一个一维数组 arr，希望将其转换为一个二维数组，每个子数组包含指定数量的元素，可以按照以下方法进行手动实现：
function convertTo2DArray(arr, cols) {
let result = [];
for (let i = 0; i < arr.length; i += cols) {
result.push(arr.slice(i, i + cols));
}
return result;
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const cols = 3;
const result = convertTo2DArray(arr, cols);
console.log(result);
运行上面的代码，将会得到以下输出：
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
在上面的代码中，我们定义了一个 convertTo2DArray 函数，接受两个参数：要转换的一维数组 arr 和每个子数组包含的元素个数 cols。然后我们使用 slice 方法将原始数组按指定的列数分割成多个子数组，并将这些子数组添加到结果数组中返回。
方法二：根据特定条件分组
除了按指定列数进行分割之外，我们还可以根据特定的条件来对一维数组进行分组。比如，将数组中所有偶数放在一个子数组中，将所有奇数放在另一个子数组中。
function convertTo2DArray(arr) {
let result = [];
let evenArray = [];
let oddArray = [];
arr.forEach(num => {
if (num % 2 === 0) {
evenArray.push(num);
} else {
oddArray.push(num);
}
});
result.push(evenArray, oddArray);
return result;
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result = convertTo2DArray(arr);
console.log(result);
运行上面的代码，将会得到以下输出：
[ [ 2, 4, 6, 8 ], [ 1, 3, 5, 7, 9 ] ]
在上面的代码中，我们定义了一个 convertTo2DArray 函数，接受一个一维数组 arr 作为参数。然后我们遍历数组中的每个元素，根据元素的奇偶性将其放入对应的子数组中，最后将这两个子数组组合成一个二维数组并返回。
使用内置方法实现
除了手动实现之外，JavaScript 还提供了一些内置方法可以方便地将一维数组转换为二维数组。
使用 reduce 方法
JavaScript 中的 reduce 方法可以将数组中的每个元素按照指定规则累加起来，我们可以利用 reduce 方法来将一维数组转换为二维数组。
function convertTo2DArray(arr, cols) {
return arr.reduce((result, element, index) => {
const rowIndex = Math.floor(index / cols);
if (!result[rowIndex]) {
result[rowIndex] = [];
}
result[rowIndex].push(element);
return result;
}, []);
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const cols = 3;
const result = convertTo2DArray(arr, cols);
console.log(result);
运行上面的代码，将会得到以下输出：
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
在上面的代码中，我们使用 reduce 方法对一维数组进行累加操作，根据当前元素的索引计算所在的行索引，并将元素加入到对应的子数组中。
使用 chunk 方法
除了 reduce 方法外，我们还可以使用第三方库或者自定义方法来实现对一维数组的分割。
function chunk(arr, size) {
return arr.reduce((result, element, index) => {
const groupIndex = Math.floor(index / size);
if (!result[groupIndex]) {
result[groupIndex] = [];
}
result[groupIndex].push(element);
return result;
}, []);
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const size = 3;
const result = chunk(arr, size);
console.log(result);
运行上面的代码，将会得到以下输出：
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
在上面的代码中，我们实现了一个 chunk 方法，通过 reduce 方法实现了将一维数组按指定大小划分为多个子数组的功能。
总结
本文介绍了如何使用 JavaScript 将一维数组转换为二维数组，包括手动实现和使用内置方法实现两种方式。无论是按指定列数进行分割还是根据特定条件分组，还是利用 reduce 方法或者自定义方法，都可以轻松实现一维数组到二维数组的转换。掌握这些方法对于处理前端开发中的数据结构转换问题非常重要。