JavaScript中为循环输出数组元素添加序号的教程

聖光之護

发布时间：2025-11-15 09:20:12

302人浏览过

来源于php中文网

原创

JavaScript中为循环输出数组元素添加序号的教程

本教程详细介绍了如何在javascript中，利用`for`循环的索引`i`为动态生成的数组输出元素添加唯一序号。通过一个用户输入城市列表的示例，演示了如何获取表单数据，并在循环中将`i + 1`作为序号，最终在网页上展示带有序号的列表项，确保输出的清晰与有序。

在前端开发中，我们经常需要处理用户输入或从数据源获取的列表数据，并将其动态展示在网页上。为了提高可读性和用户体验，为列表中的每个项目添加一个唯一的序号是一种常见需求。本文将以一个具体的示例，详细讲解如何利用JavaScript的for循环索引来实现这一功能。

核心概念：利用循环索引生成序号

在JavaScript的for循环中，循环变量i（或任何你定义的索引变量）从0开始递增，直到达到数组或集合的长度减一。这个索引i天然地为我们提供了一个唯一的数字标识。由于数组索引是零基的（即从0开始），为了得到符合人类习惯的从1开始的序号，我们只需简单地将i + 1作为序号即可。

示例场景：动态显示用户输入的城市列表

假设我们有一个网页表单，允许用户输入他们最喜欢的五个城市。当用户点击提交按钮后，我们希望在页面上显示一个带有序号的城市列表，例如：“City #1 is Los Angeles.”、“City #2 is San Francisco.”等等。

HTML 结构

首先，我们需要构建相应的HTML结构，包括输入框、提交按钮以及一个用于显示结果的区域。

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
    <title>城市列表输入</title>
    <style>
        body { text-align: center; font-family: sans-serif; }
        input[type="text"] { margin-bottom: 10px; padding: 8px; width: 200px; }
        button { padding: 10px 20px; cursor: pointer; }
        #outputList { margin-top: 20px; text-align: left; display: inline-block; }
        #outputList ul { list-style: none; padding: 0; }
        #outputList li { margin-bottom: 5px; }
    </style>
</head>
<body>

    <h2>输入您最喜欢的五个城市</h2>
    <form id="cityForm">
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 1"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 2"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 3"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 4"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 5"/><br>
        <button type="button" onclick="displayFavoriteCities()">提交</button>
    </form>

    <h3>结果</h3>
    <div id="outputList"></div>

    <script type="text/javascript">
        // JavaScript 代码将在这里
    </script>

</body>
</html>

在上述HTML中，我们使用了五个input元素，它们的name属性都设置为favoriteCities[]。这种命名方式使得我们可以在JavaScript中方便地通过document.getElementsByName()方法获取所有这些输入元素。outputList是一个div元素，用于承载最终生成的带序号的城市列表。

Giiso写作机器人

Giiso写作机器人，让写作更简单

下载

JavaScript 实现

接下来是实现核心逻辑的JavaScript代码。我们将创建一个名为displayFavoriteCities的函数，该函数将在用户点击提交按钮时被调用。

function displayFavoriteCities() {
    // 1. 获取所有名为 'favoriteCities[]' 的输入元素
    const inputElements = document.getElementsByName('favoriteCities[]');
    let listHtml = ''; // 用于构建最终的HTML字符串

    // 2. 遍历所有输入元素
    for (let i = 0; i < inputElements.length; i++) {
        const cityInput = inputElements[i];
        const cityValue = cityInput.value.trim(); // 获取输入值并去除首尾空格

        // 3. 仅当输入不为空时才添加到列表中
        if (cityValue) {
            // 使用模板字符串构建带序号的列表项
            listHtml += `<li>City #${i + 1} is ${cityValue}</li>`;
        }
    }

    // 4. 将生成的HTML内容插入到页面中
    const outputContainer = document.getElementById("outputList");
    if (listHtml) {
        // 如果有城市输入，则包裹在无序列表 ul 中
        outputContainer.innerHTML = `<ul>${listHtml}</ul>`;
    } else {
        // 如果没有城市输入，显示提示信息
        outputContainer.innerHTML = '<p>请至少输入一个城市。</p>';
    }
}

代码解析：

document.getElementsByName('favoriteCities[]'): 这个方法返回一个NodeList，其中包含了所有name属性为favoriteCities[]的HTML元素。它类似于一个数组，我们可以对其进行遍历。
for (let i = 0; i < inputElements.length; i++): 这是一个标准的for循环，i就是我们所需的循环索引，它从0开始，每次循环递增1。
const cityInput = inputElements[i];: 在每次循环中，我们通过索引i访问当前的输入元素。
const cityValue = cityInput.value.trim();: 获取当前输入框的值。.trim()方法用于移除字符串两端的空白字符，这有助于处理用户可能输入的额外空格。
if (cityValue): 这是一个简单的条件判断，确保只有非空的城市名称才会被添加到结果列表中。
listHtml += \
City #${i + 1} is ${cityValue}

`;`

我们使用JavaScript的模板字符串（由反引号 ` 包裹）来拼接字符串，这样可以更清晰地嵌入变量。
#${i + 1}：这里的i + 1就是我们为每个城市生成的唯一序号。当i为0时，序号是1；当i为1时，序号是2，以此类推。
<li>...</li>：为了更好地语义化和样式控制，我们将每个城市信息包裹在<li>标签中，这暗示着它是一个列表项。

document.getElementById("outputList").innerHTML = ...;: 最后，我们将构建好的listHtml字符串（如果非空，则包裹在<ul>标签中）赋值给outputList元素的innerHTML属性，从而在页面上显示结果。

完整示例代码

将HTML和JavaScript代码整合在一起，形成一个完整的可运行页面：

<!DOCTYPE html>
<html>
<head>
    <title>城市列表输入</title>
    <meta charset="UTF-8">
    <style>
        body { text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-top: 50px; background-color: #f4f4f4; color: #333; }
        h2, h3 { color: #0056b3; }
        form { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: inline-block; }
        input[type="text"] { margin-bottom: 15px; padding: 10px; width: 250px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
        button { padding: 10px 25px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; }
        button:hover { background-color: #0056b3; }
        #outputList { margin-top: 30px; text-align: left; display: inline-block; max-width: 400px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        #outputList ul { list-style: none; padding: 0; margin: 0; }
        #outputList li { margin-bottom: 8px; font-size: 18px; line-height: 1.5; color: #555; }
        #outputList p { font-style: italic; color: #888; }
    </style>
</head>
<body>

    <h2>输入您最喜欢的五个城市</h2>
    <form id="cityForm">
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 1"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 2"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 3"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 4"/><br>
        <input type="text" name="favoriteCities[]" value="" placeholder="城市 5"/><br>
        <button type="button" onclick="displayFavoriteCities()">提交</button>
    </form>

    <h3>结果</h3>
    <div id="outputList">
        <p>请在上方输入城市并点击提交。</p>
    </div>

    <script type="text/javascript">
        function displayFavoriteCities() {
            const inputElements = document.getElementsByName('favoriteCities[]');
            let listHtml = '';

            for (let i = 0; i < inputElements.length; i++) {
                const cityInput = inputElements[i];
                const cityValue = cityInput.value.trim();

                if (cityValue) {
                    listHtml += `<li>City #${i + 1} is ${cityValue}</li>`;
                }
            }

            const outputContainer = document.getElementById("outputList");
            if (listHtml) {
                outputContainer.innerHTML = `<ul>${listHtml}</ul>`;
            } else {
                outputContainer.innerHTML = '<p>请至少输入一个城市。</p>';
            }
        }
    </script>

</body>
</html>

注意事项与最佳实践

变量声明：在现代JavaScript中，推荐使用const和let来声明变量，而不是var。const用于声明常量（不可重新赋值），let用于声明块级作用域变量。
语义化HTML：对于列表数据，使用<ul>（无序列表）和<li>（列表项）标签是更符合语义化的做法，而不是简单地使用<br>换行。这不仅有助于搜索引擎优化，也方便屏幕阅读器等辅助技术理解页面结构。
重置输出：在每次调用displayFavoriteCities函数时，listHtml变量都会被重新初始化为空字符串，这确保了每次提交都会生成全新的列表，而不会在旧列表的基础上追加。
用户体验：可以添加一些额外的验证，例如检查用户是否输入了至少一个城市，或者对输入内容进行更复杂的验证。
事件监听：在更复杂的应用中，推荐使用addEventListener来绑定事件，而不是直接在HTML中使用onclick属性。例如：
```
document.querySelector('#cityForm button').addEventListener('click', displayFavoriteCities);
```
这样可以将JavaScript行为与HTML结构更好地分离。

总结

通过本教程，我们学习了如何在JavaScript中利用for循环的索引i来为动态生成的数组或列表元素添加唯一的序号。关键在于理解i是零基索引，并通过i + 1来获得从1开始的序号。结合HTML的语义化标签和JavaScript的模板字符串，我们可以轻松创建出结构清晰、用户友好的动态列表。掌握这一技巧，将有助于您在前端开发中更高效地处理和展示列表数据。

如何在分页 PDF 中为 HTML 表格自动重复显示表头

Bootstrap 响应式表单布局：实现标题与值垂直对齐的两种专业方案

响应式 Bootstrap 表格式布局：实现标题与值行对齐的两种专业方案

Bootstrap 响应式行与列对齐：解决多行内容导致标题错位问题

Bootstrap 响应式行与列对齐：解决标题-值错位问题