如何生成键带单引号的JavaScript对象数组以适配第三方库？

问题说明 #

你需要生成如下结构的JavaScript数据：

[{'red': {color:'red'}, ...}]

初始数据为颜色数组：

const COLORS = ['red','yellow']

你尝试了以下代码：

const finalArray = COLORS.map(color => ({ [color]: { color } }))

但生成的结果是不带引号键的结构：

[{red: {color:'red'}}]

第三方库无法识别该结构，需要生成带单引号键的版本。

解决方案 #

首先明确：JavaScript中，{red: ...} 和 {'red': ...} 是完全等价的对象，键的引号只是语法糖，内存中存储的键都是字符串'red'。第三方库识别不了，大概率是它期望接收的是带单引号的JSON风格字符串，而非实际的JavaScript对象。

方法：转成字符串后替换引号 #

先通过map生成目标对象数组，再将其序列化为JSON字符串，最后把所有双引号替换为单引号：

const COLORS = ['red','yellow'];
// 生成对象数组
const finalArray = COLORS.map(color => ({ [color]: { color } }));
// 转成带单引号的字符串
const finalString = JSON.stringify(finalArray).replace(/"/g, "'");

执行后finalString的值为：

[{'red':{'color':'red'},'yellow':{'color':'yellow'}}]

直接将这个字符串传给第三方库即可。

补充说明 #

如果第三方库确实需要接收JavaScript对象而非字符串，那它的识别逻辑存在问题——因为带不带引号的键在JS中是完全相同的对象。这种情况下可以检查库的文档，或者尝试将对象序列化为字符串后再让库解析（如果库支持的话）。

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