如何循环多维数组（3D）？ [关闭]答案

【问题标题】：How to Loop a Multi-dimensional Array (3D)? [closed]如何循环多维数组（3D）？ [关闭]
【发布时间】：2020-06-16 23:16:55
【问题描述】：

给定以下数组：

content =   [
number1 =   [
            ["link1",   "text1"],
            ["link2",   "text2"],
            ["linkN",   "textN"]
            ],

number2 =   [
            ["link1",   "text1"],
            ["link2",   "text2"],
            ["linkN",   "textN"]
            ],

numberN =   [
            ["link1",   "text1"],
            ["link2",   "text2"],
            ["linkN",   "textN"]
            ]
            ];

使用“for循环”，我如何得到这个输出：

<div class="container">
 <div class="wrapper">
 <div class="slide">link1-text1, link2-text2, linkN-textN</div> //from number1
 <div class="slide">link1-text1, link2-text2, linkN-textN</div> //from number2
 <div class="slide">link1-text1, link2-text2, linkN-textN</div> //from numberN
</div>

我需要嵌套“for循环”吗？

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，以tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并注明输入和预期输出。

标签： javascript for-loop multidimensional-array

【解决方案1】：

我认为首先您可以像下面的代码一样将 3d 数组最小化为 1D 数组，以使其变得简单。它的作用是将项目转换为link1-text1, link2-text2, linkN-textN 格式。

const newContent = content.map(items => {
   return items.map(item => item.join('-')).join(', ');
})

【讨论】：

【解决方案2】：

试试这个。虽然不需要命名数组

content = [
  [
    ["link1", "text1"],
    ["link2", "text2"],
    ["linkN", "textN"]
  ],

  [
    ["link1", "text1"],
    ["link2", "text2"],
    ["linkN", "textN"]
  ],

  [
    ["link1", "text1"],
    ["link2", "text2"],
    ["linkN", "textN"]
  ]
];


document.querySelector(".wrapper").innerHTML = content.map(arr =>
  `<div class="slide">${arr.map(item => item.join("-")).join(", ")}</div>`
).join("\n")

<div class="container">
  <div class="wrapper"></div>
</div>

【讨论】：