无法理解 JavaScript 对象中的 for...in

Question

我在 JavaScript 中有以下宇宙飞船对象，然后还有嵌套对象。

js

let spaceship = {
  crew: {
    captain: {
      name: 'Lily'
    },
    'chief officer': {
      name: 'Dan',
    },
    medic: {
      name: 'Clementine',
    },
    translator: {
      name: 'Shauna',
    }
  }
};

for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}:${crewMember.name}`)
}

我正在尝试使用

for

...

in

循环，但是：

将输出显示为：

captain:undefined
chief officer:undefined
medic:undefined
translator:undefined

正如我所期望的：

captain:Lily
chief Dan
medic:Clementine
translator:Shauna

为了达到上面的效果，我可以这样做

console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`)

但我无法理解为什么我不能使用以前的代码实现相同的目标，即

console.log(`${crewMember}:${crewMember.name}`)

Answer 1

在你的循环中：

for (let crewMember in spaceship.crew) {
    console.log(`${crewMember}:${crewMember.name}`);
}

crewMember 是代表键的字符串，例如 'captain'、'chief coach' 等。字符串没有 name 属性，这就是为什么 ${crewMember.name} 不会给你想要的结果。

要访问crew member对象的name属性，需要使用spaceship.crew[crewMember].name，其中spaceship.crew[crewMember]访问循环迭代中与当前crewMember键关联的crew member对象，并且。 name 检索该船员对象的 name 属性。这就是为什么 ${spaceship.crew[crewMember].name} 可以正确打印出船员姓名。

要实现您的期望，请使用以下代码。

for (let role in spaceship.crew) {
        console.log(`${role}: ${spaceship.crew[role].name}`);
    }