Handlebars.js 是一种流行的 JavaScript 模板引擎，它允许您使用 HTML 模板来动态渲染数据。当你需要处理多维数组时，循环嵌套可能会变得非常复杂。在这篇文章中，我们将学习如何在 Handlebars.js 中遍历多维数组，并提供示例代码。
什么是多维数组？
多维数组，就是一个数组中包含另一个或多个数组的数组。例如，一个二维数组可以看作是一个由数组组成的数组。通过嵌套多个数组，我们可以创建一个任意维度的数组。在编程中，通常使用多维数组来存储具有层次结构的数据。
如何在 Handlebars.js 中遍历多维数组？
假设我们有一个包含学生列表的多维数组，每个学生对象包含名称、年龄和课程数组（每个课程对象包含名称和分数）：
--- -------- - - - ----- -------- ---- --- -------- -- ----- ------- ------ -- -- - ----- ---------- ------ -- -- -- - ----- ------ ---- --- -------- -- ----- ---------- ------ -- -- - ----- ---------- ------ -- -- - --
为了在 Handlebars.js 中遍历这个数组，我们需要使用内置的 {{#each}} 帮助器。首先，我们可以使用 {{#each}} 迭代学生数组：
----
------- ----------
------------ --------------
---------
-----上述代码将输出每个学生的名称和年龄。接下来，我们需要在每个学生项目中嵌套另一个 {{#each}} 块，以迭代其课程数组：
----
------- ----------
------------ ---------
----
------- ---------
------------- --------------
---------
-----
-----
---------
-----上述代码将输出每个学生的名称和年龄，并在每个学生项目下列出他们的课程和分数。
示例代码
完整的示例代码如下所示：
--------- -----
------
------
-------------------- ---------------- ----- ---------------
------- --------------------------------------------------------------------------------------------
-------
------
----------- ---------
--- -----------------------
------- --------------------- ----------------------------------
------------ ---------
----
------- ---------
------------- --------------
---------
-----
-----
---------
--------
--- -------- - -
- ----- -------- ---- --- -------- -- ----- ------- ------ -- -- - ----- ---------- ------ -- -- --
- ----- ------ ---- --- -------- -- ----- ---------- ------ -- -- - ----- ---------- ------ -- -- -
--
--- --------------- - --------------------------------------------------------------------------
--- ----------- - ----------------------------------------
---------------------------------- -
--- -- - -----------------------------
------------ - -------------------------
----------------------------
---
---------
-------
-------上述代码将在页面中动态创建一个学生列表，每个学生项目下列出他们的课程和分数。
总结
使用 Handlebars.js 遍历多维数组可能会有点棘手，但是我们可以通过嵌套 {{#each}}
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28968