理解问题：JavaScript中变量名称的挑战
在javascript中，当我们将变量（如var1、var2、var3）放入一个数组并进行迭代时，循环变量（例如for (let variable of [var1, var2, var3])中的variable）仅持有这些变量的值。javascript的运行时特性决定了它不会保留变量在内存中的“原始名称”信息，一旦值被赋给另一个变量或作为数组元素存储，其原始变量名就丢失了。
例如，以下代码尝试获取原始变量名是无效的：
let var1 = 10;
let var2 = 20;
let var3 = 30;
for (let variable of [var1, var2, var3]) {
console.log("Value: " + variable);
// 此时 'variable' 的值是 10, 20, 30，但无法直接获取 "var1", "var2", "var3"
// 尝试使用 Object.keys({variable})[0] 只会返回 "variable"
}在这种情况下，Object.keys({variable})[0]只会返回字符串"variable"，因为在每次迭代中，传入{variable}的对象字面量中的键就是variable。这并不能帮助我们找回最初定义变量时的名称。
解决方案：利用对象和Object.entries()
要解决这个问题，我们需要在迭代之前，显式地将变量的名称和值关联起来。最直接有效的方法是创建一个JavaScript对象，其中对象的键就是我们想要的变量名称，而值则是对应的变量内容。然后，我们可以使用Object.entries()方法来迭代这个对象的键值对。
Object.entries()方法返回一个给定对象自身可枚举字符串键属性的[key, value]对的数组。通过迭代这个数组，我们就能同时获取到变量的名称（键）和它的值。
立即学习“Java免费学习笔记（深入）”；
实现步骤与示例代码
下面是具体的实现步骤和示例代码：
- 定义需要处理的变量。
-
创建一个对象，将这些变量作为属性，其属性名即为我们希望获取的“原始名称”。
- 利用ES6的属性值简写（shorthand property names）语法，如果属性名与变量名相同，可以简化写法。
- 使用Object.entries()方法获取对象的键值对数组。
- 遍历这个数组，通过解构赋值同时获取名称和值。
// 步骤1: 定义需要处理的变量
let var1 = 100;
let var2 = "Hello";
let var3 = { id: 3, status: "active" };
// 步骤2: 将变量封装到对象中，属性名即为原始变量名
// 使用ES6的属性值简写语法，如 var1 等同于 var1: var1
const variablesMap = {
var1,
var2,
var3
};
// 步骤3 & 4: 使用 Object.entries() 迭代，并通过解构赋值获取名称和值
console.log("--- 迭代变量名称和值 ---");
Object.entries(variablesMap).forEach(([name, value]) => {
console.log("Name: " + name);
console.log("Value: " + value);
});
/*
预期输出:
--- 迭代变量名称和值 ---
Name: var1
Value: 100
Name: var2
Value: Hello
Name: var3
Value: { id: 3, status: 'active' }
*/代码解析
- const variablesMap = { var1, var2, var3 };: 这里利用了ES6的属性值简写语法。当对象的属性名与要赋给该属性的变量名相同时，可以只写变量名。例如，{ var1 }等同于{ var1: var1 }。这创建了一个对象，其键是字符串"var1"、"var2"、"var3"，对应的值是这些变量的当前值。
- Object.entries(variablesMap): 这个方法会将variablesMap对象转换成一个数组，数组的每个元素都是一个[key, value]形式的子数组。例如，它将返回[['var1', 100], ['var2', 'Hello'], ['var3', { id: 3, status: 'active' }]]。
- .forEach(([name, value]) => { ... }): forEach方法遍历Object.entries()返回的数组。在回调函数中，我们使用了数组解构赋值([name, value])。这意味着在每次迭代时，name变量将接收当前[key, value]子数组的第一个元素（即键），而value变量将接收第二个元素（即值）。这样，我们就可以方便地访问到原始变量名和对应的值。
注意事项与最佳实践
- 显式声明是关键： 这种方法的核心在于我们显式地将变量名作为对象的键来声明。它不是一种在运行时“反向工程”出数组元素原始变量名的方法。如果你的数据源是一个纯粹的值数组（例如[10, 20, 30]），并且这些值没有与其原始变量名关联的元数据，那么这种方法是无法适用的。
- 适用场景： 此方法特别适用于当你需要同时管理一组相关变量的名称和值时，例如处理配置项、表单数据、状态对象等。
- 简洁性： 如果你只需要迭代变量的值而不需要其名称，那么直接使用数组和for...of循环会更简洁高效。
- 命名规范： 在创建variablesMap时，确保使用的键名能够准确反映你想要获取的“原始名称”。
总结
在JavaScript中，直接从循环变量获取其原始名称是无法实现的。然而，通过将需要迭代的变量封装到一个对象中，并利用Object.entries()方法，我们可以有效地在迭代过程中同时获取变量的名称和值。这种策略为处理需要名称-值对的场景提供了一个清晰、专业且易于理解的解决方案。
