本文旨在探讨在JavaScript中如何根据数组中的值动态创建类的多个实例。我们将介绍两种主流且推荐的策略：将实例存储在数组中，可以使用for…of循环或更简洁的Array.prototype.map方法；或者将实例存储在一个对象（哈希映射）中，以便通过键名直接访问。文章将提供详细的代码示例，并强调避免全局变量污染等最佳实践，帮助开发者高效、规范地管理动态生成的对象集合。
在javascript开发中，我们经常会遇到需要根据一组数据（例如id列表、配置项等）来动态创建多个对象实例的场景。传统的做法是手动为每个实例声明一个变量，例如 let mass = new input_for_calc(‘mass’);。然而，当数据量较大或数据来源是动态时，这种手动方式显然效率低下且难以维护。开发者往往会尝试使用循环来自动化这一过程，但可能会遇到如何为动态生成的实例赋予变量名的问题，例如尝试 let ? = new input_for_calc(‘id’);。直接在循环内部动态创建全局变量名是一种不推荐的做法，因为它会导致全局作用域污染，增加命名冲突的风险，并降低代码的可维护性。
本教程将介绍两种更规范、更健壮的策略来解决这个问题：将动态创建的实例存储在一个数组中，或者存储在一个对象（哈希映射）中。
定义基础类
首先，我们定义一个用于创建实例的基础类 Input_for_calc。这个类接收一个 id 作为构造参数，并包含一些模拟DOM操作的方法。
class Input_for_calc { constructor (id) { // 存储带有 '#' 前缀的ID，通常用于querySelector this.id_obgect = "#" + id; } // 查询DOM元素（注意：此方法当前未返回查询结果） document_qs() { document.querySelector(`${this.id_obgect}`); } // 设置元素的显示样式为 'block' style_block() { document.querySelector(`${this.id_obgect}`).style.display = "block"; } // 设置元素的显示样式为 'none' style_none() { document.querySelector(`${this.id_obgect}`).style.display = "none"; } // 获取元素的当前值（注意：此方法当前未返回获取的值） value() { document.querySelector(`${this.id_obgect}`).value; }}// 假设我们有一组需要创建实例的IDlet oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];
请注意，document_qs() 和 value() 方法在当前实现中并没有返回任何值，也没有将查询到的元素或值存储在实例属性中，这可能不是预期行为。在实际应用中，你可能需要根据需求修改它们以返回或存储相关信息。本教程的重点在于实例的动态创建和管理。
策略一：使用数组存储对象实例
当我们需要一个有序的集合，或者主要通过索引来访问这些实例时，将它们存储在一个数组中是最佳选择。
立即学习“Java免费学习笔记（深入）”；
方法一：使用 for…of 循环
for…of 循环提供了一种简洁的方式来遍历可迭代对象（如数组），并对每个元素执行操作。我们可以利用它来遍历ID数组，并为每个ID创建一个 Input_for_calc 实例，然后将其添加到新数组中。
// 创建一个空数组来存储Input_for_calc实例let objs = [];// 遍历ID数组，并为每个ID创建一个新实例for (const input of oll_calc_input_id) { objs.push(new Input_for_calc(input));}// 打印结果，可以看到objs现在是一个包含Input_for_calc实例的数组console.log(objs);// 示例：访问数组中的第一个实例// console.log(objs[0]); // 对应 'mass' 的实例// 示例：调用实例的方法// objs[0].style_block(); // 假设页面中存在id为'mass'的元素
这种方法直观易懂，适用于任何需要迭代并收集结果的场景。
方法二：使用 Array.prototype.map
对于将一个数组中的每个元素转换（映射）成另一个新元素并形成一个新数组的需求，Array.prototype.map 是更具函数式编程风格且更简洁的选择。它专门为此目的而设计。
// 使用 map 方法直接将ID数组转换为Input_for_calc实例数组let mappedObjs = oll_calc_input_id.map(input => new Input_for_calc(input));// 打印结果，mappedObjs与上面for...of循环得到的objs相同console.log(mappedObjs);// 示例：访问数组中的第二个实例// console.log(mappedObjs[1]); // 对应 'mol_mass' 的实例
map 方法的代码更紧凑，表达意图更清晰，是处理此类转换任务的首选。
策略二：使用对象（哈希映射）存储对象实例
有时，我们可能希望通过一个有意义的键名（例如ID本身）来直接访问特定的实例，而不是通过数字索引。在这种情况下，将实例存储在一个普通JavaScript对象（作为哈希映射或字典）中是更合适的选择。
// 创建一个空对象来存储Input_for_calc实例let inputs = {};// 遍历ID数组，并使用ID作为键名，将新实例作为值存储到对象中for (const input of oll_calc_input_id) { inputs[input] = new Input_for_calc(input);}// 打印结果，inputs现在是一个键值对为 'ID: Input_for_calc实例' 的对象console.log(inputs);// 示例：通过键名直接访问实例console.log(inputs.mass); // 访问 'mass' 对应的实例console.log(inputs.mol_mass); // 访问 'mol_mass' 对应的实例// 示例：调用特定实例的方法// inputs.mass.style_block(); // 假设页面中存在id为'mass'的元素
这种方法允许你像访问对象属性一样，通过实例的原始ID来访问它，例如 inputs.mass 或 inputs[‘mol_mass’]。这对于需要根据特定标识符快速查找和操作实例的场景非常有用。
注意事项与最佳实践
避免全局变量污染： 绝对不要尝试通过 window[variableName] = new Class() 的方式来动态创建全局变量。这会导致全局作用域变得混乱，增加命名冲突的风险，并使代码难以理解和维护。本教程中介绍的数组和对象存储方式是更安全、更推荐的做法。选择合适的存储结构：如果实例之间存在逻辑上的顺序关系，或者你需要频繁地遍历所有实例，或者通过索引访问，那么数组是更好的选择。如果每个实例都有一个唯一的、有意义的标识符，并且你需要通过这个标识符快速查找和访问特定实例，那么对象（哈希映射）是更优的选择。代码可读性与维护性： 使用 Array.prototype.map 通常能使代码更简洁、意图更清晰，尤其是在进行一对一转换时。而 for…of 循环则提供了更大的灵活性，可以在循环体内执行更复杂的操作。选择哪种方式取决于具体的业务逻辑和个人偏好。方法链与返回值： 在 Input_for_calc 类中，document_qs() 和 value() 方法没有返回查询到的DOM元素或其值。在实际应用中，如果希望这些方法能够被链式调用或提供数据，需要确保它们有合适的返回值。例如：
document_qs() { return document.querySelector(`${this.id_obgect}`);}value() { const element = this.document_qs(); return element ? element.value : undefined;}
总结
动态创建和管理对象实例是JavaScript开发中的常见需求。通过将实例存储在数组或对象（哈希映射）中，我们可以避免全局变量污染的弊端，并根据实际需求选择最合适的访问方式。
对于需要有序集合或通过索引访问的场景，数组（结合 for…of 或 Array.prototype.map）是理想选择。对于需要通过有意义的键名快速访问特定实例的场景，对象（哈希映射）是更优方案。
掌握这些策略将帮助你编写出更健壮、更易于维护的JavaScript代码。
以上就是JavaScript 中动态创建和管理对象实例的策略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513716.html
微信扫一扫 
支付宝扫一扫 
