使用 for 循环从 Array 中检索元素答案

【问题标题】：Using a for-loop to retrieve elements from an Array使用 for 循环从 Array 中检索元素
【发布时间】：2021-03-25 00:10:55
【问题描述】：

var beatlesArray; //global variable

var $ = function(id) {
  return document.getElementById(id);
}

function processImages() {
  beatlesNameStr = "";

  for (cntr = 1; cntr <= beatlesArray.length; cntr++) {
    console.log(beatlesArray[cntr]);
    beatlesNameStr += cntr + ". ";
  }

  $("list").innerHTML = beatlesNameStr;
}

function addJohn() {
  beatlesArray.push("John");
  this.border = '4px';
  this.style.color = 'yellow';

  $("paul").border = "0px";
  $("george").border = "0px";
  $("ringo").border = "0px";
}

function addPaul() {
  beatlesArray.push("Paul");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("george").border = "0px";
  $("ringo").border = "0px";
}

function addGeorge() {
  beatlesArray.push("George");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("paul").border = "0px";
  $("ringo").border = "0px";
}

function addRingo() {
  beatlesArray.push("Ringo");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("paul").border = "0px";
  $("george").border = "0px";
}

window.onload = function() {
  $("showlist").onclick = processImages;
  $("john").onclick = addJohn;
  $("paul").onclick = addPaul;
  $("george").onclick = addGeorge;
  $("ringo").onclick = addRingo;
  beatlesArray = new Array();
}

<html>

<head>
  <title>Assignment 4</title>
  <link rel="stylesheet" type="text/css" href="asgn4_dove.css">
  <script src="asgn4_dove.js"></script>
</head>

<body>
  <h1>Assignment 4</h1>

  <h4>The Beatles</hr>

    <table border='1' cellpadding='8px'>
      <tr>
        <td>
          <img id="john" src="http://profperry.com/Classes20/JQuery/beatles_john.jpg" alt="Picture of John">
          <br>John
        </td>
        <td>
          <img id="paul" src="http://profperry.com/Classes20/JQuery/beatles_paul.jpg" alt="Picture of Paul">
          <br>Paul
        </td>
        <td>
          <img id="george" src="http://profperry.com/Classes20/JQuery/beatles_george.jpg" alt="Picture of George">
          <br>George
        </td>
        <td>
          <img id="ringo" src="http://profperry.com/Classes20/JQuery/beatles_ringo.jpg" alt="Picture of Ringo">
          <br>Ringo
        </td>
    </table>
    <br><br>
    <input type="button" id="showlist" value="Show Me the List">
    <br>
    <p id="list"></p>

</body>

</html>

我是 JS 新手，最近的课堂作业经常遇到问题。我已经向我的教授寻求帮助，但我仍然不明白。对于我们的任务，我需要使用 for 循环从我的 beatlesArray 中检索元素，如果单击图像，则将它们连接成具有这种格式的字符串变量：1. Paul 2. George。为此，我被告知不要使用beatlesArray.join(", ")，但无法弄清楚如何在我的 beatlesNameStr 中添加元素。有人可以帮忙吗？

我尝试使用beatlesNameStr += cntr + ". " + addJohn...等将它们添加到字符串中，但这根本不起作用。我只是对如何准确添加正在推送的元素感到困惑。

【问题讨论】：

提示：您正在输出 console.log(beatlesArray[cntr]) — 这不是显示您想要的名称吗？然后，您只需要将 beatlesArray[cntr] 中的名称添加到当前的 _beatlesNameStr_ 中，其方式类似于您添加 cntr + ". " 的方式
请添加您的 HTML 以便运行 sn-p。
addJohn 不是数组元素，甚至不是字符串，为什么要使用+ addJohn？
感谢大家的洞察和反馈！我设法弄清楚了，看看我哪里出错了。

标签： javascript arrays for-loop

【解决方案1】：

你在正确的轨道上。像这样更新 processImages 函数：

function processImages ()
{
    var beatlesNameStr = "";    
    for (cntr = 1; cntr <= beatlesArray.length; cntr++)
    {
        beatlesNameStr += cntr + ". " + beatlesArray[cntr - 1] + " ";
    }   
    $("list").innerHTML = beatlesNameStr; 
}

或使用 ES6 语法：

function processImages ()
{
    var beatlesNameStr = beatlesArray.reduce((result, current, index) => `${result} ${index + 1}.${current}`, "");  
    $("list").innerHTML = beatlesNameStr; 
}

【讨论】：

如果不允许他使用join()，我想reduce()也会被禁止。
谢谢！第一个对我有用。第二个是我们正在学习的东西，但我计划在这个学期之后继续学习 JS，并确保学习这个。