寻求for/while循环学习资源及反转for循环输出的实现方案

一、深入理解for和while循环 #

• for循环适合已知循环次数的场景，它把初始化、条件判断、迭代操作整合在一处，结构清晰，比如遍历数组、固定次数的重复操作。
• while循环更适合未知循环次数的场景，只需要指定循环继续的条件，灵活度更高，比如读取用户输入直到符合要求。
• 核心逻辑：两者都是基于条件判断的循环结构，只要条件为真就会重复执行代码块，区别在于循环的控制方式不同。可以通过把同一个功能分别用两种循环实现来对比理解，比如用for和while都写一遍遍历数组的代码，就能直观感受到差异。

二、反转输出的实现方案 #

你当前的代码是按输入顺序输出城市，要反转输出，只需调整循环的遍历方向即可，以下是两种实现方式：

方案1：修改for循环实现反转

修改后的完整代码：

<html>
 
<body style="text-align:center;">
 
    <h1>Enter Your Five Favorite Cities</h1>
    <form class="" action="index.html">
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
        <input type="text" name="favoriteCities[]" value="" /><br>
        <br>
        <input type="text" name="favoriteCities[]" value="" /><br>
    <br>
        <button type="button" name="button" onclick="favoriteCities()">Submit</button>
  
    </form>
 
    <h2>Results</h2>
 
    <p id="output"></p>
    
    <script type="text/javascript">
        function favoriteCities() {
            var input = document.getElementsByName('favoriteCities[]');
            var r = ""; // 移到函数内，避免多次点击重复累加内容
            
            // 从最后一个元素开始遍历到第一个元素
            for (var i = input.length - 1; i >= 0; i--) {
                var a = input[i]; 
                var uniqueNumber = input.length - i; // 保持序号从1开始递增
                r = r + "City #" + uniqueNumber + " is " + a.value + "<br>";
            }
            
            document.getElementById("output").innerHTML = r;
        }
        
    </script>
    
</body>
 
</html>

关键修改点：

1. 将var r = ""移入函数内部，防止多次点击按钮时输出内容重复累加。
2. 调整for循环参数：
   • 初始化i = input.length - 1：从最后一个输入元素的索引开始（数组索引从0开始，5个元素的最后一个索引为4）
   • 终止条件i >= 0：索引不小于0时持续循环
   • 迭代操作i--：每次循环索引减1，向前遍历一个元素
3. 调整序号计算input.length - i，让反转后的输出序号仍从1开始递增。

方案2：用while循环实现反转

如果想用while循环实现，代码可以改成这样：

function favoriteCities() {
    var input = document.getElementsByName('favoriteCities[]');
    var r = "";
    var i = input.length - 1; // 初始化索引到最后一个元素
    while (i >= 0) { // 循环条件：索引不小于0
        var a = input[i];
        var uniqueNumber = input.length - i;
        r = r + "City #" + uniqueNumber + " is " + a.value + "<br>";
        i--; // 手动递减索引，避免无限循环
    }
    document.getElementById("output").innerHTML = r;
}

注意：while循环必须手动处理索引的变化（i--），否则会陷入无限循环，这是使用while循环时容易出错的点。

内容的提问来源于stack exchange，提问作者machinegod