Javascript-如何重构代码以使其看起来更简洁

问题描述

我有一个看起来很原始的函数，我想知道是否有人对如何改善此函数的外观有任何解决方案。我可以将此原始循环if()... if()...更改为看起来更干净更好的东西吗？

function drawPlayers () {
    if (players[0].nick != null) {
        let player1Img = new Image(SQUARE,SQUARE)
        player1Img.onload = function() {
            ctx.drawImage(player1Img,LEFT_LINE + players[0].x * SQUARE,UPPER_LINE + players[0].y * SQUARE,this.width,this.height)
        }
        player1Img.src = "sprites/player1.png"
    }
  
    if (players[1].nick != null) {
        let player2Img = new Image(SQUARE,SQUARE)
        player2Img.onload = function() {
            ctx.drawImage(player2Img,LEFT_LINE + players[1].x * SQUARE,UPPER_LINE + players[1].y * SQUARE,this.height)
        }
        player2Img.src = "sprites/player1.png"
    }
  
    if (players[2].nick != null) {
        let player3Img = new Image(SQUARE,SQUARE)
        player3Img.onload = function() {
            ctx.drawImage(player3Img,LEFT_LINE + players[2].x * SQUARE,UPPER_LINE + players[2].y * SQUARE,this.height)
        }
        player3Img.src = "sprites/player1.png"
    }
  
    if (players[3].nick != null) {
        let player4Img = new Image(SQUARE,SQUARE)
        player4Img.onload = function() {
            ctx.drawImage(player4Img,LEFT_LINE + players[3].x * SQUARE,UPPER_LINE + players[3].y * SQUARE,this.height)
        }
        player4Img.src = "sprites/player1.png"
    }
}

解决方法

赞

players.forEach(player => {
  if (player.nick != null) {
    let img = new Image(SQUARE,SQUARE)
    img.onload = function() {
      ctx.drawImage(img,LEFT_LINE + player.x * SQUARE,UPPER_LINE + player.y * SQUARE,this.width,this.height)
    }
    img.src = "sprites/player1.png"; // or `sprites/${player.image}`;
  }
});

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

players.forEach((player,i) => {
  if (player.nick != null) {
    let img = new Image(SQUARE,this.height)
    }
    img.src = `sprites/${images[i]}`;
  }
});

const SQUARE = 100;
const images = [
  "https://via.placeholder.com/100x100?text=Image1","https://via.placeholder.com/100x100?text=Image2","https://via.placeholder.com/100x100?text=Image3"
];
const players = [
{ nick: "Fred",x: 10,y: 20 },{ nick: "Joe",x: 20,y: 40 },{ nick: "Sam",x: 30,y: 50 }
];



players.forEach((player,SQUARE)
    img.onload = function() {
      console.log(i,player.nick,`ctx.drawImage(img,LEFT_LINE ${player.x} * SQUARE,UPPER_LINE + ${player.y} * SQUARE,${this.width},${this.height})`)
    }
    img.src = `${images[i]}`;
  }
});

,

您可以进行for循环

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.height
        )
      }
      // if the image is fixed
      playerImg.src = 'sprites/player1.png'
      // else
      // playerImg.src = `sprites/player${i + 1}.png`
    }
  }
}

,

另一个变体：

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.height)
    }
    playerImg.src = "sprites/player1.png"
  }
}

,

function drawPlayers() {
  players.forEach((player,idx) => {
    if (player.nick != null) {
      // uncomment following comment block and delete this comment
      /*
      var img = new Image(SQUARE,SQUARE)
      img.onload = () => {
        ctx.drawImage(img,this.height)
      };
      img.src = "sprites/player"+(idx+1)+".png";
      */
      console.log(idx,"sprites/player"+(idx+1)+".png");
    }
  });
}

var players=[{nick:"abe"},{},{nick:"chuck"},{nick:"dick"}];
drawPlayers();