javascript - 数组对象之间的映射关系

Question

鉴于各种神奇宝贝对战的 JSON:

 [
    {
        "battleID": "1",
        "trainers": [
            {
                "LastName": "Ketchum",
                "ForeName": "Ash"
      },
            {
                "LastName": "Mason",
                "ForeName": "Misty"
      }
    ]
  },
    {
        "battleID": "2",
        "trainers": [
            {
                "LastName": "Mason",
                "ForeName": "Misty"
      },
            {
                "LastName": "Brock",
                "ForeName": "Stuart"
      },
            {
                "LastName": "Ian",
                "ForeName": "Foster"
      }
    ]
  },
    {
        "battleID": "3",
        "trainers": [
            {
                "LastName": "Brock",
                "ForeName": "Stuart"
      },
            {
                "LastName": "Ketchum",
                "ForeName": "Ash"
      }
    ]
  }
]

我想绘制一个网格来记录两个 Pokemon 训练师/玩家之间的比赛次数。一场比赛最多可同时有 4 名玩家。

            Ash Ketchum     Misty Mason     Brock Stuart        Ian Foster
Ash Ketchum      2               1               1                  0

Misty Mason      1               2               1                  1

Brock Stuart     1               1               2                  1

Ian Foster       0               1               1                  1

我的代码:

class Trainer {
constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

coBattles(trainer) {
    var battles = 0;
    jsonData.map(x => {
        x.trainers.map(y => {
            if (this.firstname === y.ForeName && this.lastname === y.LastName) {
                x.trainers.map(z => {
                    if (trainer.firstname === z.ForeName && trainer.lastname === z.LastName)
                        battles++;
                });
            }
        });
    });
    return battles;
}

var pokemonTrainers = [];

// Currently Undesirable as I want a 'unique' array of all participating trainers. 
jsonData.forEach(x => {
    x.trainers.forEach(y => {
        var trainer = new Trainer(y.ForeName, y.LastName);
        pokemonTrainers.push(trainer);
    });
});

//Battles between Misty Mason and Brock Stuart
console.log(pokemonTrainers[1].coBattles(pokemonTrainers[3]));
//returns 1

我正在寻找关于我是否可以在 vanilla JS/第三方库中做得更好的建议。我怎样才能使它足够有效以处理大量的战斗数据(数百万)。

Answer 1

您可以首先获取所有唯一的球员姓名，然后为每个球员构建对象，该对象的值具有另一个对象，其中包含每个球员的姓名，包括他自己。然后你只需要循环你的数据并增加该对象的值，最后构建表。

var data =  [{"battleID":"1","trainers":[{"LastName":"Ketchum","ForeName":"Ash"},{"LastName":"Mason","ForeName":"Misty"}]},{"battleID":"2","trainers":[{"LastName":"Mason","ForeName":"Misty"},{"LastName":"Brock","ForeName":"Stuart"},{"LastName":"Ian","ForeName":"Foster"}]},{"battleID":"3","trainers":[{"LastName":"Brock","ForeName":"Stuart"},{"LastName":"Ketchum","ForeName":"Ash"}]}]

var players = {}
var result = {}

// Get all names
data.forEach(function(e) {
  e.trainers.forEach(function(p) {
    players[p.LastName + ' ' + p.ForeName] = 1
  })
})

// Add to result object
Object.keys(players).forEach(function(name) {
  Object.keys(players).forEach(function(e) {
    result[name] = Object.assign(result[name] || {}, {[e]: 0})
  })
})

// Increment values
data.forEach(function(e) {
  e.trainers.forEach(function(a, j) {
    e.trainers.forEach(function(c, i) {
      result[a.LastName + ' ' + a.ForeName][c.LastName + ' ' + c.ForeName]++
    })
  })
})

var table = document.body.querySelector('table');
var thead = '<tr><td></td><td>' + Object.keys(result).join('</td><td>') + '</td></tr>';
table.innerHTML += thead

for (var key in result) {
  var cells = '';
  for (var i in result[key]) {
    cells += '<td>' + result[key][i] + '</td>';
  }

  var row = '<tr><td>' + key + cells + '</td></tr>';
  table.innerHTML += row;
}

td:not(:first-child) {
  text-align: center;
}

<table></table>