Javascript：我會如何簡化這段代碼？

Question

我是新來的Javascript和編碼一般，我想不出一種方法來簡化這段代碼。

var allCards = ["A1", "A2", "B1","B2", "C1", "C2", "D1", "D2", "E1", "E2", "F1", "F2", "G1", "G2", "H1", "H2"]; 
var allCardBacks = ["back1","back2","back3","back4","back5","back6","back7","back8","back9","back10","back11","back12","back13","back14","back15","back16"]; 

必須有辦法縮短它，但我真的不知道該怎麼做。 還有：

function placeCards() { 
    setPosition(allCards[0],15, 30); 
    setPosition(allCards[1],90, 30); 
    setPosition(allCards[2],165, 30); 
    setPosition(allCards[3],240, 30); 
    setPosition(allCards[4],15, 105); 
    setPosition(allCards[5],90, 105); 
    setPosition(allCards[6],165, 105); 
    setPosition(allCards[7],240, 105); 
    setPosition(allCards[8],15, 180); 
    setPosition(allCards[9],90, 180); 
    setPosition(allCards[10],165, 180); 
    setPosition(allCards[11],240, 180); 
    setPosition(allCards[12],15, 255); 
    setPosition(allCards[13],90, 255); 
    setPosition(allCards[14],165, 255); 
    setPosition(allCards[15],240, 255); 
} 

Ples幫助我。我試圖製作一款記憶遊戲，但這太重複了。

Answer 1

嵌套for循環

function placeCards() { 
    var cnt = 0; 
    var y; 
    var x; 
    for (y = 30; y <= 255; y += 75) { 
    for (x = 15; x <= 240; x += 75) { 
     setPosition(allCards[cnt], x, y); 
     cnt++; 
    } 
    } 
} 

Answer 2

你可以試試：

function placeCards() 
{ 

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

    var x,y; 
    setPosition(allCards[i],x, y); 

    } 

} 

Answer 3

沒有LITMITED卡長度另一種解決方案。

var allCards = ["A1", "A2", "B1","B2", "C1", "C2", "D1", "D2", "E1", "E2", "F1", "F2", "G1", "G2", "H1", "H2"]; 
 
var allCardBacks = ["back1","back2","back3","back4","back5","back6","back7","back8","back9","back10","back11","back12","back13","back14","back15","back16"]; 
 

 
function placeCards() { 
 
    for (var i = 0, l = allCards.length; i < l; i += 4) { 
 
     for (var j = 0; j < 4; j++) { 
 
      setPosition(allCards[i + j], 15 + j * 75, 30 + i/4 * 75); 
 
     } 
 
    } 
 
} 
 

 
function setPosition(card, x, y) { 
 
    console.log(card, x, y); 
 
} 
 

 
placeCards();

Answer 4

一個簡單而有效的方法來解決在JavaScript的問題是將它們分解成小的，集中的功能，每處理一個問題的一個具體方面。

在你的情況下，你想要根據它的索引來計算卡片的位置，每4張卡片增加75個單位的水平和垂直距離。

嘗試像

/** 
 
* Calculates a horizontal and vertical position based on an index. 
 
* @param cardIndex The index of a card within 
 
* @returns an object with `x` and `y` properties corresponding to the horizontal and 
 
* vertical placement offset that should be used for the specified cardIndex. 
 
*/ 
 
function positionFromIndex(cardIndex) { 
 
    return { 
 
    x: 15 + (cardIndex % 4) * 75, 
 
    y: 30 + Math.floor(cardIndex/4) * 75 
 
    }; 
 
} 
 

 
/** 
 
* A stub version of setPosition that simply logs its arguments. 
 
*/ 
 
function setPosition(card, x, y) { 
 
    console.log(card, x, y); 
 
} 
 

 
/** 
 
* Places a card based on its associated array index. 
 
* @param card a string representation of a card. 
 
* @param index the array index associated with the specified card. 
 
*/ 
 
function placeCard(card, index) { 
 
    const position = positionFromIndex(index); 
 
    setPosition(card, position.x, position.y); 
 
} 
 

 
/** 
 
* lays out an array of cards based on their relative order, moving horizontally 
 
* and then vertically. 
 
*/ 
 
function placeCards(cards) { 
 
    // Arrays have a `forEach` method that takes a function and calls it for each 
 
    // element in the array, passing the element and also its index. 
 
    // since our `placeCard` function takes a card and its index we can use it easily 
 
    cards.forEach(function (card, cardIndex) { 
 
    placeCard(card, cardIndex); 
 
    }); 
 
    
 
} 
 

 

 
const allCards = [ 
 
    "A1", "A2", "B1","B2", "C1", "C2", "D1", "D2", 
 
    "E1", "E2", "F1", "F2", "G1", "G2", "H1", "H2" 
 
]; 
 

 
placeCards(allCards);

提示：

在您的示例代碼，你有兩個數組，雖然只使用了一個，你完全程序可能同時使用。相反，保持並行索引的數組相應的屬性，它可以很容易不同步而導致強硬的bug，考慮宣佈allCards作爲對象的數組，像這樣：

const allCards = [ 
    { face: "A1", back: "back1" }, 
    { face: "A2", back: "back2" }, 
    { face: "B1", back: "back3" }, 
    { face: "B2", back: "back4" }, 
    { face: "C1", back: "back5" }, 
    { face: "C2", back: "back6" }, 
    { face: "D1", back: "back7" }, 
    { face: "D2", back: "back8" }, 
    { face: "E1", back: "back9" }, 
    { face: "E2", back: "back10" }, 
    { face: "F1", back: "back11" }, 
    { face: "F2", back: "back12" }, 
    { face: "G1", back: "back13" }, 
    { face: "G2", back: "back14" }, 
    { face: "H1", back: "back15" }, 
    { face: "H2", back: "back16" } 
];