JavaScript：显示多维数组中一维数组的变量名

本文旨在解决如何在 JavaScript 中显示多维数组中一维数组的变量名的问题。通常，直接获取变量名字符串比较困难。本文提供了一种巧妙的方法，通过使用对象代替多维数组，并利用对象的属性名来达到显示变量名的目的，并提供相应的代码示例和详细解释。

在 JavaScript 中，直接将变量名转换为字符串通常比较复杂。当需要显示多维数组中一维数组的变量名时，一种更简洁有效的方法是使用对象来组织数据。

核心思想：利用对象的属性名作为数组的“变量名”。

这种方法避免了直接操作变量名字符串的复杂性，通过对象的键值对关系，清晰地将数组数据与其“名称”关联起来。

立即学习“Java免费学习笔记（深入）”；

实现步骤：

1. 创建对象： 使用对象代替多维数组，将每个一维数组作为对象的属性值，数组名作为属性名。
2. 遍历对象： 使用 for...in 循环遍历对象，获取属性名（即数组名）。
3. 访问数组： 通过属性名访问对应的数组，并遍历数组元素。
4. 输出结果： 在控制台或页面上显示数组名和数组元素。

代码示例：

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: fruits,
    vegetables: vegetables,
    proteins: proteins
};

// 遍历对象
for (const category in shoppingList) {
    console.log(`${category}:`); // 输出数组名
    // 遍历数组
    for (const item of shoppingList[category]) {
        console.log(" -", item); // 输出数组元素
    }
    console.log(""); // 添加空行，分隔不同数组
}

输出结果：

云点滴客户关系管理CRM OA系统

云点滴客户解决方案是针对中小企业量身制定的具有简单易用、功能强大、永久免费使用、终身升级维护的智能化客户解决方案。依托功能强大、安全稳定的阿里云平 台，性价比高、扩展性好、安全性高、稳定性好。高内聚低耦合的模块化设计，使得每个模块最大限度的满足需求，相关模块的组合能满足用户的一系列要求。简单 易用的云备份使得用户随时随地简单、安全、可靠的备份客户信息。功能强大的报表统计使得用户大数据分析变的简单，

下载

fruits:
 - apple
 - Mango
 - Banana
 - Pineaple
 - Pear

vegetables:
 - Okra
 - Spinach
 - Kenef
 - Bitter Leaf
 - Bell [Peppers

proteins:
 - Fish
 - Caviar
 - Chicken
 - Eggs
 - Beans

代码优化（使用对象属性简写）：

在 JavaScript 中，如果对象的属性名与变量名相同，可以使用对象属性简写语法，使代码更简洁。

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 };

// 遍历对象
for (const category in shoppingList) {
    console.log(`${category}:`); // 输出数组名
    // 遍历数组
    for (const item of shoppingList[category]) {
        console.log(" -", item); // 输出数组元素
    }
    console.log(""); // 添加空行，分隔不同数组
}

这段代码与之前的示例功能完全相同，但更加简洁易读。

注意事项：

• for...in 循环遍历对象时，会遍历对象的所有可枚举属性，包括继承的属性。如果只需要遍历对象自身的属性，可以使用 hasOwnProperty() 方法进行过滤。
• 这种方法适用于需要显示数组名的情况。如果仅仅需要遍历数组元素，使用传统的 for...of 循环即可。
• 使用对象可以更灵活地组织数据，例如添加其他属性来描述数组的含义。

总结：

通过使用对象代替多维数组，并利用对象的属性名，可以有效地显示 JavaScript 中一维数组的“变量名”。这种方法简单易懂，代码简洁，并且易于维护。在需要将数组数据与其名称关联起来的场景中，这种方法是一种不错的选择。