HTML 循环遍历数组 - Javascript

在Web开发中，HTML和Javascript是两个最为重要的技术。HTML主要负责网页的结构和内容，而Javascript是一门强大的脚本语言，可以使HTML网页更为丰富和交互性。在很多情况下，我们需要从服务器或客户端获取一组数据，然后在网页上进行展示。这时，使用Javascript循环遍历数组就是常见的解决方案之一。

遍历数组

在Javascript中，我们可以使用for循环遍历数组。示例代码如下：

var arr = ['apple', 'banana', 'cherry'];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

上述代码会输出数组中的每个元素，即：

apple
banana
cherry

在网页上，我们可以使用Javascript的document.write方法来动态生成HTML代码。比如，我们可以将上述代码修改为下面的形式：

var arr = ['apple', 'banana', 'cherry'];

for (var i = 0; i < arr.length; i++) {
  document.write('<li>' + arr[i] + '</li>');
}

上述代码会生成一个无序列表，其中每个列表项就是数组中的一个元素：

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
</ul>

将数据渲染到HTML模板中

上述方法可以将数据展示在网页上，但通常我们更希望将数据渲染到特定的HTML模板中，以便更好地控制样式和布局。这时，我们可以使用一些前端框架如jQuery、Vue.js等，也可以使用Javascript模板引擎。这里以Mustache.js为例，介绍如何将数据渲染到HTML模板中。

Mustache.js是一种简单而强大的模板语言，它可以让我们更轻松地完成数据和视图的绑定。首先，我们需要在网页中引入Mustache.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"></script>

然后，在HTML模板中，我们可以使用{{}}来包含数据的占位符。比如，下面是一个包含3个占位符的HTML模板：

<ul>
  {{#items}}
  <li>{{name}} - {{price}} 元</li>
  {{/items}}
</ul>

上述模板中，{{#items}}和{{/items}}表示数组items的范围，{{name}}和{{price}}则表示每个数组元素中的属性。我们将模板保存在一个字符串变量中，比如：

var template = `
<ul>
  {{#items}}
  <li>{{name}} - {{price}} 元</li>
  {{/items}}
</ul>
`;

接着，我们可以定义一个数组items，然后使用Mustache.js将数据渲染到上述HTML模板中：

var items = [
  { name: 'apple', price: 5 },
  { name: 'banana', price: 3 },
  { name: 'cherry', price: 8 }
];

var rendered = Mustache.render(template, { items: items });

document.getElementById('output').innerHTML = rendered;

上述代码中，Mustache.render方法将数组items渲染到HTML模板中，并返回一个渲染后的HTML字符串。最后，我们使用document.getElementById('output').innerHTML方法将HTML代码插入到网页中指定的元素中（这里是id为output的元素）。

总结

Javascript的循环遍历数组是一种常见的网页开发技术，可以将数据动态地展示在网页中。此外，使用模板引擎也可以更加方便地将数据渲染到HTML模板中。以上就是HTML循环遍历数组和Mustache.js模板引擎的介绍和示例代码。