如何在多个JavaScript文件间正确读写全局数组？

一、ES模块方式（推荐） #

你遇到的导入后数组为undefined的核心问题，大概率是浏览器未按ES模块规则处理脚本。ES模块需要显式声明，否则导入导出语法不生效。

正确实现步骤： #

1. first.js（导出数组）：

// 两种初始化方式都有效，任选其一
const arr = [1, 2, 3];
// 或者 const arr = new Array(1, 2, 3);
export { arr };

2. second.js（导入并操作数组）：

import { arr } from "./first.js";

// 直接读写数组示例
arr[1] = 200; // 修改元素
arr.push(4);  // 添加元素
console.log(arr); // 输出 [1, 200, 3, 4]

3. HTML中引入脚本：
   必须给脚本标签加上type="module"属性，告诉浏览器按ES模块解析：

<script type="module" src="./second.js"></script>

注：ES模块会自动处理依赖顺序，无需手动先引入first.js，import语句会自动加载它。

二、全局变量方式 #

用window定义全局变量时，加载顺序是关键——如果second.js先于first.js加载，此时window.arr还未定义，自然会得到undefined。

正确实现步骤： #

1. first.js（定义全局数组）：

window.arr = [1, 2, 3];
// 或者 window.arr = new Array(1, 2, 3);

2. HTML中按顺序引入脚本：

<!-- 先加载定义全局变量的first.js -->
<script src="./first.js"></script>
<!-- 再加载使用全局变量的second.js -->
<script src="./second.js"></script>

3. second.js中使用数组：

// 直接访问全局变量（可省略window前缀）
console.log(arr); // 输出 [1,2,3]
arr.unshift(0);  // 修改数组
console.log(arr); // 输出 [0,1,2,3]

关键注意点 #

• ES模块方式更符合现代JS开发规范，能避免全局变量污染，优先使用。
• 模块导入时，相对路径必须以./或../开头，不能直接写first.js。
• 本地测试时，建议用本地服务器（如VSCode Live Server、Node.js http-server）打开页面，避免file://协议对ES模块的限制。

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