JavaScript中函数赋值后全局变量为何仍为undefined？

你碰到的是JavaScript异步编程的典型问题：

• fetch 是异步网络请求，它不会卡住主线程等待请求完成。当你发起fetch后，浏览器会在后台处理请求，同时主线程立刻执行后面的console.log(cdq_perimeter)——这时候请求还没返回，get_cdq_contour根本没被调用，cdq_perimeter还是你一开始定义的空对象{}。
• 只有当网络请求成功完成、响应被解析成JSON后，then链里的回调才会触发，get_cdq_contour才会给变量赋值，但这时候最后的console.log早已经执行完了。

另外提个小细节：你在get_cdq_contour里直接赋值cdq_perimeter时没加声明关键字，虽然这里能找到外层的let cdq_perimeter，但这种写法容易引发作用域混淆，建议尽量避免。

有两种常用的处理方式，选哪种看你的代码场景：

1. 把变量相关逻辑放到异步回调内部 #

既然赋值是异步完成的，所有需要用到cdq_perimeter的代码都得等赋值完成后再跑，比如把后续逻辑封装成函数，在赋值后调用：

function get_cdq_contour(data) {
  const cdq_perimeter = data[0].geom.geometry.coordinates;
  console.log(cdq_perimeter); // 正确输出
  // 在这里执行所有依赖该变量的逻辑
  handleContourData(cdq_perimeter);
}

function handleContourData(perimeter) {
  // 写你的轮廓数据处理逻辑
  console.log('处理轮廓:', perimeter);
}

const mapRequest = new Request("some_json_file.json");
            
fetch(mapRequest)
  .then(response => response.json())
  .then(data => get_cdq_contour(data))
  .catch(console.error);

2. 用async/await简化异步流程 #

ES6+的async/await能让异步代码看起来像同步代码，可读性更强：

async function loadContourData() {
  try {
    const mapRequest = new Request("some_json_file.json");
    const response = await fetch(mapRequest);
    const data = await response.json();
    const cdq_perimeter = data[0].geom.geometry.coordinates;
    console.log(cdq_perimeter); // 正确输出
    // 在这里直接使用cdq_perimeter
  } catch (err) {
    console.error('请求出错:', err);
  }
}

loadContourData();

这样就能保证在变量被正确赋值后，再执行依赖它的代码，不会再出现undefined的情况。

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