如何修改for循环代码实现一维数组按3元素分组为二维数组？

你的代码存在两个核心问题，导致只能返回第一个子数组：

1. 错误地将数组arr当作字符串进行拼接操作，导致数组类型被强制转换为字符串，逻辑完全混乱。
2. 外层循环的第一次迭代里就执行了return语句，直接终止了函数，后续循环根本没有机会运行。

修改后的代码（基于原循环逻辑修复） #

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

function sortByGroups() {
    let result = []; // 存储最终的二维数组
    for (let i = 0; i < names.length; i += 3) {
        let group = []; // 每个分组创建一个新数组
        // 内层循环填充当前分组的元素，同时避免数组越界
        for (let j = i; j < i + 3 && j < names.length; j++) {
            group.push(names[j]);
        }
        result.push(group);
    }
    return result;
}

console.log(sortByGroups());
// 输出：[['Peter', 'Andrew', 'Ann'], ['Mark', 'Josh', 'Sandra'], ['Cris', 'Bernard', 'Takesi']]

更简洁的实现（使用slice方法） #

Array.slice()可以直接截取指定范围的子数组，完全可以替代内层循环，让代码更简洁：

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

function sortByGroups() {
    let result = [];
    for (let i = 0; i < names.length; i += 3) {
        // 截取从i开始的3个元素作为子数组
        result.push(names.slice(i, i + 3));
    }
    return result;
}

console.log(sortByGroups());

函数式风格实现（使用reduce） #

如果喜欢函数式编程，可以用Array.reduce()来完成分组：

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

const sortByGroups = () => names.reduce((acc, curr, index) => {
    const groupIdx = Math.floor(index / 3);
    // 如果当前分组不存在，先初始化空数组
    if (!acc[groupIdx]) acc[groupIdx] = [];
    acc[groupIdx].push(curr);
    return acc;
}, []);

console.log(sortByGroups());

内容的提问来源于stack exchange，提问作者Ramiz