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返回＆＃34; undefined＆＃34;在控制台中。但是＆＃34;测试网址＆＃34;控制台日志按预期返回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 statement，使用for ... in statement获取数组的元素而不是索引。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

for..in是一种用于迭代＆＃34;可枚举＆＃34;的方法。对象的属性。

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

＆＃13;

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);
}

＆＃13;

for..of可用于迭代＆＃34;可迭代＆＃34;集合。这类似于.forEach()函数：

＆＃13;

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);
}

＆＃13;

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语句迭代对象的可枚举属性。对于每个不同的属性，可以执行语句。

页面是数组而非对象，您需要遍历数组，您可以使用 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)
}

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

6 个答案: