为何JS的length属性在我的这个数组上无法正常工作？

问题根源 #

fetch是异步网络请求，你的console.log(array)和console.log(array.length)属于同步代码，会在fetch的回调函数（then中的逻辑）执行前就运行。此时数组还没有被推入任何元素，所以length返回0。

浏览器控制台能看到数组后续被修改后的内容，是因为控制台保留了数组的引用，会实时更新显示，但你打印length的那一刻，数组确实是空的。

解决办法 #

方法1：将数组操作逻辑放入then回调内 #

把需要使用数组的代码放在fetch请求完成的回调里，确保数组已经被修改：

let array = [];

fetch('./api/getFromDatabase', {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
  }).then(response => response.json())
  .then(data => {
    data.forEach(tocken => {
      array.push(3);
    })
    // 在这里操作数组，此时push已完成
    console.log(array);
    console.log(array.length); // 正常输出
  })
  .catch(err => alert(err))

let array1 = [3, 4, 2];
console.log(array1);
console.log(array1.length);

方法2：使用async/await简化异步逻辑 #

用async/await语法让异步代码看起来更像同步代码，逻辑更清晰：

async function fetchAndProcessData() {
  let array = [];
  try {
    const response = await fetch('./api/getFromDatabase', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
    });
    const data = await response.json();
    data.forEach(tocken => {
      array.push(3);
    });
    // 等待异步完成后再操作数组
    console.log(array);
    console.log(array.length); // 正常输出
  } catch (err) {
    alert(err);
  }
}

// 调用异步函数
fetchAndProcessData();

let array1 = [3, 4, 2];
console.log(array1);
console.log(array1.length);

关键提示 #

异步操作不会阻塞主线程，同步代码会优先执行。所有依赖异步操作结果的逻辑，必须放到异步回调中，或者通过async/await等待异步操作完成后再执行。

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