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

Question

我有一个看起来有点原始的函数，我想知道是否有人对如何改进此函数的外观有任何解决方案。我可以将这个原始循环更改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.width, 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.width, 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.width, this.height)

        }

        player4Img.src = "sprites/player1.png"

    }

}

Answer 1

像这样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, SQUARE)    img.onload = function() {      ctx.drawImage(img, LEFT_LINE + player.x * SQUARE, UPPER_LINE + player.y * SQUARE, this.width, 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, i) => {  if (player.nick != null) {    let img = new Image(SQUARE, 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]}`;  }});

Answer 2

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

Answer 3

另一种变体：for(let p of players){&nbsp; if(p.nick){&nbsp; &nbsp; let playerImg = new Image(SQUARE,SQUARE);&nbsp; &nbsp; playerImg.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(player1Img, LEFT_LINE + p.x*SQUARE, UPPER_LINE + p.y*SQUARE, this.width, this.height)&nbsp; &nbsp; }&nbsp; &nbsp; playerImg.src = "sprites/player1.png"&nbsp; }}我最近了解到的另一个功能：for(let p of players){&nbsp; if(!p.nick) continue;&nbsp; let playerImg = new Image(SQUARE,SQUARE);&nbsp; playerImg.onload = function() {&nbsp; &nbsp; &nbsp;ctx.drawImage(player1Img, LEFT_LINE + p.x*SQUARE, UPPER_LINE + p.y*SQUARE, this.width, this.height)&nbsp; }&nbsp; playerImg.src = "sprites/player1.png"}

Answer 4

function drawPlayers() {&nbsp; players.forEach((player, idx) => {&nbsp; &nbsp; if (player.nick != null) {&nbsp; &nbsp; &nbsp; // uncomment following comment block and delete this comment&nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; var img = new Image(SQUARE, SQUARE)&nbsp; &nbsp; &nbsp; img.onload = () => {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(img, LEFT_LINE + player.x * SQUARE, UPPER_LINE + player.y * SQUARE, this.width, this.height)&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; img.src = "sprites/player"+(idx+1)+".png";&nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; console.log(idx, player.nick, "sprites/player"+(idx+1)+".png");&nbsp; &nbsp; }&nbsp; });}var players=[{nick:"abe"},{},{nick:"chuck"},{nick:"dick"}];drawPlayers();