JS无法读取.NET后端返回对象的带空格键值、赋值后出现重复键问题

核心原因 #

你遇到的现象本质是两个肉眼看起来完全相同的键，实际包含的空格字符的Unicode编码不同。JavaScript对象的键匹配遵循严格相等规则，编码不一致的字符串会被判定为两个完全独立的键，这就是无法读取原键、赋值后出现两个视觉上同名键的根本原因。

具体现象解释 #

• 为什么读不到原键的值？
  .NET后端返回的字段名中，键名里的空格大概率不是普通半角空格（Unicode编码U+0020），而是其他类空格字符，常见的比如不换行空格（U+00A0，就是HTML里 对应的字符）、全角空格（U+3000）、窄空格（U+202F）等。这类字符在控制台打印渲染时和普通半角空格视觉上完全一致，但编码存在差异，所以你用带普通半角空格的字符串"Approved Variations"读取属性时，无法匹配到后端返回的键，自然返回undefined。
• 为什么赋值后会出现重复键？
  你手动赋值时使用的是普通半角空格的键名，和后端返回的键名编码不一致，相当于给对象新增了一个完全独立的键，所以打印对象时会出现两个视觉上完全同名的键，实际对应两个不同的属性，值也互不干扰。

验证方法 #

你可以通过以下代码将两个键的字符逐个转成Unicode编码，就能直观看到差异：

function getCharUnicode(str) {
  return str.split('').map(char => {
    return `${char}: U+${char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')}`
  }).join(' | ')
}

console.log(getCharUnicode(keyArray[25]))
console.log(getCharUnicode(keyArray[27]))

执行后查看两个键中对应空格位置的编码，就可以确认两个空格的编码不一致。

解决方案 #

1. 最优方案：联系后端调整返回字段的命名规则，统一使用普通半角空格，或者直接将空格替换为下划线、转为驼峰命名，从源头消除类空格字符的问题。
2. 前端兼容方案：如果无法调整后端接口，可在拿到返回数据后先对所有键名做归一化处理，将所有类空格字符统一替换为普通半角空格：

// 归一化处理所有键名
const normalizedData = Object.fromEntries(
  Object.entries(rawData).map(([key, value]) => {
    // 匹配所有Unicode类空格字符，替换为普通半角空格
    const processedKey = key.replace(/\p{Separator}/gu, ' ')
    return [processedKey, value]
  })
)

处理完成后，再用带普通半角空格的键名就能正常读取属性。

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