如何在javascript中访问for循环中的对象属性？

Question

我找不到任何能够清楚地解释错误和我应该做什么的事情。

我有这个数组：

const pages = [
{ 
    url: "/",
    page: 'pages/home.html',
    title: "Home" },
{ 
    url: "/recordings",
    page:'pages/recordings.html',
    title: "Recordings" },
{ 
    url: "/editions",
    page: 'pages/editions.html',
    title: "Editions" },
{ 
    url: "/videos",
    page: 'pages/videos.html',
    title: "Videos" },
]

我正试图用for循环遍历它。 page.url在控制台中返回“undefined”。 但“测试URL”控制台日志按预期返回一个url字符串。 为什么？ 我该怎么办？ 我想在页面循环中使用page.url。

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)
for (page in pages) {

    console.log("Page: " + page)
    console.log("Page URL: " + page.url)
}

Answer 1

您可以使用for ... of语句 ，通过使用for ... in语句获取数组的元素而不是索引。

 const pages = [{ url: "/", page: 'pages/home.html', title: "Home" }, { url: "/recordings", page: 'pages/recordings.html', title: "Recordings" }, { url: "/editions", page: 'pages/editions.html', title: "Editions" }, { url: "/videos", page: 'pages/videos.html', title: "Videos" }]; for (var page of pages) { console.log("Page: " + page.page); console.log("Page URL: " + page.url); } 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

for..in是一种迭代对象的“可枚举”属性的方法。

使用for..in的数组显示索引：

 const pages=[{url:"/",page:'pages/home.html',title:"Home"},{url:"/recordings",page:'pages/recordings.html',title:"Recordings"},{url:"/editions",page:'pages/editions.html',title:"Editions"},{url:"/videos",page:'pages/videos.html',title:"Videos"}] for (let index in pages) { console.log(index); console.log(pages[index].page); } 

for..of可用于迭代“可迭代”集合。 这类似于.forEach()函数：

 const pages=[{url:"/",page:'pages/home.html',title:"Home"},{url:"/recordings",page:'pages/recordings.html',title:"Recordings"},{url:"/editions",page:'pages/editions.html',title:"Editions"},{url:"/videos",page:'pages/videos.html',title:"Videos"}] for (let page of pages) { console.log(page); console.log(page.page); } 

Answer 3

页面将在这里索引...

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)
for (page in pages) {

    console.log("Page: " + pages[page])
    console.log("Page URL: " +pages[page].url)
}

Answer 4

这是因为for in意味着遍历键值对象。 page只是数组的键，它是0,1,2,3，..所以你需要这样做

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)

for (var key in pages) {

    console.log("Page: " + pages[key])
    console.log("Page URL: " + pages[key].url)
}

Answer 5

在第一种情况下，您正在访问数组的第一个元素，并在该元素中使用'.url'访问该属性：

console.log("Test URL: " + pages[1].url)

在第二种情况下，你得到未定义，因为：

for ... in语句迭代对象的可枚举属性。 对于每个不同的属性，可以执行语句。

pages是一个数组而不是一个对象 ，你需要迭代数组 ，你可以使用foreach ：

pages.forEach( function (page)
{
   console.log("Page: " + page)
   console.log("Page URL: " + page.url)
});

希望能帮助到你！

Answer 6

当我们使用for / in语句循环迭代每个迭代的对象数组（当你正在尝试时）它返回索引，这就是你没有得到你期望的结果的原因。 以下是解决您问题的代码。

for (page in pages) {   
  console.log("Page: " + page)//here it will print index
  console.log("Page URL: " + page.url)
}