如何在JavaScript函数中调用外部JS文件并获取返回值以填充数组

我来帮你解决这个问题～你现在的核心问题是没搞清楚动态加载JS脚本的异步特性，还有全局代码里return的用法不对，咱们一步步来梳理和修正：

先说说你当前代码的几个问题： #

1. 异步加载导致直接拿不到值：动态创建script标签加载脚本是异步操作，clubs = loadScript('test.js')这行代码执行时，test.js还没加载执行完，所以clubs肯定是undefined。而且你的loadScript函数本身也没有返回任何值。
2. return语句无效：test.js里的return team没有作用，因为这是全局作用域的代码，不是函数，return在这里不会把值返回给加载它的代码。
3. 事件绑定错误：你把onload（成功加载）和onerror（加载失败）都写成了onLoad，而且第二个onLoad覆盖了第一个，导致脚本加载成功时也会触发错误日志，这完全是写法错误。

解决方案一：利用全局变量+回调函数（适合传统非模块场景） #

这种方法不需要修改太多代码，通过回调函数等待脚本加载完成，再读取全局变量里的数组：

主文件代码修改：

$(document).ready(function(){
  function loadScript(file, callback) {
    const newScript = document.createElement('script');
    newScript.src = file;
    newScript.type = 'text/javascript';
    newScript.async = true;

    // 脚本加载成功的回调
    newScript.onload = function(){
      console.log(`${file} loaded successfully.`);
      // 加载完成后通知回调，传递成功状态
      callback(null);
    };
    // 脚本加载失败的回调
    newScript.onerror = function(){
      console.error(`Error loading script: ${file}`);
      callback(new Error(`加载脚本${file}失败`));
    };
    document.head.appendChild(newScript);
  }

  // 调用加载函数，在回调里处理结果
  loadScript('test.js', function(err) {
    if (!err) {
      // 此时test.js已经执行完毕，全局的team数组可用
      const clubs = window.team;
      console.log('获取到的数组：', clubs);
      
      // 执行你的业务逻辑：数组已填充则不操作，否则做其他处理
      if (clubs.length === 0) {
        // 这里写数组为空时的逻辑
        console.log('数组为空，执行额外操作');
      } else {
        console.log('数组已填充，无需操作');
      }
    }
  });
});

test.js代码修改：

把数组挂载到全局window对象上，去掉无效的return：

window.team = [];
// 注意这里要用let声明n，避免污染全局变量
for(let n=0; n<=3; n++){
  team[n] = {};
  team[n].club = "Team "+n;
};

解决方案二：使用ES模块动态导入（更规范，推荐现代项目使用） #

如果你的项目支持ES模块（比如用了打包工具或者浏览器支持原生ES模块），可以把test.js改成模块，通过动态import来加载，这样不用依赖全局变量：

test.js修改为模块：

const team = [];
for(let n=0; n<=3; n++){
  team[n] = {};
  team[n].club = "Team "+n;
};
// 导出数组
export default team;

主文件代码修改：

使用async/await配合动态import来加载模块：

$(document).ready(async function(){
  try {
    // 动态导入test.js模块
    const module = await import('./test.js');
    // 获取导出的数组
    const clubs = module.default;
    console.log('获取到的数组：', clubs);
    
    // 执行你的业务逻辑
    if (clubs.length === 0) {
      console.log('数组为空，执行额外操作');
    } else {
      console.log('数组已填充，无需操作');
    }
  } catch (err) {
    console.error('加载模块失败：', err);
  }
});

备注：内容来源于stack exchange，提问作者S.S