从API推送数据到对象数组后无法访问指定下标元素如何解决

1. 数组下标访问返回undefined的核心原因 #

你的代码里getCountriesData是异步函数，fetch请求是异步操作，你执行两个console.log的时候，API请求还没完成，countriesArr还没有被填充数据，是空数组：

• 直接打印countriesArr[0]的时候，空数组的0号下标自然返回undefined
• 打印整个countriesArr的时候，浏览器控制台对引用类型的输出存在「惰性求值」特性：你打印时记录的是数组的引用，等你点开控制台展开数组的时候，API请求已经完成，数组已经被填充了数据，所以你能看到完整的数组内容。

2. typeof数组返回object的原因 #

这是JavaScript的固有特性：数组属于引用类型，typeof运算符对所有非基础类型的引用值（除了函数）都会返回object，并不是你的变量类型出错了。要准确判断是不是数组，应该用Array.isArray(countriesArr)方法。

所有需要用到countriesArr数据的操作，都要放在异步请求完成之后执行，常见实现方式如下：

const countriesURL = 'https://restcountries.eu/rest/v2/all';
let countriesArr = [];

async function getCountriesData() {
  const response = await fetch(countriesURL);
  const data = await response.json();
  showCountries(data);
  // 异步请求完成后再访问数组，可正常拿到值
  console.log(countriesArr[0]);
}

function showCountries(countries) {
  countries.forEach((country) => {
    countriesArr.push(country)
  })
}

// 触发请求
getCountriesData()

如果需要在getCountriesData函数外部访问数组，可利用async函数返回Promise的特性实现：

getCountriesData().then(() => {
  console.log(countriesArr[0])
})

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