本文探讨了如何利用数组中的值动态创建JavaScript对象实例的多种高效方法。我们将详细介绍使用 for…of 循环将实例存储到数组或对象中，并重点推荐利用 Array.prototype.map 方法实现简洁的数组实例化，以及如何通过动态属性名创建可按名称访问的对象集合，避免了手动声明变量的繁琐和潜在的全局变量污染问题。
引言：动态对象实例化的需求
在javascript开发中，我们经常会遇到需要根据一组预定义的值（例如，dom元素的id列表、配置项名称等）来批量创建对象实例的场景。手动为每个值声明一个变量并实例化对象不仅繁琐，而且当列表很长或需要动态生成时，这种方法几乎不可行。例如，假设我们有一个 input_for_calc 类，旨在封装对特定id的dom元素的操作：
class Input_for_calc { constructor (id) { // 构造函数接收ID，并存储为带有CSS选择器前缀的属性 this.id_obgect = "#" + id; } // 获取DOM元素 document_qs() { return document.querySelector(`${this.id_obgect}`); } // 设置元素样式为 'block' style_block() { this.document_qs().style.display = "block"; } // 设置元素样式为 'none' style_none() { this.document_qs().style.display = "none"; } // 获取元素的值 value() { return this.document_qs().value; }};let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];
我们有一个ID数组 oll_calc_input_id。我们的目标是根据这个数组中的每个ID，自动创建 Input_for_calc 的实例，并能够方便地访问这些实例。
策略一：将对象实例存储到数组中
最直接且通用的方法是将所有创建的实例收集到一个新的数组中。这样，你可以通过索引访问它们，或者使用数组的迭代方法（如 forEach, map, filter 等）来处理它们。
1.1 使用 for…of 循环
for…of 循环提供了一种简洁的方式来遍历可迭代对象（如数组）的元素。在每次迭代中，我们可以创建一个新的 Input_for_calc 实例并将其添加到预先声明的数组中。
// 假设 Input_for_calc 类和 oll_calc_input_id 数组已定义let objs = []; // 用于存储实例的空数组for (const inputId of oll_calc_input_id) { objs.push(new Input_for_calc(inputId)); // 创建实例并添加到数组}console.log(objs);// 输出：[Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc]// 你可以通过 objs[0].id_obgect 访问第一个实例的属性
这种方法清晰直观，适用于任何需要遍历并对每个元素执行操作的场景。
立即学习“Java免费学习笔记（深入）”；
1.2 使用 Array.prototype.map (推荐)
对于将一个数组的每个元素“转换”为另一个值（这里是对象实例）并生成一个新数组的需求，Array.prototype.map 方法是更优的选择。它更具函数式编程风格，代码也更为简洁和富有表达力。
// 假设 Input_for_calc 类和 oll_calc_input_id 数组已定义const objs = oll_calc_input_id.map(inputId => new Input_for_calc(inputId));console.log(objs);// 输出：[Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc]// 同样可以通过 objs[0].id_obgect 访问实例
map 方法会遍历 oll_calc_input_id 数组的每一个元素，对每个元素调用提供的回调函数（这里是 inputId => new Input_for_calc(inputId)），并将回调函数的返回值收集到一个新数组中。这种方式不仅代码量更少，而且意图更明确，是处理此类转换任务的首选。
策略二：将对象实例存储到键值对对象中
有时，我们可能希望通过其原始ID（字符串）来直接访问特定的对象实例，而不是通过数组索引。在这种情况下，将实例存储在一个普通的JavaScript对象（作为键值对集合）中会更加方便。
使用 for…of 循环动态创建属性
我们可以遍历ID数组，并使用每个ID作为新对象（哈希表）的键，将对应的 Input_for_calc 实例作为值。
// 假设 Input_for_calc 类和 oll_calc_input_id 数组已定义let inputs = {}; // 用于存储键值对的空对象for (const inputId of oll_calc_input_id) { inputs[inputId] = new Input_for_calc(inputId); // 以ID为键，实例为值}console.log(inputs);/*输出：{ mass: Input_for_calc {id_obgect: '#mass'}, mol_mass: Input_for_calc {id_obgect: '#mol_mass'}, volum: Input_for_calc {id_obgect: '#volum'}, calculate: Input_for_calc {id_obgect: '#calculate'}, widp: Input_for_calc {id_obgect: '#widp'}}*/// 示例：通过ID直接访问实例console.log(inputs.mass); // 访问 'mass' 对应的实例console.log(inputs.mol_mass); // 访问 'mol_mass' 对应的实例// 你也可以使用方括号表示法：inputs['volum']
这种方法允许你通过点运算符（.）或方括号运算符（[]）直接根据ID名称获取对应的实例，非常适合需要快速按名称查找特定实例的场景。
注意事项与最佳实践
避免动态创建全局变量：在JavaScript中，直接通过 window[variableName] = value 的方式动态创建全局变量是一种非常不推荐的做法。这会导致全局命名空间污染，使得代码难以管理、调试和维护，并可能引发命名冲突。上述教程中介绍的两种策略（存储到数组或局部对象）是更安全、更专业的解决方案。
选择合适的数据结构：
如果你需要遍历所有实例，或者实例的顺序很重要，那么将它们存储在数组中是最佳选择。如果你需要通过一个唯一的标识符（如ID或名称）来快速查找和访问特定的实例，那么将它们存储在键值对对象中会更方便。
代码可读性与维护性：
使用 Array.prototype.map 方法通常能使代码更简洁、更具声明性，提高可读性。确保你的类（如 Input_for_calc）职责明确，方法命名清晰。
总结
动态创建JavaScript对象实例是前端开发中的常见需求。通过本文介绍的两种主要策略：将实例收集到数组中（推荐使用 Array.prototype.map）或将实例作为键值对存储到对象中，我们可以高效、优雅地解决这个问题。选择哪种策略取决于你的具体应用场景和对实例的访问需求。始终遵循最佳实践，避免全局变量污染，将有助于你构建更健壮、可维护的应用程序。
以上就是动态创建JavaScript对象：从数组值到实例化对象的多种策略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513724.html
微信扫一扫 
支付宝扫一扫 
