Javascript-如何重构代码以使其看起来更干净

我有一个看起来有点原始的函数，我想知道是否有人有任何关于如何改进这个函数外观的解决方案。我是否可以更改此基本循环

if（）。。。if（）…

是为了看起来更干净更好的东西吗

函数drawPlayers（）{
如果（玩家[0]。尼克！=null）{
let player1Img=新图像（正方形，正方形）
player1Img.onload=函数（）{
ctx.drawImage（player1Img，左_线+玩家[0]。x*正方形，上_线+玩家[0]。y*正方形，this.width，this.height）
}
player1Img.src=“sprites/player1.png”
}
如果（玩家[1]。尼克！=null）{
let player2Img=新图像（正方形，正方形）
player2Img.onload=函数（）{
ctx.drawImage（player2Img，左_线+玩家[1].x*SQUARE，上_线+玩家[1].y*SQUARE，this.width，this.height）
}
player2Img.src=“sprites/player1.png”
}
如果（玩家[2]。尼克！=null）{
let player3Img=新图像（正方形，正方形）
player3Img.onload=函数（）{
ctx.drawImage（player3Img，左线+玩家[2].x*SQUARE，上线+玩家[2].y*SQUARE，this.width，this.height）
}
player3Img.src=“sprites/player1.png”
}
如果（玩家[3]。尼克！=null）{
let player4Img=新图像（正方形，正方形）
player4Img.onload=函数（）{
ctx.drawImage（player4Img，左线+玩家[3]。x*正方形，上线+玩家[3]。y*正方形，this.width，this.height）
}
player4Img.src=“sprites/player1.png”
}
}

像这样

players.forEach（player=>{
如果（player.nick！=null）{
设img=新图像（正方形，正方形）
img.onload=函数（）{
ctx.drawImage（img，左线+播放器.x*正方形，上线+播放器.y*正方形，this.width，this.height）
}
img.src=“sprites/player1.png”//或“sprites/${player.image}”；
}
});

如果有另一个图像名称数组，则可以向forEach添加索引：

players.forEach（（player，i）=>{
如果（player.nick！=null）{
设img=新图像（正方形，正方形）
img.onload=函数（）{
ctx.drawImage（img，左线+播放器.x*正方形，上线+播放器.y*正方形，this.width，this.height）
}
img.src=`sprites/${images[i]}`；
}
});

const SQUARE=100；
常量图像=[
"https://via.placeholder.com/100x100?text=Image1",
"https://via.placeholder.com/100x100?text=Image2",
"https://via.placeholder.com/100x100?text=Image3"
];
康斯特玩家=[
{尼克：“弗雷德”，x:10，y:20}，
{尼克：“乔”，x:20，y:40}，
{尼克：“山姆”，x:30，y:50}
];
players.forEach（（player，i）=>{
如果（player.nick！=null）{
设img=新图像（正方形，正方形）
img.onload=函数（）{
log（i，player.nick，`ctx.drawImage（img，左${player.x}*SQUARE，上${player.y}*SQUARE，${this.width}，${this.height}）`）
}
img.src=`${images[i]}`；
}
});您可以为

循环执行

function drawPlayers() {
  for (let i = 0; i < players.length; i++) {
    if (players[i].nick != null) {
      let playerImg = new Image(SQUARE, SQUARE)
      playerImg.onload = function() {
        ctx.drawImage(
          playerImg,
          LEFT_LINE + players[i].x * SQUARE,
          UPPER_LINE + players[i].y * SQUARE,
          this.width,
          this.height
        )
      }
      // if the image is fixed
      playerImg.src = 'sprites/player1.png'
      // else
      // playerImg.src = `sprites/player${i + 1}.png`
    }
  }
}

函数drawPlayers（）{
for（设i=0；i
另一种变体：

for(let p of players){
  if(p.nick){
    let playerImg = new Image(SQUARE,SQUARE);
    playerImg.onload = function() {
        ctx.drawImage(player1Img, LEFT_LINE + p.x*SQUARE, UPPER_LINE + p.y*SQUARE, this.width, this.height)
    }
    playerImg.src = "sprites/player1.png"
  }
}

我最近了解到的另一个特点是：

for(let p of players){
  if(!p.nick) continue;
  let playerImg = new Image(SQUARE,SQUARE);
  playerImg.onload = function() {
     ctx.drawImage(player1Img, LEFT_LINE + p.x*SQUARE, UPPER_LINE + p.y*SQUARE, this.width, this.height)
  }
  playerImg.src = "sprites/player1.png"
}


函数drawPlayers（）{
players.forEach（（player，idx）=>{
如果（player.nick！=null）{
//取消注释下面的注释块并删除此注释
/*
var img=新图像（正方形，正方形）
img.onload=（）=>{
ctx.drawImage（img，左线+播放器.x*正方形，上线+播放器.y*正方形，this.width，this.height）
};
img.src=“精灵/玩家”+（idx+1）+“.png”；
*/
log（idx，player.nick，“sprites/player”+（idx+1）+“.png”）；
}
});
}
var玩家=[{nick:abe}，{}，{nick:chuck}，{nick:dick}]；
抽球员（）使用一个循环和一个播放器图像数组？如果你想使代码作为一个函数可重用，那么你必须识别可变的部分。这些将成为函数参数。相同的零件进入功能体。它类似于一个循环。我的错。2.我又举了一个例子。forEach已经由我之前的人提供了）