如何在 javascript 中创建一个可变条件作为参数？

Question

我想测试轮盘游戏中有多少 red/black/even/odd 连续出现。

以下函数将遍历旋转列表 n 并给出红色连续赢了多少次和输了多少次。相同的函数可用于所有其他类型的偶数获胜，但检查不同

color[n[i]] == "red"

我想对这个函数进行不同的检查以测试均匀度

n[i]%2 == 0

这可以做到吗？

function test(n)
{
    var wins = parseInt(0);
    var losses = parseInt(0);

    for(var i=0;i<n.length;i++)
    {
        if(color[n[i]] == "red")
        {
            wins += 1 
            losses = 0
        }
        else
        {
            wins = 0
            losses += 1
        }

    }
.
.
.

第 2 部分

这是完整代码。如果您单击 'Enter Spins' 按钮和 'Toggle Number Pad' 按钮，然后两次添加数字 8，则会显示 3 个警报。

我似乎无法让这 3 条消息分行显示。我尝试了一些示例，但它总是在最后一条消息之前添加 return 行。你知道如何在不同的行上获取多条消息吗？

<html>
<head>
<style>
.bntcal {
    padding: 10px 10px 10px 10px;
    margin: 10px;
}
.bntcaladd {
    padding: 10px 10px 10px 10px;
    margin: 10px;
}

.bntshow{
    padding: 5px 5px 5px 5px;
    margin: 5px;
    width: 10%;
}
.spanhide {
    display: none;
}
.bell {
    float:left;
    display: none;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var wheel0 = [37,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26];
var wheel00 = [37,28,9,26,30,11,7,20,32,17,5,22,34,15,3,24,36,13,1,38,27,10,25,29,12,8,19,31,18,6,21,33,16,4,23,35,14,2];
var wheel = wheel00;
var wColor = "";
var numbers = [];
var color = [];



$(document).ready(function(){

    // --- Menu Buttons
    $("#enterSpins").click(function(){
        $("#divSpins").show();
        $("#divAlerts").hide();
        $("#divHowTo").hide();
    });

    $("#setAlert").click(function(){
        $("#divAlerts").show();
        $("#divSpins").hide();
        $("#divHowTo").hide();
    });

    $("#howTo").click(function(){
        $("#divHowTo").show();
        $("#divSpins").hide();
        $("#divAlerts").hide();

    });

    // ---- Sub Buttons
    $("#enterPad").click(function(){
        $("#showSpinsPad").toggle();
        $("#clearBox").toggle();
        $("#clearBox1").toggle();
        if(!$("#showSpinsPad").is(":hidden"))
        {
            $("#spins").prop("disabled", true)
        }
        else
        {
            $("#spins").prop("disabled", false)
        }

    }); 

    $(".bntcal").click(function(){
        $("#currentSpin").text($("#currentSpin").text()+$(this).val())
        if ($("#currentSpin").text().length > 2)
        {
            $("#currentSpin").text($(this).val())
        }    
    });


    $("#clear").click(function(){
        $("#currentSpin").text("")
    });

    $("#add").click(function(){

        getWheel()
        currentSpin = $("#currentSpin").text()
        if(currentSpin.length > 0)
        {
            if ($("#spins").val().length > 0)
            {
                $("#spins").val($("#spins").val() + ", ");
            }
            if(parseInt(currentSpin)<37)
            {
                $("#spins").val($("#spins").val() + currentSpin);
            }
            if(parseInt(currentSpin) == 37)
            {
                $("#spins").val($("#spins").val() + "0");
            }
            if(parseInt(currentSpin) == 38)
            {
                $("#spins").val($("#spins").val() + "00");
            }
            if(parseInt(currentSpin)>38)
            {
                $("#spins").val($("#spins").val() + "0");
            }

            $("#currentSpin").text("") 
        }

        var n = GetUserNumbers();
        run(n)
    });

    $("#undo").click(function(){
        var n = GetUserNumbers();

        if (n.length>0)
        {
            n.pop();
        }
        $("#spins").val(n)
        run(n)
    });

    $("#clean").click(function(){
        $("#spins").val("")
    });

    $("#run").click(function(){
        var n = GetUserNumbers();
        run(n)
    });

});
// ---------------------------------------------------------------
// --------------------- FUNCTIONS -------------------------------
// ---------------------------------------------------------------

function run(n)
{

    $("#alert").text("")

    // Evens
    var conditions = ['color[n] == "red"','color[n] == "black"','n%2 == 0 && n<37','n%2 == 1 && n<37','n > 18 && n<37','n < 19 && n>0']
    var checklocation = ['Red','Black','Even','Odd','High','Low']
    var idWins = "#evenwin"
    var idLosses = "#evenloss"

    checkCondition(n, conditions, checklocation, idWins, idLosses)

    // Dozens
    var conditions = ['n%3 == 1','n%3 == 2','n%3 == 0','n>=1 && n<=12','n>=13 && n<=24','n>=25 && n<=36']
    var checklocation = ['Row 1 [1,2,3..]','Row 2 [2,3,4..]','Row 2 [3,6,9..]','Dozen 1 [1-12]','Dozen 1 [13-24]','Dozen 1 [25-36]']
    var idWins = "#dozenwin"
    var idLosses = "#dozenloss"

    checkCondition(n, conditions, checklocation, idWins, idLosses)
}

function checkCondition(n, conditions, checklocation, idWins, idLosses)
{
    for(var i=0; i<conditions.length; i++)
    {
        var check = function(n){ if(conditions[i]){ return true; } else { return false; }}
        var wins = checkWins(n, check)
        var losses = checkLosses(n, check)
        if(wins >= $(idWins).val()) { $("#alert").text($("#alert").text()+" "+checklocation[i]+" loses "+wins+" times in a rows.<br/>")}
        if(losses >= $(idLosses).val()) { $("#alert").text($("#alert").text()+" "+checklocation[i]+" loses "+losses+" times in a rows.<br/>")}
    }
}

function checkWins(n, condition)
{
    var wins = parseInt(0);
    for(var i=0;i<n.length;i++)
    {
        if(condition(n[i]))
        {
            wins += 1 
        }
        else
        {
            wins = 0
        }   
    }

    return wins 
}

function checkLosses(n, condition)
{
    var losses = parseInt(0);
    for(var i=0;i<n.length;i++)
    {
        if(condition(n[i]))
        {
            losses = 0
        }
        else
        {
            losses += 1
        }
    }
    return losses
}

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}


function getWheel()
{
    if($("input[name=wheel]:checked").val()=="0")
    {
        wheel = wheel0
    }
    else
    {
        wheel = wheel00
    }
    color = GetColor(wheel)
}

function reset()
{
    evenwins = parseInt(0);
}
function GetUserNumbers()
{
    var n = $("#spins").val().split(",");

    for(var x=0; x<n.length; x++)
    {
        if(n[x].trim() == "0")
        {
            n[x] = "37";
        }
        if(n[x].trim() == "00")
        {
            n[x] = "38";
        }
        n[x] = parseInt(n[x].trim());
    }
    return n;
}

function GetColor(wheel)
{
    var color = Array();
    if(wheel.length==37)
    {
        color[1] = "red";
        color[2] = "black";
        color[3] = "red";
        color[4] = "black";
        color[5] = "red";
        color[6] = "black";
        color[7] = "red";
        color[8] = "black";
        color[9] = "red";
        color[10] = "black";
        color[11] = "black";
        color[12] = "red";
        color[13] = "black";
        color[14] = "red";
        color[15] = "black";
        color[16] = "red";
        color[17] = "black";
        color[18] = "red";
        color[19] = "red";
        color[20] = "black";
        color[21] = "red";
        color[22] = "black";
        color[23] = "red";
        color[24] = "black";
        color[25] = "red";
        color[26] = "black";
        color[27] = "red";
        color[28] = "black";
        color[29] = "black";
        color[30] = "red";
        color[31] = "black";
        color[32] = "red";
        color[33] = "black";
        color[34] = "red";
        color[35] = "black";
        color[36] = "red";
        color[37] = "green";
    }
    if(wheel.length==38)
    {
        color[1] = "red";
        color[2] = "black";
        color[3] = "red";
        color[4] = "black";
        color[5] = "red";
        color[6] = "black";
        color[7] = "red";
        color[8] = "black";
        color[9] = "red";
        color[10] = "black";
        color[11] = "black";
        color[12] = "red";
        color[13] = "black";
        color[14] = "red";
        color[15] = "black";
        color[16] = "red";
        color[17] = "black";
        color[18] = "red";
        color[19] = "red";
        color[20] = "black";
        color[21] = "red";
        color[22] = "black";
        color[23] = "red";
        color[24] = "black";
        color[25] = "red";
        color[26] = "black";
        color[27] = "red";
        color[28] = "black";
        color[29] = "black";
        color[30] = "red";
        color[31] = "black";
        color[32] = "red";
        color[33] = "black";
        color[34] = "red";
        color[35] = "black";
        color[36] = "red";
        color[37] = "green";
        color[38] = "green";
    }
    return color;
}

</script>
</head>
<body>
Toggle Displays</br><br/>
<div >
<button class="bntshow" id="enterSpins">Enter Spins</button><br/>
<button class="bntshow" id="setAlert">Set Alerts</button><br/>
<button class="bntshow" id="howTo">How To</button><br/>
<input type="radio" name="wheel" value="0">0 Wheel<br/>
<input type="radio" name="wheel" value="00" checked>00 Wheel<br/>
</div><br/>
<div id="alert"></div>
<hr>


<!-- Enter Spins -->
<span class="spanhide" id="divSpins">
<button class="bntcaladd" id="enterPad">Toggle Numberpad</button><br/>
<br/>

<span class="spanhide" id='showSpinsPad'>
<br/>
<button class="bntcal" id="calculator" value="0">0</button>
<button class="bntcal" id="calculator" value="00">00</button><br/>
<button class="bntcal" id="calculator" value="1">1</button>
<button class="bntcal" id="calculator" value="2">2</button>
<button class="bntcal" id="calculator" value="3">3</button><br/>
<button class="bntcal" id="calculator" value="4">4</button>
<button class="bntcal" id="calculator" value="5">5</button>
<button class="bntcal" id="calculator" value="6">6</button><br/>
<button class="bntcal" id="calculator" value="7">7</button>
<button class="bntcal" id="calculator" value="8">8</button>
<button class="bntcal" id="calculator" value="9">9</button><br/>
<button class="bntcaladd" id="clear">Clear</button>
<button class="bntcaladd" id="add">ADD</button><span id="currentSpin"></span>
<br/>
<button class="bntcaladd" id="undo">Undo</button><br/>
<span id="currentSpin"></span>
<br/>
</span>
<span id="clearBox">Enter roulette numbers separated by a comma</span><br/>
<textarea rows="10" cols="50" id="spins"></textarea><br/><br/>
<span id="clearBox1">
<button id="clean">Clear Box</button>
<button id="run">Run</button>
</span>

</span>

<!-- Set Alerts -->
<span class="spanhide" id="divAlerts">
<h2>Evens</h2>
<input type="text" id="evenwin" value="2"> Wins in a row<br>
<input type="text" id="evenloss" value="6"> Losses in a row<br>
<br><br>
<h2>Dozens</h2>
<input type="text" id="dozenwin" value="6"> Wins in a row<br>
<input type="text" id="dozenloss" value="6"> Losses in a row<br>
<br><br>

</span>

<!-- How To -->
<span class="spanhide" id="divHowTo">
How To
</span>


</body>
</html>

Answer 1

是的，绝对！

在JavaScript中，您可以将函数保存为变量，从而将它们作为参数传递；这是 JavaScript 最强大的方面之一。因此，例如，如果要检查颜色是否为红色，则可以编写 returns true/false 的条件测试函数，如下所示：

var checkColor = function(nElement){
      var color = color(nElement);
      if(color == 'red'){
          return true;
      }
      else if(color == 'black'){
           return false;
      }
 }

现在，您有一个变量 checkColor，它是一个检查颜色是否为红色的函数。现在，您可以像这样将此函数传递到 test 函数中：

function test(n,testFunc)
{
var wins = parseInt(0);
var losses = parseInt(0);

for(var i=0;i<n.length;i++)
{
    if(testFunc(n[i])) //testFunc = checkColor in this case since we passed in checkColor
    {
        wins += 1 
        losses = 0
    }
    else
    {
        wins = 0
        losses += 1
    }

}

test(n,checkColor); //This is where you pass in checkColor as your test func

例如，如果我们想为偶数添加另一个测试，我们可以这样编写一个函数：

var checkEven = function(nElement){
     if(nElement % 2 == 0){
           return true;
     }
     else{
           return false;
     }
 }

我们可以简单地运行 test 使用这个新条件，例如：

test(n,checkEven);

因此，从这里开始，您应该了解如何创建测试函数并将其传递到通用测试函数中。如果您需要说明，请随时询问！

Answer 2

只需将条件作为函数传递即可。

Javascript:

const myFunctionByCondition = (conditionFn) => {
   const index = 10

   if (conditionFn(index)) return "Condition applies"
   return "Condition does not apply"
}

const val = myFunctionByCondition(i => i >= 10)

打字稿：

const myFunctionByCondition = (conditionFn: (i: number) => boolean) => {
   const index = 10

   if (conditionFn(index)) return "Condition applies"
   return "Condition does not apply"
}

const val = myFunctionByCondition(i => i >= 10)

如何在 javascript 中创建一个可变条件作为参数？

How can I create a variable condition as a parameter in javascript?

javascript

parameters

reusability