如何在 javascript 数组上迭代新的类实例？答案

【问题标题】：How to iterate new class intances over a javascript array?如何在 javascript 数组上迭代新的类实例？
【发布时间】：2021-08-12 04:44:49
【问题描述】：

我有一个如下所示的数组：

var array = ["name", " zip", " city", " 51.408", "1.333", " 5.008", "name2", "zip2", "city2", " 51.404", "4.999", "2.434"]

它包含来自 2 个用户的数据。我想在下面创建一个类的 2 个实例。

class User {
    constructor(name, zip, city, x, y) {
        this.name = name;
        this.zip = zip;
        this.city = city;
        this.x = x;
        this.y = y;
    }

数组的第 6 个和最后一个元素没有在类中使用。

这是我写的一个迭代：

for (var i = 0; i < array.length; i++) {

    var user1 = new User(arrayData[i], arrayData[i+1], arrayData[i+2], arrayData[i+3], arrayData[i+4], arrayData[i+5])
    var user2 = new User(arrayData[i+6], arrayData[i+7], arrayData[i+8], arrayData[i+9], arrayData[i+10], arrayData[i+11])

}

它运行良好，但正如您所见，这并不是一个真正聪明的代码和平。我想让它变得更好。另外，我不知道如何使它适用于 n 个用户。你有什么想法吗？

【问题讨论】：

标签： javascript arrays for-loop iteration

【解决方案1】：

我想你正在寻找

var users = [];
for (var i = 0; i < array.length; i += 6) {
//                                ^^^^^^
    var user = new User(arrayData[i], arrayData[i+1], arrayData[i+2], arrayData[i+3], arrayData[i+4], arrayData[i+5]);
    users.push(user);
}
console.log(users);

_{（使用i+5 < array.length作为循环条件会更准确，但没关系，只要保证数组长度始终是6的倍数）}

@trincot 遵循相同的想法，并通过更简洁的代码（映射、切片、扩展）达到相同的结果，我尽量保持与原始代码一样简单。

【讨论】：

【解决方案2】：

您的循环实际上应该只在其主体中创建一个用户，并且i 应该以 6 步递增。

您还可以使用参数展开来避免必须分别处理五个参数。

最后，使用Array.from，您可以循环并创建一个用户数组：

class User {
    constructor(name, zip, city, x, y) {
        this.name = name;
        this.zip = zip;
        this.city = city;
        this.x = x;
        this.y = y;
    }
}

var array = ["name", " zip", " city", " 51.408", "1.333", " 5.008", "name2", "zip2", "city2", " 51.404", "4.999", "2.434"];

let users = Array.from({length: array.length / 6}, (_, i) => 
    new User(...array.slice(i*6, i*6+5)) // Not including the unused 6th value
);

console.log(users);

【讨论】：

i*6+5 是一个错误还是说明“第 6 个 [...] 元素 [...] 未使用”？如果是后者，它应该有一个评论
是的，我确认是后者并添加了评论。

【解决方案3】：

您可以使用reduce 方法和% 余数运算符来获取每个nth 元素，然后使用slice 和余数运算符来获取类实例的数据。

var array = ["name", " zip", " city", " 51.408", "1.333", " 5.008", "name2", "zip2", "city2", " 51.404", "4.999", "2.434"]

class User {
  constructor(name, zip, city, x, y) {
    this.name = name;
    this.zip = zip;
    this.city = city;
    this.x = x;
    this.y = y;
  }
}

const users = array.reduce((r, e, i, a) => {
  if (i % 6 === 0) {
    const props = a.slice(i, i + 6);
    const user = new User(...props);
    r.push(user);
  }

  return r;
}, [])

console.log(users)

【讨论】：