如何遍历JavaScript数组批量创建自定义类的实例对象

原代码问题 #

原有实现固定写死了2个用户的下标取值逻辑，循环步长设置错误，无法适配任意数量用户的场景。

优化实现 #

基础for循环版本（可读性最高） #

// 存储所有生成的User实例
const userList = [];
// 每6个元素为一组用户数据，循环步长设为6
for (let i = 0; i < array.length; i += 6) {
  // 仅取前5个元素，自动跳过每组第6个不需要的元素
  const user = new User(
    array[i].trim(), // 去除字符串前后多余空格
    array[i+1].trim(),
    array[i+2].trim(),
    parseFloat(array[i+3].trim()), // 坐标转数值类型
    parseFloat(array[i+4].trim())
  );
  userList.push(user);
}

函数式写法（更简洁） #

const userList = Array.from(
  { length: Math.ceil(array.length / 6) },
  (_, groupIndex) => {
    const startPos = groupIndex * 6;
    // 截取当前组前5个元素批量处理
    const [name, zip, city, x, y] = array
      .slice(startPos, startPos + 5)
      .map(item => item.trim());
    return new User(name, zip, city, parseFloat(x), parseFloat(y));
  }
);

逻辑说明 #

• 循环步长固定为6，完全匹配「每6个元素对应一个用户」的规则，不管数组中有多少组用户数据都能自适应
• 自动跳过每组的第6个不需要的元素，不需要额外处理
• 额外添加了trim()处理原数组中字符串的多余空格，parseFloat()将坐标转为数值类型，符合业务使用习惯
• 所有生成的User实例统一存储在userList数组中，可直接遍历取用

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