Как я могу получить доступ к свойствам объекта в цикле в JavaScript?

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" },
]

Я пытаюсь обойти это с помощьюцикл.page.url возвращает «undefined» в консоли.Но консольный журнал «Test URL» возвращает строку URL, как и ожидалось.Зачем?Что я делаю?Я хочу, чтобы page.url был в цикле foor.

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 / in для каждой итерации, он возвращает индекс, поэтому вы не получаете ожидаемый результат.Ниже приведен код, который решит вашу проблему.

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

Answer 2

В первом случае вы получаете доступ к первому элементу массива, и в этом элементе обращаетесь к свойству с помощью .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 3

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 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

страница будет индексирована здесь ...

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 6

Вы можете использовать оператор 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; }