each的用法（each的用法）

each的用法

在HTML的开发中，常常会遇到需要重复显示相同结构的内容的情况。例如，展示一个列表的每个元素、渲染一组图片或者展示一组数据等等。在这种情况下，我们可以使用each来简化代码的编写，并且提高代码的可读性和可维护性。

使用each遍历数组

首先，我们可以使用each来遍历一个数组并展示其中的每一个元素。假设我们有一个包含不同水果的数组：

```html

<% fruits.forEach(function(fruit) { %>
• <%= fruit %>
<% }); %>

```

在上面的例子中，我们使用了forEach方法来遍历数组fruits中的每一个元素，并利用<%= fruit %>来输出每个水果的名字。最终得到的输出是一个包含所有水果列表的无序列表。

使用each遍历对象

除了数组，我们也可以使用each来遍历对象。例如，我们有一个包含学生信息的对象：

```html

<% for (var key in students) { %>
• <%= key %>: <%= students[key] %>
<% } %>

```

在上面的例子中，我们使用for...in循环来遍历对象students的所有属性，然后通过<%= key %>和<%= students[key] %>分别输出属性名和对应的属性值。最终得到的输出是一个包含所有学生信息的无序列表。

使用each定义模板

除了遍历数组和对象，我们还可以使用each来定义一个模板。这样我们可以在多个地方重复使用这个模板，并根据需要传入不同的数据。一个常见的例子是渲染一个用户的个人资料：

```html <% users.forEach(function(user) { %> <%= include('profile', user) %> <% }); %> ```

在上面的例子中，我们首先定义了一个名为profile的模板，其中包含了用户的姓名、年龄和性别。然后，我们使用forEach方法遍历users数组，并在每次循环中调用include来引入profile模板，同时传入对应的用户数据。最终得到的输出是多个包含用户资料的