使用Lodash遍历数组获取多语言值 法语缺失时回退英文的实现

实现代码 #

// 引入Lodash的前提下运行
const processedAnimals = _.map(response.data.Animals, (animal, originalIndex) => {
  // 按语言编码精准匹配，不依赖数组索引顺序
  const enNameItem = _.find(animal.name, { language: 'en-US' })
  const frNameItem = _.find(animal.name, { language: 'fr-CA' })
  // 取值+兜底逻辑
  const engname = _.get(enNameItem, 'text', 'N/A')
  const frenchname = _.get(frNameItem, 'text', engname)
  
  return {
    // 若需要保留原索引，放开下面注释即可
    // index: originalIndex,
    // 若需要保留原对象所有其他属性，放开下面注释即可
    // ...animal,
    id: animal.id,
    engname,
    frenchname
  }
})

console.log(processedAnimals)

需求匹配说明 #

• 按language值匹配：使用_.find方法根据语言编码过滤对应条目，完全不受name数组内语言项的排序影响，避免索引取值的不确定性。
• 保留原索引：_.map回调的第二个参数originalIndex就是当前条目在原数组的索引，你可以根据需要把索引存入返回对象，填充表格时直接取用即可，不会丢失原顺序。
• 修改指定语言的text值：先通过_.find定位到对应动物条目下的指定语言项，直接赋值即可，示例如下：

// 示例：修改id为1的动物的法语名称
const target = _.find(response.data.Animals, { id: '1' })
const frItem = _.find(target.name, { language: 'fr-CA' })
// 存在法语项直接修改，不存在则新增
if (frItem) {
  frItem.text = '修改后的法语名称'
} else {
  target.name.push({
    language: 'fr-CA',
    text: '新增的法语名称'
  })
}

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