如何在Vanilla JavaScript中遍历嵌套对象并提取球员信息？

我尝试提取对象中每位球员的姓名、年龄和国籍，使用Object.keys获取到了位置名称，但获取其他信息时返回undefined。使用的是原生JavaScript。

错误代码示例：

const arsenal = {
    name: "Arsenal",
    city: "London",
    startingLineup: {
        gk: { name: "Aaron Ramsdale", age: 24, country: "England" },
        lb: { name: "Oleksandr Zinchenko", age: 26, country: "Ukraine" },
        rb: { name: "Ben White", age: 25, country: "England" },
        lcb: { name: "Gabriel Magalhaes", age: 25, country: "Brazil" },
        rcb: { name: "William Saliba", age: 22, country: "France" },
        cdm: { name: "Thomas Partey", age: 29, country: "Ghana" },
        cm: { name: "Granit Xhaka", age: 30, country: "Switzerland" },
        cam: { name: "Martin Odegaard", age: 23, country: "Norway" },
        lw: { name: "Gabriel Martinelli", age: 21, country: "Brazil" },
        rw: { name: "Bukayo Saka", age: 21, country: "England" },
        st: { name: "Gabriel Jesus", age: 26, country: "Brazil" },
    },
};

Object.keys(arsenal.startingLineup).forEach((pos) => {
    const name = arsenal.startingLineup[pos.name];
    console.log(pos, name);
});

运行后输出：

gk undefined
lb undefined
rb undefined
lcb undefined
rcb undefined
cdm undefined
cm undefined
cam undefined
lw undefined
rw undefined
st undefined

问题原因 #

Object.keys()返回的是对象的键名字符串数组（比如"gk"、"lb"），forEach里的pos是字符串类型，不是球员对象，pos.name会直接返回undefined，自然拿不到球员信息。

正确解法 #

方法1：修正原代码逻辑

先通过位置键名获取对应的球员对象，再从对象中提取所需属性：

Object.keys(arsenal.startingLineup).forEach((pos) => {
    // 获取当前位置的球员对象
    const player = arsenal.startingLineup[pos];
    // 提取姓名、年龄、国籍
    const { name, age, country } = player;
    console.log(`位置: ${pos}, 姓名: ${name}, 年龄: ${age}, 国籍: ${country}`);
});

方法2：使用Object.entries()更简洁

Object.entries()会直接返回[键名, 对应值]的数组，解构后可直接拿到位置和球员对象，代码更直观：

Object.entries(arsenal.startingLineup).forEach(([pos, player]) => {
    const { name, age, country } = player;
    console.log(`位置: ${pos}, 姓名: ${name}, 年龄: ${age}, 国籍: ${country}`);
});

两种方法运行后都会输出正确的球员信息，比如：

位置: gk, 姓名: Aaron Ramsdale, 年龄: 24, 国籍: England
位置: lb, 姓名: Oleksandr Zinchenko, 年龄: 26, 国籍: Ukraine
...

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