连续循环遍历数组 onClick 并渲染每个元素答案

【问题标题】：Loop continuously through an array onClick and render each element连续循环遍历数组 onClick 并渲染每个元素
【发布时间】：2019-01-20 11:31:48
【问题描述】：

我想遍历一个数组 onClick 并一个一个地渲染元素，只要数组长度和当我到达数组的末尾时再次从头开始。例如，我有 2 个数组，如下所示，我想循环第一个数组，只要第二个数组的长度，但每次第一个数组在结束后从头开始：

const a = [a, b, c, d, e] and const b = [a, b, c, d, e, f, g, h]

changePlayers = () => {
  index++; // if this is the last item then go to first item
  index = index % a.length
}

我正在尝试从第一个数组 a[0] 一次渲染每个元素

这是为了我正在尝试制作的真心话大冒险游戏。

【问题讨论】：

你怎么调用这个函数，你给index的值是多少？
我想给出第一个数组的值，但到目前为止我所尝试的一切都没有奏效。让 val = a[0]
使用单独的函数进行循环，一旦for循环执行，自调用函数
请编辑您的问题以发布您迄今为止尝试过的代码，并阅读how to write a good question on StackOverflow 上的建议。目前尚不清楚您要渲染哪些元素。
我已经编辑了这个问题，我希望现在更清楚我想要做什么。谢谢

标签： javascript arrays reactjs object

【解决方案1】：

你可以用一个循环来做到这一点。运行循环并迭代第二个数组的长度。在循环外有一个变量（我将其命名为indexTracker），它将跟踪第一个数组的索引。然后在循环中的 if 语句中，如果第一个数组的索引超出范围，则重置 indexTracker

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];

// This will track the indices of the first array
// We'll reset this when we go out of bound
let indexTracker = 0;

// For the length of the second array
for(var i = 0; i < arr2.length; i++) {

  // If index does *not* exist for arr1
  if(!arr1[indexTracker]) {
    // reset the index tracker
    indexTracker = 0;
  }

  // Do whatever you want with arr1 values here.
  // You can return / render them, etc. I'm just console logging.
  console.log(arr1[indexTracker]);

  // Note: You can still use variable i to access values in arr2. I.e.:
  // console.log(arr2[i]);

  // Increment the indexTracker
  indexTracker++;
}

【讨论】：

它始终显示 arr1 的第一个元素，如果我将 indexTracker 增加 1，则显示 arr1 的第 3 个元素
糟糕，我忘了增加 indexTracker！我更新了我的答案以显示在哪里做。当我运行上面的代码时，我得到它的输出：a, b, c, d, e, a, b, c（当然在不同的行上）。这是你要找的输出吗？
我看到了，但不是我要找的。我正在寻找的结果是在每次点击时显示来自 arr1 的单个元素，然后当我到达 arr1 的末尾时从 arr1 的开头循环到 arr2 的结尾。示例输出：点击输出a，点击输出b，点击输出c，如果arr1的结尾从arr1的开头开始点击输出a，点击输出b，点击输出c直到arr2的结尾。我将尝试创建一个 codepen 并在这里分享。再次感谢
这是我创建的代码笔，所以更容易解释我的意思codepen.io/panoscool/pen/LBwKXj?editors=0010

【解决方案2】：

这是我在 W3school 尝试时得到的回应。

HTML:

 </head>
 <body>

  <button onclick="myfunction()">Click Me</button>
  <div id='demo'></div>
  <script>
       function myfunction(){

       var numbers = [4, 9, 16, 25];
       var number1 = [3, 8, 15];
        var x = "";
        numbers.forEach(function(val){
        number1.forEach(function(val2){
               x += val2+" - "+val+ "<br>";
            });
         });
         document.getElementById('demo').innerHTML = x;

        }
    </script>

    </body>
   </html>

输出

【讨论】：

这显示了两个数组的输出，我正在寻找的是在每次点击时显示来自 arr1 的单个元素，然后当我到达 arr1 的末尾时从 arr1 的开头循环直到arr2 结束。示例输出：onClick 输出 a，onClick 输出 b，onClick 输出 c，如果 arr1 的结尾从 arr1 的开头开始 onClick 输出 a，onClick 输出 b，onClick 输出 c 直到 arr2 的结尾。我会尝试创建一个codepen并在这里分享
这是我创建的代码笔，所以更容易解释我的意思codepen.io/panoscool/pen/LBwKXj?editors=0010

【解决方案3】：

请尝试以下：

 var numbers = [4, 9, 16, 25];
 var number1 = [3, 8, 15];
 var x = "";
 numbers.forEach(function(val){
   number1.forEach(function(val2){
      x += val2+" - "+val+ "<br>";
     });
  });

【讨论】：