在前端开发中，我们经常需要根据一组预定义的标识符（如html元素的id）来创建和管理对应的javascript对象。例如，你可能有一个包含多个元素id的数组，并希望为每个id创建一个封装了dom操作逻辑的类实例。手动为每个id创建实例既繁琐又难以维护，尤其当id列表很长时。
示例类定义
为了演示，我们使用一个简单的Input_for_calc类，它接受一个ID并在内部构造一个CSS选择器，提供一些基本的DOM操作方法：
class Input_for_calc {
constructor (id) {
// 构造函数接收一个ID，并将其作为选择器前缀
this.id_obgect = "#" + id;
}
document_qs() {
// 获取对应的DOM元素
return document.querySelector(`${this.id_obgect}`);
}
style_block() {
// 设置元素显示
const element = this.document_qs();
if (element) {
element.style.display = "block";
}
}
style_none() {
// 设置元素隐藏
const element = this.document_qs();
if (element) {
element.style.display = "none";
}
}
value() {
// 获取元素值
const element = this.document_qs();
if (element && 'value' in element) {
return element.value;
}
return undefined; // 或者根据需要返回其他默认值
}
}
// 假设我们有以下ID列表
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];我们希望根据oll_calc_input_id数组中的每个字符串，自动创建Input_for_calc的实例。
动态创建实例的挑战
初学者可能会尝试在循环中动态创建变量名，例如let [变量名] = new Input_for_calc(...)。然而，JavaScript 不支持直接通过字符串来创建局部变量名。虽然可以将实例作为全局对象（如window）的属性来创建，但这通常被视为不良实践，因为它污染了全局作用域，增加了命名冲突的风险。
正确的做法是将这些动态创建的实例存储在一个集合中，通常是数组或对象。
立即学习“Java免费学习笔记（深入）”；
方法一：将实例存储到数组中
如果实例的访问顺序或仅仅需要迭代所有实例，而不需要通过特定名称直接访问，那么将它们存储在一个数组中是最佳选择。
1.1 使用 for...of 循环
最直接的方法是使用for...of循环遍历ID数组，并在每次迭代时创建新实例并将其推入一个预先定义的数组中。
// ... (Input_for_calc 类定义和 oll_calc_input_id 数组定义)
let objs_array = []; // 用于存储所有实例的数组
for (const input_id of oll_calc_input_id) {
objs_array.push(new Input_for_calc(input_id));
}
console.log(objs_array);
// 输出: [Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc]
// 你可以通过索引访问，例如: objs_array[0] 对应 'mass' 的实例这种方法简单明了，易于理解。
1.2 使用 Array.prototype.map
对于从一个数组转换（映射）到另一个数组的场景，Array.prototype.map方法是更简洁、更具函数式编程风格的选择。它会遍历数组的每个元素，对每个元素执行一个回调函数，并返回一个包含回调函数结果的新数组。
本书全面介绍PHP脚本语言和MySOL数据库这两种目前最流行的开源软件，主要包括PHP和MySQL基本概念、PHP扩展与应用库、日期和时间功能、PHP数据对象扩展、PHP的mysqli扩展、MySQL 5的存储例程、解发器和视图等。本书帮助读者学习PHP编程语言和MySQL数据库服务器的最佳实践，了解如何创建数据库驱动的动态Web应用程序。
// ... (Input_for_calc 类定义和 oll_calc_input_id 数组定义) let objs_mapped_array = oll_calc_input_id.map(input_id => new Input_for_calc(input_id)); console.log(objs_mapped_array); // 输出与上面 for...of 循环相同的结果 // 同样可以通过索引访问，例如: objs_mapped_array[1] 对应 'mol_mass' 的实例
map方法通常是处理此类转换的首选，因为它代码量更少，意图更清晰。
方法二：将实例存储到对象中
如果需要通过原始ID（例如mass、mol_mass）直接访问对应的实例，那么将这些实例存储在一个普通JavaScript对象中是更合适的方案。这样，原始ID就成了对象的键。
// ... (Input_for_calc 类定义和 oll_calc_input_id 数组定义)
let inputs_by_id = {}; // 用于存储以ID为键的实例对象
for (const input_id of oll_calc_input_id) {
inputs_by_id[input_id] = new Input_for_calc(input_id);
}
console.log(inputs_by_id);
/*
输出示例:
{
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_by_id.mass); // 访问 'mass' 对应的实例
console.log(inputs_by_id.mol_mass); // 访问 'mol_mass' 对应的实例
// 调用实例方法
inputs_by_id.mass.style_block(); // 显示 ID 为 'mass' 的元素这种方法非常适合需要根据其原始标识符快速查找和操作特定实例的场景。
选择合适的方案
-
使用数组 (Array)：
- 优点：适用于需要遍历所有实例，或者实例的顺序很重要的情况。
- 缺点：无法通过实例的原始ID直接访问，需要通过索引或遍历来查找特定实例。
- 适用场景：所有实例需要统一处理（如批量初始化、销毁），或者实例本身不具备唯一且常用的“名称”属性。
-
使用对象 (Object)：
- 优点：可以通过原始ID作为键直接访问特定实例，代码可读性高，查找效率高。
- 缺点：如果ID非常多，或者需要保持特定顺序，可能不如数组方便。
- 适用场景：每个实例都有一个独特的、需要频繁用于访问的标识符。
在大多数需要根据ID或名称来管理一组相关对象实例的场景中，将实例存储在一个以ID为键的对象中通常是更符合直觉和更便捷的选择。
注意事项
- 错误处理：在Input_for_calc类的方法中，如document_qs()、style_block()等，最好添加对document.querySelector()返回值的检查，以防止元素不存在时操作null或undefined导致运行时错误。本教程的示例代码已包含部分检查。
- 作用域：确保你创建的实例集合（无论是数组还是对象）处于适当的作用域内，避免不必要的全局变量。
- 内存管理：如果创建的实例数量非常庞大，需要考虑内存使用情况。对于DOM相关的对象，及时移除不再需要的实例可以帮助垃圾回收。
总结
通过本教程，我们学习了在JavaScript中根据数组动态创建对象实例的两种主要策略：存储到数组和存储到对象中。Array.prototype.map为数组转换提供了简洁的语法，而将实例存储到对象中则允许通过原始ID进行便捷访问。理解这些模式并根据具体需求选择最合适的方案，将极大地提高代码的效率、可读性和可维护性。
