JavaScript数组分类名称显示教程

还在苦恼JavaScript中如何清晰展示结构化数组的分类名称？本文为你带来实用教程！传统多维数组难以直接显示分类名称，但通过巧妙运用JavaScript对象，我们可以轻松实现。将一维数组作为对象的属性值，利用对象的键（key）作为分类名称，即可实现清晰、语义化的数据展示。本文详细讲解了如何使用对象结构化数据，并通过`for...in`循环和ES6的对象属性名简写，轻松遍历对象并显示分类名称与内容。掌握此技巧，让你的JavaScript数据展示更清晰、更专业！

理解传统多维数组的局限性

在JavaScript中，当你创建如下所示的多个一维数组，并将它们组合成一个多维数组时：

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

let shoppingList = [fruits, vegetables, proteins];

这里的shoppingList实际上是一个包含三个数组引用的数组。当你在shoppingList上进行迭代时，你访问到的是这些数组本身，而不是它们在外部被声明时的变量名（fruits、vegetables、proteins）。JavaScript在运行时，变量名仅作为标识符存在于作用域中，一旦值被赋给另一个变量或存储在数据结构中，原始变量名与其值之间的直接关联就会断开，尤其是在这种嵌套数组的场景下。

例如，以下循环只能获取到数组中的各项内容，而无法得知其原始分类名称：

for(let listCategory of shoppingList){
    // listCategory 现在是 ["apple", ...], ["Okra", ...], 等等
    for(let listItem of listCategory){
        console.log(listItem);
    }
}

其输出将是所有水果、蔬菜和蛋白质的列表，但没有分类标题。

解决方案：使用对象结构化数据

为了在遍历时能够显示每个一维数组的“名称”或“类别”，最直接且语义化的方法是利用JavaScript对象的特性。我们可以将每个一维数组作为对象的属性值，而属性名（key）则作为我们希望显示的分类名称。

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

// 使用对象字面量和属性名简写创建数据结构
const shoppingList = {fruits, vegetables, proteins};

在这个新的shoppingList对象中，fruits、vegetables和proteins不再仅仅是变量名，它们现在是shoppingList对象的属性名，而它们的值就是对应的一维数组。这种结构天然地将分类名称与数据关联起来。

遍历对象并显示分类名称与内容

现在，我们可以利用for...in循环来迭代对象的属性名（key），从而获取到分类名称，然后通过属性名访问对应的数组，再使用for...of循环遍历数组内容。

for(const category in shoppingList) {
  // category 将依次是 "fruits", "vegetables", "proteins"
  console.log(`--- ${category.toUpperCase()} ---`); // 打印分类名称，并转换为大写增加可读性

  // shoppingList[category] 访问到对应的一维数组
  const items = shoppingList[category]; 
  console.log(items.join(" ")); // 将数组项连接成一行显示
  console.log(""); // 添加空行以分隔不同类别
}

代码解释：

1. const shoppingList = {fruits, vegetables, proteins};: 这里使用了ES6的对象属性名简写（Property Shorthand）。如果变量名与你希望作为对象属性的键名相同，你可以直接写变量名，JavaScript会自动将其转换为{fruits: fruits, vegetables: vegetables, proteins: proteins}。
2. for(const category in shoppingList): 这个循环用于迭代shoppingList对象的所有可枚举属性名。在每次迭代中，category变量将持有当前的属性名（例如"fruits"）。
3. console.log(--- ${category.toUpperCase()} ---);: 使用模板字符串（template literal）来构建输出字符串，将当前的category（分类名称）打印出来，并转换为大写以使其更醒目。
4. const items = shoppingList[category];: 通过方括号表示法shoppingList[category]，我们使用当前的属性名category来访问shoppingList对象中对应的数组。
5. console.log(items.join(" "));: Array.prototype.join()方法将数组的所有元素连接成一个字符串。在这里，我们用空格作为分隔符，使得所有物品显示在同一行。
6. console.log("");: 打印一个空行，用于在不同类别之间提供视觉上的分隔，提高输出的可读性。

预期输出：

--- FRUITS ---
apple Mango Banana Pineaple Pear

--- VEGETABLES ---
Okra Spinach Kenef Bitter Leaf Bell [Peppers

--- PROTEINS ---
Fish Caviar Chicken Eggs Beans

注意事项与最佳实践

• 语义化命名： 对象的属性名应该具有描述性，清晰地表达其所代表的数据类别。

• 数据结构选择： 当你需要将多个相关联的列表或集合进行分组，并且希望为每个组提供一个可识别的名称时，使用对象而非简单的多维数组是更优的选择。

• 灵活性： 这种对象结构允许你轻松地添加、删除或修改类别，并且在迭代时始终能获取到其对应的名称。

• 动态键名： 如果你的分类名称是动态生成的，例如从用户输入或API响应中获取，你也可以动态地构建这个对象：

  let dynamicCategories = {};
  let categoryName = "dairy";
  let dairyItems = ["Milk", "Cheese"];
  dynamicCategories[categoryName] = dairyItems; // 使用方括号语法添加动态属性
  // 遍历方式保持不变

总结

在JavaScript中，直接从多维数组结构中获取其内部一维数组的原始变量名是不可能的。然而，通过巧妙地将一维数组作为对象的属性值，并利用对象的键作为分类名称，我们不仅能够优雅地解决这个问题，还能创建出更具语义化和可读性的数据结构。这种方法在需要分组和标识不同数据集的场景中非常实用，是JavaScript开发中一个值得掌握的技巧。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~