JavaScript中for循环访问对象属性返回undefined问题求助

你遇到的问题核心是错误使用了for...in循环遍历数组。

为什么会返回undefined？ #

for...in循环原本是用来遍历对象的可枚举属性的，当你用它遍历数组时，它实际遍历的是数组的索引值（字符串类型），而不是数组里的每一项对象。比如你的循环里，page变量拿到的是"0"、"1"、"2"、"3"这些字符串索引，而不是pages数组里的每个{url: "...", ...}对象。字符串当然没有url属性，所以page.url会返回undefined。

你直接用pages[1].url能拿到值，是因为你直接通过索引访问到了数组里的具体对象，和for...in的遍历逻辑完全不同。

正确的遍历方式 #

这里给你几种可行的解决办法：

1. 使用for...of循环（推荐，最简洁）

for...of是专门为遍历可迭代对象（比如数组）设计的，它会直接拿到数组里的每一项元素：

for (const page of pages) {
  console.log("Page: ", page)
  console.log("Page URL: " + page.url)
}

2. 使用普通的for循环（传统索引遍历）

如果你习惯用索引的方式，也可以用普通for循环：

for (let i = 0; i < pages.length; i++) {
  const page = pages[i];
  console.log("Page: ", page)
  console.log("Page URL: " + page.url)
}

3. 使用数组的forEach方法

这是数组内置的遍历方法，写法也很简洁：

pages.forEach(page => {
  console.log("Page: ", page)
  console.log("Page URL: " + page.url)
})

额外提醒 #

以后遍历数组尽量避免用for...in，除非你明确需要遍历数组的额外属性（比如手动给数组添加的自定义属性），否则它很容易因为遍历到非元素的属性而引发问题。

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