JavaScript中根据数组动态创建对象实例的策略-js教程-PHP中文网

JavaScript中根据数组动态创建对象实例的策略

霞舞

发布： 2025-08-05 15:52:01

原创

924人浏览过

JavaScript中根据数组动态创建对象实例的策略

本教程探讨了在JavaScript中如何根据数组中的值，利用构造函数批量、动态地创建对象实例。针对直接使用循环创建动态变量名这一常见误区，文章提供了两种主要解决方案：将实例存储到数组中（通过 for...of 循环或 Array.prototype.map）和将实例存储到键值对对象中，并详细分析了它们的适用场景和实现方式，强调了避免创建全局变量的最佳实践。

在javascript开发中，我们经常会遇到需要根据一组数据（例如一个id列表）来批量创建对象实例的场景。传统的做法是为每个id手动创建一个实例，但这显然不适用于数据量大或动态变化的情况。开发者通常会尝试使用循环来自动化这一过程，但可能会遇到一个常见的误区：试图在循环内部动态地创建具名变量（例如 let ? = new constructor(...)）。javascript并不支持这种运行时动态创建局部变量的方式。

本文将围绕一个具体的例子，展示如何优雅且高效地实现根据数组中的值动态创建对象实例。

示例场景与基础构造函数

假设我们有一个HTML元素的ID列表，并希望为每个ID创建一个 Input_for_calc 类的实例，该实例能够封装对对应DOM元素的操作。

首先，定义我们的构造函数 Input_for_calc：

class Input_for_calc {
    constructor (id) {
        // 构造函数接收一个ID，并将其存储为带有'#'前缀的选择器字符串
        this.id_obgect = "#" + id;
    }

    // 获取DOM元素的方法
    document_qs() {
        return document.querySelector(`${this.id_obgect}`);
    }

    // 设置DOM元素显示样式为'block'
    style_block() {
        const element = this.document_qs();
        if (element) {
            element.style.display = "block";
        }
    }

    // 设置DOM元素显示样式为'none'
    style_none() {
        const element = this.document_qs();
        if (element) {
            element.style.display = "none";
        }
    }

    // 获取DOM元素的value属性
    value() {
        const element = this.document_qs();
        return element ? element.value : undefined;
    }
};

// 待处理的ID列表
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

登录后复制

这个 Input_for_calc 类提供了一些方便的方法来操作基于ID的DOM元素。我们的目标是根据 oll_calc_input_id 数组中的每个ID，自动生成 Input_for_calc 的实例。

立即学习“Java免费学习笔记（深入）”；

解决方案一：将实例存储到数组中

最直接且推荐的方法之一是将所有创建的实例收集到一个新的数组中。这适用于当你需要一个有序的实例集合，或者主要通过遍历来访问这些实例的场景。

1.1 使用 for...of 循环

for...of 循环是遍历可迭代对象（如数组）的简洁方式。我们可以遍历ID数组，为每个ID创建一个 Input_for_calc 实例，然后将其添加到预先定义的空数组中。

// 重新定义 class 和 id 数组，以便代码块独立运行
class Input_for_calc { /* ... 同上 ... */ };
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

let objs = []; // 创建一个空数组来存储实例
for (const input of oll_calc_input_id) {
  objs.push(new Input_for_calc(input)); // 为每个ID创建实例并添加到数组
}

console.log(objs);
// 输出: [Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc]
// 可以通过索引访问，例如: objs[0] 对应 'mass' 的实例

登录后复制

这种方法清晰直观，易于理解。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

1.2 使用 Array.prototype.map

对于数组转换操作，Array.prototype.map 方法是更函数式、更简洁的选择。map 方法会创建一个新数组，其结果是原数组中的每个元素调用回调函数后的返回值。

// 重新定义 class 和 id 数组
class Input_for_calc { /* ... 同上 ... */ };
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

// 使用 map 方法直接将每个ID转换为 Input_for_calc 实例
let objs = oll_calc_input_id.map(input => new Input_for_calc(input));

console.log(objs);
// 输出: [Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc, Input_for_calc]
// 结果与 for...of 循环相同，但代码更紧凑

登录后复制

map 方法是处理此类转换的推荐方式，因为它表达了“将一个数组转换为另一个数组”的意图，并且通常代码更简洁。

解决方案二：将实例存储到键值对对象中

有时，我们可能希望通过其原始ID（而不是数组索引）来直接访问特定的实例，例如 inputs.mass 或 inputs.mol_mass。在这种情况下，将实例存储到一个普通JavaScript对象中，并以ID作为键，实例作为值，会更加方便。

// 重新定义 class 和 id 数组
class Input_for_calc { /* ... 同上 ... */ };
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

let inputs = {}; // 创建一个空对象来存储实例
for (const input of oll_calc_input_id) {
  inputs[input] = new Input_for_calc(input); // 使用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' }
// }

// 示例：通过键名访问实例
console.log(inputs.mass);      // 访问 'mass' 对应的实例
console.log(inputs.mol_mass);  // 访问 'mol_mass' 对应的实例
// 可以直接调用实例的方法，例如: inputs.mass.style_block();

登录后复制

这种方法创建了一个“字典”或“映射”，其中每个ID都直接对应一个 Input_for_calc 实例。当你需要通过一个唯一的标识符快速查找和使用特定实例时，这是非常有效的模式。

最佳实践与注意事项

避免创建全局变量： 直接将实例作为属性挂载到 window 对象（例如 window[input] = new Input_for_calc(input)）虽然可以实现动态命名，但这是非常糟糕的实践。它会污染全局作用域，增加命名冲突的风险，并使代码难以维护和调试。始终将变量限制在最小的作用域内。
选择合适的数据结构：
- 使用数组 (Array)： 当你创建的实例集合需要保持顺序，或者你主要通过迭代（如 for...of、forEach、map 等）来处理所有实例时，将实例存储在数组中是最佳选择。
- 使用对象 (Object)： 当你需要通过一个唯一的键（例如元素的ID、名称或其他标识符）快速查找和访问特定实例时，将实例存储在键值对对象中更为合适。
代码可读性与维护性： 无论是使用 map 还是 for...of 循环，都应力求代码简洁、意图明确。选择最能表达你意图的结构。对于复杂的初始化逻辑，可以考虑将实例创建过程封装成一个独立的函数。

总结

在JavaScript中，虽然不能直接通过变量名字符串来动态创建局部变量，但我们可以通过将实例存储到数组或键值对对象中来优雅地解决批量创建对象实例的需求。

当需要一个有序集合或主要通过遍历访问时，将实例存储到数组中是首选，其中 Array.prototype.map 提供了一种简洁高效的函数式方法。
当需要通过唯一的标识符（如原始ID）快速查找和访问特定实例时，将实例存储到键值对对象中则更为实用。

理解并应用这些模式，可以帮助你编写出更健壮、可维护且符合JavaScript最佳实践的代码。始终避免污染全局作用域，并根据具体需求选择最合适的数据结构来组织你的对象实例。

以上就是JavaScript中根据数组动态创建对象实例的策略的详细内容，更多请关注php中文网其它相关文章！