如何在DOM中使用forEach循环调用IIFE内部的数组？

你的问题核心是IIFE的作用域隔离机制——pokemonList作为IIFE内部的私有变量，外部代码无法直接访问，必须通过仓库暴露的公共方法（比如getAll()）来获取数组数据，才能进行DOM渲染。

以下是完整的实现方案：

1. 正确封装IIFE仓库 #

先确保你的IIFE仓库正确暴露getAll()方法，用于返回内部的私有数组：

const pokemonRepository = (function() {
  // 私有数组，外部无法直接访问
  const pokemonList = [
    { name: 'Bulbasaur', type: 'Grass/Poison' },
    { name: 'Charmander', type: 'Fire' },
    { name: 'Squirtle', type: 'Water' }
  ];

  return {
    // 暴露公共方法，返回数组（这里返回副本避免外部修改原数据）
    getAll: function() {
      return [...pokemonList];
    }
  };
})();

2. 调用公共方法遍历渲染DOM #

外部代码通过pokemonRepository.getAll()拿到数组后，再用forEach遍历并生成DOM元素：

// 获取页面上的容器元素
const pokemonContainer = document.getElementById('pokemon-container');

// 拿到数组后遍历渲染
pokemonRepository.getAll().forEach(pokemon => {
  const pokemonCard = document.createElement('div');
  pokemonCard.className = 'pokemon-card';
  pokemonCard.innerHTML = `
    <h2>${pokemon.name}</h2>
    <p>属性：${pokemon.type}</p>
  `;
  pokemonContainer.appendChild(pokemonCard);
});

额外说明 #

• 返回数组副本的原因：用[...pokemonList]而不是直接返回原数组，是为了防止外部代码通过引用修改IIFE内部的私有数据。如果不需要严格的保护，也可以直接返回pokemonList。
• 如果后续需要添加、修改数组数据，建议在IIFE返回的对象里暴露对应的公共方法（比如addPokemon()），保持数据操作的封装性。

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