Pug 迭代数组 - JavaScript

在 JavaScript 中，要遍历数组可以使用 for 循环或者 forEach 方法，但是在使用 Pug 模板引擎时，我们可以使用 each 关键字来迭代数组。

使用 each 关键字

使用 each 关键字来迭代数组，可以在 Pug 中直接使用类似于 for in 循环的语法格式。

ul
  each val in [1, 2, 3, 4, 5]
    li= val

上面的代码将生成一个无序列表，列表中包含了数组 [1, 2, 3, 4, 5] 中的所有元素。输出的 HTML 代码如下：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

使用 each 和 index 变量

除了直接输出数组中的元素外，有时候我们还需要输出元素所在数组的索引值。在 Pug 中，我们可以使用 each 关键字的第二个参数 index 来实现这一功能。

ul
  each val, index in [1, 2, 3, 4, 5]
    li= `Index ${index}: ${val}`

上面的代码将生成一个无序列表，列表中包含了数组 [1, 2, 3, 4, 5] 中的所有元素以及其在数组中的索引值。输出的 HTML 代码如下：

<ul>
  <li>Index 0: 1</li>
  <li>Index 1: 2</li>
  <li>Index 2: 3</li>
  <li>Index 3: 4</li>
  <li>Index 4: 5</li>
</ul>

使用 each 和 key, value 变量

在实际项目中，我们可能需要遍历的不是数组，而是一个对象。此时我们可以使用 each 关键字的两个参数 key 和 value 来遍历对象的属性和属性值。

ul
  each value, key in {foo: 'bar', baz: 'qux'}
    li= `Key: ${key}, Value: ${value}`

上面的代码将生成一个无序列表，列表中包含了对象 {foo: 'bar', baz: 'qux'} 中的所有属性和属性值。输出的 HTML 代码如下：

<ul>
  <li>Key: foo, Value: bar</li>
  <li>Key: baz, Value: qux</li>
</ul>

总结

使用 each 关键字可以在 Pug 中方便地遍历数组和对象，大大简化了模板编写的过程。熟练掌握 each 关键字的用法，可以让 Pug 开发更加高效、简洁。