WebSQL变量作用域疑问：为何事务外部console.log无法获取已填充的数组？

这是个非常典型的JavaScript异步操作问题，我来给你拆解清楚：

核心原因：someDb.transaction(...)是异步操作 #

没错，someDb.transaction()完全属于异步操作，这就是你看到两个console.log输出结果不一样的根本原因。

具体执行顺序解析 #

JavaScript是单线程语言，异步操作不会阻塞主线程的执行流程：

1. 当你调用someDb.transaction()时，JavaScript引擎会把数据库事务这个耗时操作放到异步任务队列里，然后直接继续执行后续代码；
2. 这时候外部的console.log('****', foo)会先执行——而此时回调函数里的foo.push(...)还根本没机会运行，所以foo还是初始的空数组；
3. 只有当主线程的同步代码执行完毕，且数据库事务完成、SQL查询返回结果后，tx.executeSql的回调函数才会被触发，这时候foo才会被填充数据，内部的console.log('####', foo)自然能打印出完整的数组。

补充说明：异步设计的意义 #

SQLite相关的数据库API（比如WebSQL）之所以设计成异步，是为了避免数据库操作（可能耗时）阻塞主线程，防止页面出现卡顿、无响应的情况，提升用户体验。

如何解决这个问题？ #

如果你需要在事务外部使用填充后的foo，可以通过以下方式处理：

1. 把业务逻辑放到回调函数内部 #

直接在tx.executeSql的回调里处理foo数据：

const _getCountriesByContinentCode = continent_code => { 
  const someDb = SQLite.openDatabase(db); 
  someDb.transaction(tx => { 
    tx.executeSql("SOME SQL", [], (tx, results) => { 
      let foo = []; 
      for (let i = 0; i < results.rows.length; i++) { 
        foo.push(results.rows.item(i)); 
      }
      console.log('####', foo);
      // 在这里处理foo的业务逻辑，比如渲染页面、发送请求等
      renderCountries(foo);
    }); 
  }); 
}

2. 用Promise封装，配合async/await #

如果想让代码更易读，可以把异步操作封装成Promise，然后用async/await来处理：

const _getCountriesByContinentCode = async continent_code => { 
  const someDb = SQLite.openDatabase(db); 
  return new Promise((resolve, reject) => {
    let foo = []; 
    someDb.transaction(tx => { 
      tx.executeSql("SOME SQL", [], (tx, results) => { 
        for (let i = 0; i < results.rows.length; i++) { 
          foo.push(results.rows.item(i)); 
        }
        resolve(foo); // 成功时返回数据
      }, (error) => {
        reject(error); // 失败时返回错误
      }); 
    }); 
  });
}

// 使用示例
async function loadCountries() {
  try {
    const countries = await _getCountriesByContinentCode('EU');
    console.log(countries); // 这里能拿到填充后的数组
    // 后续业务逻辑
  } catch (err) {
    console.error('加载数据失败:', err);
  }
}

loadCountries();

内容的提问来源于stack exchange，提问作者four-eyes