从多维数组中获取数组名

Question

我在 javascript 中有一个多维数组。我需要遍历数组，每次数组的索引等于数组时，我都必须创建一个新的下拉菜单。为此，我需要获取嵌套数组的名称并将其设置为下拉菜单的名称。

数组中的所有元素都代表类别和子类别。例如，我尝试获取数组引擎的名称，但我唯一能得到的是数组的内容。

var categories = [engine=[1,2,3, piston=[4,5,6]], tire=[7,8,9]];

我想知道这是否是正确的方法，因为我不这么认为，而且我似乎找不到另一种方法。

Answer 1

您的结构是一个纯嵌套数组。术语“引擎”、“活塞”、“轮胎”不是其中的一部分，而是初始化到该特定子数组的单独变量。

相反，我建议使用这种结构，其中这些术语是存储的属性值，而嵌套数组存储在“children”属性下。因此，您的示例将编码如下：

var categories = [{ 
    text: "engine",
    children: [1,2,3, { 
        text: "piston",
        children: [4,5,6]
    }]   
}, {
    text: "tire",
    children: [7,8,9]
}];

已经提出了一些替代方案，但请注意，如果您使用这样的对象：

var categories = { 
    engine: [1,2,3, { 
        piston: [4,5,6]
    }
    tire: [7,8,9]
};

...它更短，但理论上对象不会对属性强加顺序，因此您并没有在这里真正指定“引擎”应该列在“轮胎”之前。要指定顺序，您需要一个数组（就像在您的初始计划中一样）。

以下是将第一个结构转换为 HTML 菜单的建议代码，使用 ul 和 li DOM 元素：

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;
            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: "tire",
    children: [7,8,9]
}];

const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);

<div id="menu"></div>

Answer 2

您需要将该数组定义为一个对象。只要是属性值，您就可以将对象嵌套在对象中。

然后你可以使用Object.values(object)循环遍历对象

例如

let categories = { 
  engine: [1,2,3, {piston: [4,5,6]}], 
  tire: [7,8,9]
};

let values = Object.values(categories);

for (let i = 0; i < values.length; i++) {
  values[i].map(x => {
    console.log(typeof x);
    if (typeof x === "object") {
      //Get the name of the object
      console.log("> " + Object.keys(x)[0]);
    }
  });
}

Answer 3

从技术上讲，您发布的 是 一个有效数组，除了在创建时它为同一范围级别的 4 个变量分配值：categories、engine、piston 和 @ 987654324@，这可能是无意的。
展开折叠的 sn-p 以查看此演示。

var categories = [engine=[1,2,3, piston=[4,5,6]], tire=[7,8,9]];

console.log("categories:");
console.log(categories);
console.log("engine:");
console.log(engine);
console.log("piston:");
console.log(piston);
console.log("tire:");
console.log(tire);

您可能希望使用 {}-braces 和 : 字符来使用嵌套对象语法：

var categories = [{
  engine: [1, 2, 3, {
    piston: [4, 5, 6]
  }]
}, {
  tire: [7, 8, 9]
}];

console.log("categories:");
console.log(categories);

Answer 4

在 ES2017 中以比以前更好的方式迭代对象是可能的。 假设您有一个有效的形状对象，您可以这样做：

 const tabs = {
    engine: [],
    piston: [],
    tire: []
 };

 Object.entries(tabs) // returns an array of [key, value], here [tab1, []] etc...
    .forEach(([tabname, valueArray]) => {
        // do stuff with it
    });

当然，因为顺序很可能很重要，您可以为每个选项卡添加一个 order 键，从而形成如下形状：

 const tabs = {
    engine: { order: 0, indexes: [] },
 };
 // then yo sort before iterating on it.
 Object.entries(tabs).sort(customSortFunction).forEach();