仅获取数组及其子元素的一个

Geo*_*dyd 5 html javascript arrays multidimensional-array

我有一个多维数组,categories并且正在使用menuToElement函数遍历该数组。

它接受al array及其子元素的元素,并以形式返回ul。该代码可以正常工作,但是我不知道如何遍历数组的一个元素及其所有子元素。

我想做的是例如仅循环引擎元素及其所有子元素和所有子元素数组。我的问题是:for...of使用我正在使用的循环甚至可能做到这一点,因为我尝试遍历类别索引并且它说这是不可迭代的。

function menuToElement(menu) {
  const ul = document.createElement("ul");
  for (const item of menu) {
    const li = document.createElement("li");
    if (Object(item) === item) {
      li.textContent = item.text + ' \u25BD';
      li.appendChild(menuToElement(item.children));
    } else {
      li.textContent = item;
    }
    ul.appendChild(li);
  }
  return ul;
}

var categories = [{
  text: "engine",
  children: [1, 2, 3, {
    text: "piston",
    children: [4, 5, 6, {
      text: "piston",
      children: [4, 5, 6]
    }]
  }]
}, {
  text: "tire",
  children: [7, 8, 9]
}];
const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);
Run Code Online (Sandbox Code Playgroud)
li>ul {
  display: none;
}

li:hover>ul {
  display: block;
}
Run Code Online (Sandbox Code Playgroud)
<div id="menu"></div>
Run Code Online (Sandbox Code Playgroud)

小智 -2

为此,您需要使用

Array.from()
Run Code Online (Sandbox Code Playgroud)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

所以它用于转换 DOM 节点(或子节点),如果您需要更多解释注释