使用while循环将一维数组转二维关联数组时提前报错问题

问题原因 #

你遇到的报错是因为处理第三组数据时，结果数组对应位置的元素未被初始化为对象，直接对undefined的name属性赋值导致类型错误。长度为3或6时正常，是因为循环次数少，代码刚好在小长度下触发了隐式初始化，或手动处理了前两组的对象创建，但未覆盖第三组及更多的情况。

修复后的while循环写法 #

如果要保留while循环，核心是每次处理分组前，确保结果数组的当前位置已初始化空对象：

const id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];
const result = [];
let i = 0;
while (i < id_array.length) {
  const groupIndex = Math.floor(i / 3);
  // 初始化当前分组的空对象
  result[groupIndex] = {};
  // 赋值name和includes.config
  result[groupIndex].name = id_array[i];
  result[groupIndex].includes = { config: id_array[i + 2] };
  i += 3;
}

或者用数组截取的方式，避免索引计算错误：

const id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];
const result = [];
// 复制原数组，防止修改原始数据
const tempArr = [...id_array];
while (tempArr.length > 0) {
  // 每次截取3个元素
  const [name, _, config] = tempArr.splice(0, 3);
  // 直接推入结构后的对象
  result.push({ name, includes: { config } });
}

更优雅的写法 #

方法1：使用Array.from批量生成 #

利用Array.from的第二个映射参数，直接按分组生成目标结构：

const id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];
const groupNum = id_array.length / 3;
const result = Array.from({ length: groupNum }, (_, idx) => {
  const start = idx * 3;
  return {
    name: id_array[start],
    includes: { config: id_array[start + 2] }
  };
});

方法2：使用reduce分组转换 #

通过reduce遍历数组，按索引模3的结果分配对应属性：

const id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];
const result = id_array.reduce((acc, curr, idx) => {
  const groupIdx = Math.floor(idx / 3);
  // 若当前分组未初始化，创建空对象
  if (!acc[groupIdx]) acc[groupIdx] = {};
  // 根据索引位置分配属性
  if (idx % 3 === 0) acc[groupIdx].name = curr;
  if (idx % 3 === 2) acc[groupIdx].includes = { config: curr };
  return acc;
}, []);

方法3：先分组再映射 #

先将一维数组拆分为每3个元素一组，再用map转换结构，可读性更强：

const id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];
// 拆分分组
const groups = [];
for (let i = 0; i < id_array.length; i += 3) {
  groups.push(id_array.slice(i, i + 3));
}
// 转换为目标结构
const result = groups.map(([name, _, config]) => ({
  name,
  includes: { config }
}));

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