JS数组转对象的5种方法

本文深入探讨了JavaScript中利用数组动态创建对象实例的多种方法，旨在帮助开发者高效解决批量对象实例化问题。文章重点介绍了两种核心策略：一是通过 `for...of` 循环或更推荐的 `Array.prototype.map` 方法，将生成的对象实例存储到数组中，便于统一管理和迭代；二是通过循环遍历数组，以数组元素为键，对象实例为值，动态创建键值对对象，实现按名称快速访问对象。强调了避免动态创建全局变量的重要性，并建议根据具体应用场景和访问需求，选择合适的数据结构，以提高代码可读性和维护性，构建更健壮的应用程序。通过学习本文，开发者可以掌握更简洁、更专业的JavaScript对象实例化技巧，提升开发效率。

引言：动态对象实例化的需求

在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 访问第一个实例的属性

这种方法清晰直观，适用于任何需要遍历并对每个元素执行操作的场景。

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名称获取对应的实例，非常适合需要快速按名称查找特定实例的场景。

注意事项与最佳实践

1. 避免动态创建全局变量： 在JavaScript中，直接通过 window[variableName] = value 的方式动态创建全局变量是一种非常不推荐的做法。这会导致全局命名空间污染，使得代码难以管理、调试和维护，并可能引发命名冲突。上述教程中介绍的两种策略（存储到数组或局部对象）是更安全、更专业的解决方案。

2. 选择合适的数据结构：

   • 如果你需要遍历所有实例，或者实例的顺序很重要，那么将它们存储在数组中是最佳选择。
   • 如果你需要通过一个唯一的标识符（如ID或名称）来快速查找和访问特定的实例，那么将它们存储在键值对对象中会更方便。

3. 代码可读性与维护性：

   • 使用 Array.prototype.map 方法通常能使代码更简洁、更具声明性，提高可读性。
   • 确保你的类（如 Input_for_calc）职责明确，方法命名清晰。

总结

动态创建JavaScript对象实例是前端开发中的常见需求。通过本文介绍的两种主要策略：将实例收集到数组中（推荐使用 Array.prototype.map）或将实例作为键值对存储到对象中，我们可以高效、优雅地解决这个问题。选择哪种策略取决于你的具体应用场景和对实例的访问需求。始终遵循最佳实践，避免全局变量污染，将有助于你构建更健壮、可维护的应用程序。

今天关于《JS数组转对象的5种方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！