如何访问Main.js中包含导入模块的对象并生成模块数组？

首先，你已经完成了第一步——把各个类导入到Main.js里，接下来要把它们放进数组并访问其实很简单，分几步来：

1. 先完成所有导入（你已经在做啦） #

先把所有需要的类都导入进来，就像你给出的示例：

import Header from './features/Header.js';
import ImageStrip from './features/ImageStrip.js';
import AreaChart from './features/AreaChart.js';
import Axes from './features/Axes.js';
// 其他需要的类继续导入

2. 把导入的模块放进数组 #

直接把这些导入的类作为元素塞进数组就行，非常直观：

// 创建包含所有导入模块的数组
const importedComponents = [Header, ImageStrip, AreaChart, Axes];

3. 访问数组里的模块对象 #

现在你可以通过数组的索引直接访问某个模块，或者遍历数组处理所有模块：

• 按索引访问单个模块：

  // 获取第一个模块Header
  const firstComponent = importedComponents[0];
  // 如果要实例化这个类的话
  const headerInstance = new firstComponent();
  

• 遍历数组处理所有模块：
  比如你想给每个类都创建实例，可以用map方法：

  const componentInstances = importedComponents.map(Component => new Component());
  // 现在componentInstances里就是每个类的实例啦
  

进阶小技巧：给模块加标识（可选） #

如果你的模块越来越多，记不住索引对应的是哪个组件，可以把数组改成对象数组，给每个模块加个名称标识，这样更易读：

const importedComponents = [
  { name: 'Header', component: Header },
  { name: 'ImageStrip', component: ImageStrip },
  { name: 'AreaChart', component: AreaChart },
  { name: 'Axes', component: Axes }
];

// 比如要找AreaChart模块
const areaChartModule = importedComponents.find(item => item.name === 'AreaChart').component;
const areaChartInstance = new areaChartModule();

这样不管你的组件数组怎么调整顺序，都能精准找到对应的模块啦～

内容的提问来源于stack exchange，提问作者interwebjill