JavaScript跨文件访问countries数组提示未定义如何解决

你遇到的countries is not defined错误核心原因是脚本加载顺序颠倒：

• 浏览器解析普通<script>标签是从上到下同步执行的，你把依赖countries变量的index.js放在了定义该变量的countries.js之前。运行index.js代码时，countries.js还没被加载执行，countries变量根本未被声明，直接触发引用错误。
• 补充说明：很多人误以为顶层const声明不能跨script文件访问，实际上非module类型的script标签中，顶层const/let声明会进入全局词法环境，所有后加载的script都可以正常访问，只是不会挂载为window的属性，不存在跨文件作用域隔离问题。

1. 调整index.html中script标签的引入顺序，把定义公共变量的文件放在最前面，依赖这些变量的业务文件放在最后加载：

<body>
    <!-- 先加载定义变量的文件 -->
    <script src="countries.js"></script>
    <script src="web_tech.js"></script>
    <!-- 最后加载依赖上述变量的逻辑文件 -->
    <script src="index.js"></script>
</body>

2. 调整后刷新页面即可正常运行：你的countries数组中本身已存在Ethiopia项，代码会正常在控制台打印ETHIOPIA，不会执行push逻辑。

如果你后续想避免全局变量污染，也可以改用ES Module规范：给script标签添加type="module"属性，在countries.js中用export导出数组，在index.js中用import引入变量即可，不需要严格依赖加载顺序控制作用域。

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