在前端开发中，我们通常需要通过 JavaScript 操作 DOM 元素。而获取 DOM 元素最常用的方式是使用 getElementById 方法。
const element = document.getElementById('element-id');然而，对于每个需要操作的元素都手动创建一个变量会很烦琐且低效。那么有没有一种方法可以自动地根据元素的 ID 创建变量呢？
答案是肯定的，在 jQuery 中我们可以使用 $ 符号来实现这一点。但是如果你不想引入整个 jQuery 库，又该怎么办呢？这里介绍两种原生 JavaScript 的方法。
1. 使用 window 对象
我们知道，在浏览器中全局对象是 window。因此，我们可以将 DOM 元素作为 window 对象的属性存储，并以元素的 ID 作为属性名。这样，我们就可以通过 window.elementId 访问元素了。
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------- -----------
--------
--------------- - ------------------------------------
-----------------------------
---------
-------
-------这种方法的优点是简单易懂，缺点是有可能会污染全局命名空间。
2. 使用 ES6 Map
ES6 中引入了新的数据类型 Map，它提供了一种用于存储键值对的方式。我们可以使用 Map 存储 DOM 元素和它们的 ID，然后通过遍历 Map 对象来访问元素。
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------- -----------
--------
----- -------- - --- ------
------------------------ -------------------------------------
--------------------------------------
---------
-------
-------这种方法的优点是不会污染全局命名空间，并且可以使用 Map 的其他功能，例如 forEach()。
总结：以上两种方法都可以实现自动从 ID 创建变量。选择哪种方法取决于你的个人偏好以及特定的情况。在实际开发中，建议使用 ES6 Map 来管理 DOM 元素。
希望本文能为你提供有关 JavaScript 中自动创建变量的解决方案，并指导你在实际项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27878