JavaScript 如何映射对象内嵌套数组并转换为指定数据结构

核心问题 #

你当前的map回调函数已经接收了遍历到的当前数组项参数aCake，但你全程都通过固定索引读取原始数组bakery.items.item的指定位置数据，没有用到当前遍历的aCake值，才会导致所有转换结果都和数组第一项一致。

正确实现方案 #

完全基于回调传入的当前项aCake取值，同时按照要求处理各个字段的格式：

var exampleTest = bakery.items.item.map(mapCake);
function mapCake (aCake) {
    // 提取所有面糊类型拼接为字符串
    const batterTypes = aCake.batters.batter.map(batter => batter.type).join(',');
    // 计算馅料数量，无馅料属性则默认返回0
    const fillingCount = aCake.fillings ? aCake.fillings.filling.length : 0;
    return {
        id: parseInt(aCake.id), // 字符串ID转整数符合目标要求
        type: aCake.type,
        name: aCake.name,
        ppu: aCake.ppu,
        batters: batterTypes,
        ingredients: [...aCake.topping], // 浅拷贝所有topping数据
        countOfFillings: fillingCount
    };
}

如果需要对ingredients做深拷贝避免源数据修改影响转换结果，可以替换为JSON.parse(JSON.stringify(aCake.topping))或者自定义深拷贝方法。

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