JavaScript中类属性为数组时无法获取其首个对象的问题求助

问题根因 #

你遇到的问题本质是异步操作执行时序不匹配：

• createArrayOfData 中的 fetch 是异步网络请求，调用后不会立刻执行后续的 then 回调，会先继续执行主流程的代码
• 如果你调用完 createArrayOfData 后立刻执行 getPrice，此时网络请求还没返回，arrayOfData 还没有被写入任何元素，自然访问 [0] 就是 undefined
• 你看到 Array.isArray(this.arrayOfData) 返回true，是因为初始化时已经给它赋值为空数组，数组本身是存在的，只是里面没有元素而已

现有代码其他问题 #

• i++ 放在了for循环外面，所有插入的DataInfo实例num都会是0
• 用pointerToThis保存this的写法可以用箭头函数简化，避免this指向错误

修复方案 #

方案1：用Promise返回异步结果，调用时按顺序执行 #

首先修改createArrayOfData，把fetch的Promise返回：

class MainData {
  constructor(values = [], parameter) {
    // 初始化默认给空数组，避免传入undefined导致push报错
    this.arrayOfData = values;
  }

  createArrayOfData() {
    const API_Call = `https:XXXXXX.com`;
    // 直接返回fetch的Promise
    return fetch(API_Call)
      .then(response => response.json())
      .then(data => {
        let i = 0;
        for (let key in data['All Data']) {
          const dataInfo = new DataInfo(i, data['All Data'][key]['price']);
          this.arrayOfData.push(dataInfo);
          i++; // 把i++移到循环内部
        }
        // 可选：返回数组方便后续直接使用
        return this.arrayOfData;
      })
  }

  getPrice() {
    // 提取所有price的最简写法
    return this.arrayOfData.map(item => item.price);
  }
}

class DataInfo {
  constructor(num, price) {
    this.num = num;
    this.price = price;
  }
}

调用的时候要等异步执行完成再调用getPrice：

// 调用示例
const main = new MainData();
main.createArrayOfData().then(() => {
  const prices = main.getPrice();
  console.log(prices); // 就能拿到所有price组成的数组
})

方案2：用async/await语法简化调用（更推荐） #

// 调用的时候用async函数包裹
async function loadDataAndGetPrices() {
  const main = new MainData();
  await main.createArrayOfData(); // 等待异步请求执行完成
  const prices = main.getPrice();
  console.log(prices);
}
loadDataAndGetPrices();

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