如何使用map函数处理嵌套数组？附代码示例与预期输出

输入数据 #

[
    {
        "keyword": "outdoor cushion",
        "bidInfo": [
            {
                "matchType": "EXACT",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 1,
                "bid": 160,
                "suggestedBid": {
                    "rangeStart": 90,
                    "rangeMedian": 160,
                    "rangeEnd": 188
                }
            },
            {
                "matchType": "PHRASE",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 1,
                "bid": 104,
                "suggestedBid": {
                    "rangeStart": 83,
                    "rangeMedian": 104,
                    "rangeEnd": 177
                }
            },
            {
                "matchType": "BROAD",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 1,
                "bid": 106,
                "suggestedBid": {
                    "rangeStart": 87,
                    "rangeMedian": 106,
                    "rangeEnd": 139
                }
            }
        ],
        "translation": "アウトドアクッション",
        "userSelectedKeyword": false,
        "searchTermImpressionRank": 18,
        "searchTermImpressionShare": 0.7346906874047442,
        "recId": "e4918800-d0bf-4f20-8776-68574e4c8339"
    },
    {
        "keyword": "cushion",
        "bidInfo": [
            {
                "matchType": "EXACT",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 2,
                "bid": 140,
                "suggestedBid": {
                    "rangeStart": 140,
                    "rangeMedian": 140,
                    "rangeEnd": 140
                }
            },
            {
                "matchType": "BROAD",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 2,
                "bid": 111,
                "suggestedBid": {
                    "rangeStart": 79,
                    "rangeMedian": 111,
                    "rangeEnd": 155
                }
            },
            {
                "matchType": "PHRASE",
                "theme": "CONVERSION_OPPORTUNITIES",
                "rank": 2,
                "bid": 107,
                "suggestedBid": {
                    "rangeStart": 76,
                    "rangeMedian": 107,
                    "rangeEnd": 149
                }
            }
        ],
        "translation": "クッション",
        "userSelectedKeyword": false,
        "searchTermImpressionRank": 60,
        "searchTermImpressionShare": 0.04246088993932697,
        "recId": "50a5705a-d79a-4f74-82bd-2836096b36fd"
    }
]

尝试的代码 #

const suggestionSp: { Rank: string; searchTerm: string; matchType: string; low: string; suggestedBid: string; high: string; translation: string; }[] = [];

if (suggestions.keywordTargetList.length > 0) {
    await suggestions.keywordTargetList.map((item: { rank: string; keyword: string; matchType: string; suggestedBid: any; bid: any; bidInfo: any[]; translation: any; }) => {
        suggestionSp.push({Rank: item.bidInfo.rank, searchTerm: item.keyword, matchType: item.bidInfo.matchType, low: item.bidInfo.suggestedBid.rangeStart, suggestedBid: item.bidInfo.suggestedBid.rangeMedian, high: item.bidInfo.suggestedBid.rangeEnd, translation: item.translation });
    });
}

预期输出 #

[{
        "keyword": "outdoor cushion",
        "matchType": "EXACT",
        "rank": 1,
        "rangeStart": 92,
        "rangeMedian": 163,
        "rangeEnd": 191,
        "translation": "アウトドアクッション"
    },
    {
        "keyword": "outdoor cushion",
        "matchType": "PHRASE",
        "rank": 1,
        "rangeStart": 83,
        "rangeMedian": 103,
        "rangeEnd": 176,
        "translation": "アウトドアクッション"
    },
    {
        "matchType": "BROAD",
        "rank": 1,
        "rangeStart": 88,
        "rangeMedian": 107,
        "rangeEnd": 141,
        "translation": "アウトドアクッション"

    }
]

问题分析 #

原代码核心错误是未遍历嵌套的bidInfo数组，直接尝试访问item.bidInfo.rank这类属性，但bidInfo是数组而非单个对象，无法直接获取对应字段，因此无法生成扁平化的预期输出。

修正后的代码 #

方案1：map + flat实现扁平化映射 #

// 定义类型，提升代码可读性和类型安全
interface BidInfoItem {
    matchType: string;
    rank: number;
    suggestedBid: {
        rangeStart: number;
        rangeMedian: number;
        rangeEnd: number;
    };
}

interface KeywordItem {
    keyword: string;
    bidInfo: BidInfoItem[];
    translation: string;
}

interface ResultItem {
    keyword?: string;
    matchType: string;
    rank: number;
    rangeStart: number;
    rangeMedian: number;
    rangeEnd: number;
    translation: string;
}

const suggestionSp: ResultItem[] = [];

if (suggestions.keywordTargetList.length > 0) {
    // 遍历外层数组，对每个item的bidInfo做映射，最后用flat扁平化二维数组
    const result = suggestions.keywordTargetList.map((item: KeywordItem) => {
        return item.bidInfo.map(bidItem => ({
            keyword: item.keyword,
            matchType: bidItem.matchType,
            rank: bidItem.rank,
            rangeStart: bidItem.suggestedBid.rangeStart,
            rangeMedian: bidItem.suggestedBid.rangeMedian,
            rangeEnd: bidItem.suggestedBid.rangeEnd,
            translation: item.translation
        }));
    }).flat();
    
    suggestionSp.push(...result);
}

方案2：forEach遍历嵌套数组 #

如果不需要保留原数组映射结果，用forEach更直观：

const suggestionSp: ResultItem[] = [];

if (suggestions.keywordTargetList.length > 0) {
    suggestions.keywordTargetList.forEach((item: KeywordItem) => {
        // 遍历每个item下的bidInfo数组
        item.bidInfo.forEach(bidItem => {
            suggestionSp.push({
                keyword: item.keyword,
                matchType: bidItem.matchType,
                rank: bidItem.rank,
                rangeStart: bidItem.suggestedBid.rangeStart,
                rangeMedian: bidItem.suggestedBid.rangeMedian,
                rangeEnd: bidItem.suggestedBid.rangeEnd,
                translation: item.translation
            });
        });
    });
}

说明 #

• 两种方案均实现了扁平化嵌套数组的目标：将外层每个KeywordItem下的bidInfo数组元素，与外层的keyword、translation字段结合，生成独立的结果对象。
• 定义TypeScript类型可避免any类型的滥用，提升代码可维护性。
• 预期输出中部分数值与输入数据存在微调，代码逻辑以正确映射输入字段为准。

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