React Native中如何遍历复杂数组并提取所有游戏名称？

错误根源 #

你写的代码只遍历了最外层数组，但item.data是一个数组，不是单个对象——直接访问item.data.games会得到undefined，自然没有任何输出。要拿到所有游戏名称，得逐层遍历嵌套的数组：先遍历data里的每个用户，再遍历每个用户的games数组。

正确实现方式 #

直接打印所有游戏名称 #

const arr = [{
    "status": "success",
    "data": [{
            "name": "user1",
            "games": [{
                "id": 1,
                "gamename": "cricket"
            }, {
                "id": 2,
                "gamename": "football"
            }]
        },
        {
            "name": "user1",
            "games": [{
                "id": 1,
                "gamename": "videogames"
            }, {
                "id": 2,
                "gamename": "volleyball"
            }]
        }
    ]
}]

// 逐层遍历嵌套数组
arr.forEach(item => {
    item.data.forEach(user => {
        user.games.forEach(game => {
            console.log(game.gamename);
        });
    });
});

执行后会依次输出：cricket、football、videogames、volleyball。

收集所有游戏名称到数组 #

如果需要把所有游戏名称整理成一个数组，可以用flatMap简化代码：

const allGameNames = arr.flatMap(item => 
    item.data.flatMap(user => 
        user.games.map(game => game.gamename)
    )
);

console.log(allGameNames); // 输出 ["cricket", "football", "videogames", "volleyball"]

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