如何在JavaScript中显示多维数组内一维数组的变量名

可行，但你原来的写法没法实现——把数组直接放进shoppingList时，只存了数组的引用，原变量名（比如fruits）并没有被保存到数组结构里，JavaScript运行时不会自动保留变量标识符的文本信息。

要实现需求，你需要把数组名称和数组本身的关联关系明确保存下来，有两种常用方式：

方式一：用对象数组存储配对信息 #

如果想保留单独的数组变量，可以把每个数组和它的名称封装成对象，再放进shoppingList：

let fruits = ["apple","Mango","Banana","Pineaple","Pear"];
let vegetables = ["Okra", "Spinach", "Kenef", "Bitter Leaf", "Bell [Peppers"];
let proteins = ["Fish", "Caviar", "Chicken", "Eggs", "Beans"];

// 重构shoppingList，保存名称和数组的配对
let shoppingList = [
  { category: "fruits", items: fruits },
  { category: "vegetables", items: vegetables },
  { category: "proteins", items: proteins }
];

// 遍历输出
shoppingList.forEach(group => {
  console.log(group.category); // 输出原数组名称
  group.items.forEach(item => {
    console.log(`- ${item}`); // 输出对应元素
  });
});

方式二：用对象存储所有分类（更简洁） #

直接把所有数组作为对象的属性，属性名就是你要显示的分类名称，然后用Object.entries()遍历键值对：

// 用对象存储，属性名就是分类名称
let foodCategories = {
  fruits: ["apple","Mango","Banana","Pineaple","Pear"],
  vegetables: ["Okra", "Spinach", "Kenef", "Bitter Leaf", "Bell [Peppers"],
  proteins: ["Fish", "Caviar", "Chicken", "Eggs", "Beans"]
};

// 遍历对象的键值对
for (const [categoryName, items] of Object.entries(foodCategories)) {
  console.log(categoryName); // 输出分类名称
  items.forEach(item => console.log(`- ${item}`)); // 输出元素
}

两种方式都能实现需求，方式二更适合不需要单独维护每个数组变量的场景，写法也更简洁。

内容的提问来源于stack exchange，提问作者Alt-01