JavaScript处理对象数组：拆分locales键并匹配父级value提取文案

首先梳理你现有代码存在的明确问题：

• 语法错误：代码里Object.keys(data.locales[i]));多了一个多余的右括号，运行会直接报语法异常
• 取值逻辑错配：通过Object.keys拿到的单条locale对象的键数组，长度永远是1，不需要靠循环索引取值，直接取数组第一个元素即可；你之前错误用外层循环的i作为索引去取键值，索引错位会直接拿到undefined
• 遍历层级不全：当前循环只针对单个对象的locales字段操作，没有覆盖外层的整个对象数组，无法批量处理所有数组元素
• 匹配逻辑缺失：拆分完locale键之后，没有做键值和同元素value属性的比对逻辑

匹配规则说明 #

结合给出的示例数据，匹配逻辑为：将locale对象的键按-拆分为语言段、地区段，拆分后的地区段和当前元素的value值完全相等，即可认定为匹配项，提取对应文案。
比如示例中元素的value为dz，拆分ar-dz后得到地区段dz，和value相等，就提取这个对象存的文案。

可直接复用的实现代码 #

// 原始测试数据
const sourceData = [
  {
    value: 'dz',
    locales: [
      { 'ar-dz': "Hello World" },
      { 'ar-dk': "Hello World" }
    ]
  }
]

// 遍历外层对象数组，批量匹配
const matchedResult = sourceData.map(item => {
  // 遍历当前元素下的所有locale配置
  for (const localeEntry of item.locales) {
    // 取当前locale对象的唯一键
    const localeKey = Object.keys(localeEntry)[0]
    // 拆分键为语言段、地区段，加兜底避免只有语言没有地区的场景报错
    const keyParts = localeKey.split('-')
    const regionPart = keyParts[1] || keyParts[0]
    // 命中匹配规则时返回对应文案
    if (regionPart === item.value) {
      return {
        sourceValue: item.value,
        displayText: localeEntry[localeKey]
      }
    }
  }
  // 无匹配时的兜底返回
  return {
    sourceValue: item.value,
    displayText: null
  }
})

console.log(matchedResult)
// 控制台输出: [{sourceValue: 'dz', displayText: 'Hello World'}]

灵活调整提示 #

如果后续需要放宽匹配规则，不需要强制要求匹配地区段，只要locale键的任意一段和value相等就算命中，只需要把判断条件替换成：

if (keyParts.includes(item.value)) { /* 匹配逻辑 */ }

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