如何处理多语言区域数组：无匹配区域时填充默认值？

需求说明 #

应用区域设置为英文en，需从多层嵌套的翻译数组中匹配对应locale的翻译值：

• 若子数组内存在en翻译项，仅保留en项的翻译值，其余非en项返回null
• 若子数组内无en翻译项，直接返回该子数组内已有翻译值（禁止返回null）

原数据定义 #

const localeApp = 'en';

const arrayWithLocaleValues = [
    [
        [
            {
                "translation": 'Barley protein rate',
                "locale": {
                    "value": "en"
                }
            }
        ]
    ],
    [
        [
            {
                "translation": "Dominant barley variety",
                "locale": {
                    "value": "en"
                }
            },
            {
                "translation": "Variedad de cebada dominante",  
                "locale": {
                    "value": "es"
                }
            },
            {
                "translation": "Variété dominante d'orge",              
                "locale": {
                    "value": "fr"
                }
            }
        ]
    ],
    [
        [
            {
                "translation": "Année de récolte",
                "locale": {
                    "value": "fr"
                }
            }
        ]
    ],
    [
        [
            {
                "translation": "Sample comment",
                "locale": {
                    "value": "en" 
                }
            },
            {
                "translation": "Comentario de muestra", 
                "locale": {
                    "value": "es"
                }
            },
            {
                "translation": "Commentaire échantillon",   
                "locale": {
                    "value": "fr"   
                }
            }
        ]
    ]
];

原逻辑及问题 #

原逻辑仅对单个元素做locale匹配，未处理子数组无en项的场景，导致无匹配项时返回null：

const newLocaleValues = arrayWithLocaleValues.map((newLocaleValues) =>
    newLocaleValues.map((values) =>
        values.map((newValues) => {
            if (localeApp === newValues.locale.value) {
                return newValues.translation;
            }
        }),
    ),
);

原逻辑输出结果 #

[
    [
        [
            "Barley protein rate"
        ]
    ],
    [
        [
            "Dominant barley variety",
            null,
            null
        ]
    ],
    [
        [
            null
        ]
    ],
    [
        [
            "Sample comment",
            null,
            null
        ]
    ]
]

修改后的逻辑 #

先判断子数组是否存在en翻译项，再分场景处理：

const newLocaleValues = arrayWithLocaleValues.map(outerArr =>
    outerArr.map(middleArr => {
        // 检查当前子数组是否包含en翻译项
        const hasEnItem = middleArr.some(item => item.locale.value === localeApp);
        
        if (hasEnItem) {
            // 存在en项：匹配到的返回翻译，其余返回null
            return middleArr.map(item => 
                item.locale.value === localeApp ? item.translation : null
            );
        } else {
            // 无en项：直接返回所有已有翻译值
            return middleArr.map(item => item.translation);
        }
    })
);

修改后输出结果 #

[
    [
        [
            "Barley protein rate"
        ]
    ],
    [
        [
            "Dominant barley variety",
            null,
            null
        ]
    ],
    [
        [
            "Année de récolte"
        ]
    ],
    [
        [
            "Sample comment",
            null,
            null
        ]
    ]
]

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