如何将HTML中的JavaScript变量数据移至外部文件并加载？

方法一：用外部JavaScript文件直接定义变量 #

这是最直接的方式，适合需要直接使用JS变量的场景：

1. 创建一个外部JS文件（比如命名为data.js），写入变量定义：

var datalist = [12, 19, 3, 5, 2, 55];

2. 在HTML中，在使用该变量的脚本之前引入这个外部文件：

<!-- 先引入数据文件 -->
<script src="data.js"></script>
<!-- 之后再写使用datalist的代码 -->
<script>
  // 这里可以直接访问datalist变量
  console.log(datalist);
</script>

方法二：用JSON文件存储纯数据（更规范的纯数据方案） #

如果只是存储纯数据，用JSON文件更合适，步骤如下：

1. 创建一个JSON文件（比如命名为data.json），写入纯数据：

[12, 19, 3, 5, 2, 55]

2. 在HTML的脚本中通过fetch加载这个JSON文件，异步获取数据后赋值给变量：

<script>
  let datalist;
  fetch('data.json')
    .then(res => res.json())
    .then(data => {
      datalist = data;
      // 必须在回调里使用数据，因为是异步加载
      console.log(datalist);
    })
    .catch(err => console.error('加载数据出错:', err));
</script>

或者用更简洁的async/await写法：

<script>
  async function loadData() {
    try {
      const res = await fetch('data.json');
      const datalist = await res.json();
      console.log(datalist);
      // 在这里处理数据
    } catch (err) {
      console.error('加载数据失败:', err);
    }
  }
  loadData();
</script>

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