JS如何从对象数组按语言字段提取英法文本，无法语时默认取英文

• 硬编码数组索引[0]取值，未通过language字段匹配，多语言数组顺序变化、缺少对应语言项时直接报错
• 原代码存在引用错误：y.Groups ? x.Groups[0].name?.[0].text 中错误引用外层数组x的Groups属性，而非当前遍历项y的Groups

原生JS即可实现所有需求，无需引入Lodash，核心思路是封装通用多语言提取工具函数，统一处理匹配逻辑和空值兼容。

1. 封装多语言提取工具函数 #

/**
 * 从多语言数组中提取对应语言的文本
 * @param {Array} langArr 多语言数组，格式为[{language: 'xx', text: 'xx'}]
 * @param {String} targetLang 目标语言code，比如'fr-FR'
 * @param {String} fallbackLang 兜底语言code，默认是英语'en-US'
 * @returns {String} 匹配到的文本
 */
const getLangText = (langArr, targetLang, fallbackLang = 'en-US') => {
  // 空数组直接返回空字符串，可根据需求调整默认值
  if (!Array.isArray(langArr) || langArr.length === 0) return ''
  // 优先匹配目标语言
  const target = langArr.find(item => item?.language === targetLang)
  if (target) return target.text
  // 目标语言不存在时返回兜底语言文本
  const fallback = langArr.find(item => item?.language === fallbackLang)
  return fallback ? fallback.text : ''
}

2. 业务逻辑实现 #

const processedResult = x.map(y => {
  // 提取顶层名称的英法文本，法语不存在自动用英语兜底
  const enName = getLangText(y.name, 'en-US')
  const frName = getLangText(y.name, 'fr-FR')

  // 提取分组的英法文本，不存在返回N/A
  const firstGroup = y.Groups?.[0]
  const enGroupName = firstGroup ? getLangText(firstGroup.name, 'en-US') : 'N/A'
  const frGroupName = firstGroup ? getLangText(firstGroup.name, 'fr-FR') : 'N/A'

  // 按期望的输出格式返回即可
  return {
    key: y.id,
    englishtext: enName,
    frenchtext: frName,
    // 若需要分组字段可取消注释
    // group_englishtext: enGroupName,
    // group_frenchtext: frGroupName
  }
})

方案优势 #

• 完全通过language字段匹配取值，不受多语言数组顺序影响，后续新增语言只需传入对应语言code即可，扩展性极强
• 所有空值场景做了兼容处理，不会出现undefined报错
• 工具函数可复用，适配数百个字段、多层嵌套的复杂结构，不管是顶层还是嵌套的多语言字段都可以直接调用
• 纯原生JS实现，无额外依赖，性能优于引入第三方工具库

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