Javascript，比较数组中的元素，如果为 true 则执行函数

Question

我正在努力让这件事继续下去 - 这基本上是一个非常简单的游戏，你必须猜测哪个运行者将首先冲过终点线。

基本上，它是一条有 4 名运行者的赛道。 search 按钮给出数组中的随机数。这个数字显示了哪个运行者向终点线前进了一步。

我把这个东西分成两部分。首先，我制作了随机数生成器，其他部分只是轨道。我可以用 4 个按钮让运行者单独移动。现在我不知道如何进行这项工作。

我尝试了不同的代码，但仍然没有任何效果。我是 JavaScript 新手，有一点 PHP 知识，我认为 PHP 的工作方式并不是我能够完成这项工作的方式。

我尝试了不同的方法来比较随机数生成器的结果，我认为这是我得到的最接近的结果，并且我缺少一点我无法弄清楚的代码。

谢谢。

var runner = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
];

function GetValue() {
  var random = runner[Math.floor(Math.random() * runner.length)];
  //alert(random);
  document.getElementById("message").innerHTML = random;
  for (var i = runner.length - 1; i >= 0; i--) {
    if (runner[i] === random) {
      runner.splice(i, 1);
      break;
    }
  }

  document.getElementById("demo1").innerHTML = runner;
}

var imgObjgroen = null;
var imgObjrood = null;
var imgObjgeel = null;
var imgObjblauw = null;

function init() {
  imgObjblauw = document.getElementsByClassName('loperblauw');
  imgObjblauw.style.left = '35px';
  imgObjgeel = document.getElementsByClassName('lopergeel');
  imgObjgeel.style.left = '35px';
  imgObjrood = document.getElementsByClassName('loperrood');
  imgObjrood.style.left = '35px';
  imgObjgroen = document.getElementsByClassName('lopergroen');
  imgObjgroen.style.left = '35px';
}

if (random === 1) {
  imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px';
}

if (random === 2) {
  imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px';
}

if (random === 3) {
  imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px';
}

if (random === 4) {
  imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px';
}

window.onload = init;

<div id="wrap">
  <img id="baan" src="baan.png">
  <img id="lopergroen" src="lopergroen.png">
  <img id="loperrood" src="loperrood.png">
  <img id="lopergeel" src="lopergeel.png">
  <img id="loperblauw" src="loperblauw.png">
</div>

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />

<p id="message" class="test">test</p>



<p id="demo1"></p>

Answer 1

您的代码并不是真正的高性能，因为您需要循环并测试所有数组元素，我认为您正在寻找的是 Javascript array.filter() 。它将完美地实现您想要做的测试并过滤结果。

你的代码是:

var random = runner[Math.floor(Math.random() * runner.length)];

document.getElementById("message").innerHTML = random;

var filtered = [12, 5, 8, 130, 44].filter(function(value){
          return value === random;
);