JavaScript：获取循环中变量的原始名称-js教程-PHP中文网

JavaScript：获取循环中变量的原始名称

碧海醫心

发布： 2025-09-24 13:54:01

原创

191人浏览过

JavaScript：获取循环中变量的原始名称

在JavaScript中，直接从循环变量获取其原始定义名称是不可行的。本教程将介绍一种有效的方法，通过将变量封装到对象中并利用Object.entries()方法，在迭代过程中同时获取变量的名称和值，从而解决这一常见需求。

理解问题：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]对的数组。通过迭代这个数组，我们就能同时获取到变量的名称（键）和它的值。

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

立即学习“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时，确保使用的键名能够准确反映你想要获取的“原始名称”。