Javascript：我会如何简化这段代码？

我是新来的Javascript和编码一般，我想不出一种方法来简化这段代码。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帮助我。我试图制作一款记忆游戏，但这太重复了。

来源

2017-04-09 toma

你需要学习如何使用'为'循环。 – 4castle

嵌套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++; 
    } 
    } 
}

来源

2017-04-09 23:17:50 epascarello

这是真的，但要么使用块范围声明，比如'let'，要么声明函数顶部的所有'var's。 OP是一个自称的新手，不应该被误导 –

x在所有情况下都是15？ –

复制粘贴错误....随意编辑错别字.. :) – epascarello

-6

你可以试试：

function placeCards() 
{ 

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

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

    } 

}

来源

2017-04-09 23:18:42

那么他们将如何计算x和y？ – epascarello

好的..如何去epascarello ...除非你知道究竟需要什么样的x和y值，否则你不好。认为两次兄弟 –

我没有投票给你。我修复了你的答案，所以它实际上是可读的。您的答案现在将所有职位设置为未定义。可能为什么你会打架。 – epascarello

没有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();

来源

2017-04-09 23:27:39

你意识到'j'不在内部循环范围内，对吧？ –

一个简单而有效的方法来解决在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" } 
];

来源

2017-04-09 23:50:33

Javascript：我会如何简化这段代码？

回答

相关问题