如何整页使用script标签内声明的数组？解决newArrx未定义报错

方法1：显式挂载到window对象 #

type="module"的脚本默认处于模块作用域，内部变量和函数不会自动暴露到全局。直接把需要全局访问的数组和函数绑定到window对象上，就能让整页代码访问到：

// 带type="module"的script内代码
let newArrx = [];
function newElement() {
  newArrx.push('新元素');
  // 可添加模板更新逻辑，比如重新渲染页面内容
}

// 挂载到全局window
window.newArrx = newArrx;
window.newElement = newElement;

这样HTML模板里的<%newArrx.forEach(...%>就能识别到数组，按钮的onclick="newElement()"也能正常调用函数。

方法2：模块导出+全局导入（更规范） #

如果不想直接污染全局作用域，可以用模块导出+全局导入的方式：

1. 单独创建模块文件（比如myModule.js）：

export let newArrx = [];
export function newElement() {
  newArrx.push('新元素');
}

2. 在页面中添加一个不带type="module"的脚本，导入后挂载到全局：

<script>
  import { newArrx, newElement } from './myModule.js';
  window.newArrx = newArrx;
  window.newElement = newElement;
</script>

这种方式既符合ES模块规范，又能实现全局访问。

额外注意 #

• 要确保模块脚本在模板渲染前执行，避免模板渲染时数组还未挂载到全局。可以给模块脚本加defer属性，或者把模块代码放在模板渲染逻辑之前。
• 若项目规模较大，建议用命名空间包裹全局变量，比如window.MyApp = { newArrx, newElement }，之后模板里用<%MyApp.newArrx.forEach%>，按钮调用MyApp.newElement()，减少全局变量冲突。

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