Question

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

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

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

我想知道的是这是否是正确的方法，因为我不这样认为，而且我似乎也找不到其他方法。

Answer 1

在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();

Answer 2

从技术上讲，您发布的是有效数组，除了在创建数组时将其赋值给所有作用域级别为4的变量：categories，engine，{ {1}}和piston，这可能是无意的。
展开折叠的代码段以查看此示例。

tire

您可能想使用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);大括号和{}字符的嵌套对象语法：

Answer 3

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

然后您可以使用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 4

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

相反，我建议采用这种结构，其中这些术语存储属性值，而嵌套数组存储在“ 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]
};

...它更短，但是从理论上讲对象不对属性强加顺序，因此您在这里实际上并没有指定“引擎”应该在“轮胎”之前列出。要指定顺序，您需要一个数组（例如您的初始计划中的数组）。

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

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>

从多维数组获取数组名称

4 个答案: