如何用同键对象映射嵌套结构中的{{}}占位符值？

要处理任意层级嵌套的对象或数组里的占位符，核心思路是递归遍历整个数据结构，对每个值做针对性处理：

实现代码 #

const cars = {
    "type": "{{TYPE_OF_RECORDS}}",
    "characteristic": "{{CHARACTERISTICS}}",
    "generation": "{{GENERATION}}",
    "records": [
        {
            "name": "{{CAR_NAME_1}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_1}}",
                    "types": ["{{TYPE_1_A}}", "{{TYPE_1_B}}", "{{TYPE_1_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_2}}",
                    "types": ["{{TYPE_2_A}}", "{{TYPE_2_B}}", "{{TYPE_2_C}}"]
                }
            ]
        },
        {
            "name": "{{CAR_NAME_2}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_3}}",
                    "types": ["{{TYPE_3_A}}", "{{TYPE_3_B}}", "{{TYPE_3_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_4}}",
                    "types": ["{{TYPE_4_A}}", "{{TYPE_4_B}}", "{{TYPE_4_C}}"]
                }
            ]
        }
    ]
};

const tagValues = {
    "CAR_NAME_1": "Toyota",
    "CAR_COLOR_1": "Red",
    "TYPE_1_A": "Light",
    "CHARACTERISTICS": "Mechanical",
    "GENERATION": "5th",
    "TYPE_1_B": "Medium",
    "TYPE_1_C": "Dark",
    "CAR_COLOR_2": "Blue",
    "TYPE_2_A": "Medium",
    "TYPE_2_B": "Ultra light",
    "TYPE_OF_RECORDS": "Cars",
    "TYPE_2_C": "Super dark",
    "CAR_NAME_2": "Honda",
    "CAR_COLOR_3": "Black",
    "TYPE_3_A": "Dark",
    "TYPE_3_B": "Ultra light",
    "TYPE_3_C": "light",
    "CAR_COLOR_4": "White",
    "TYPE_4_A": "Light",
    "TYPE_4_B": "Soft Dark",
    "TYPE_4_C": "Dark medium",
};

function replacePlaceholders(target, values) {
    // 处理字符串：匹配{{KEY}}格式并替换
    if (typeof target === 'string') {
        return target.replace(/{{(\w+)}}/g, (_, key) => values[key] || target);
    }
    // 处理数组：递归处理每个元素
    if (Array.isArray(target)) {
        return target.map(item => replacePlaceholders(item, values));
    }
    // 处理对象：递归处理每个键值对
    if (typeof target === 'object' && target !== null) {
        return Object.fromEntries(
            Object.entries(target).map(([key, val]) => [key, replacePlaceholders(val, values)])
        );
    }
    // 其他类型（数字、布尔等）直接返回
    return target;
}

// 执行替换
const finalObj = replacePlaceholders(cars, tagValues);
console.log(finalObj);

代码说明 #

1. 递归遍历：函数自动识别当前值类型并处理：
   • 字符串：用正则/{{(\w+)}}/g匹配所有{{KEY}}格式占位符，替换为tagValues中对应的真实值；若找不到对应值则保留原字符串
   • 数组：遍历每个元素，递归调用替换函数
   • 对象：遍历所有键值对，递归处理值后重新构建新对象
2. 兼容性：支持任意层级的嵌套结构，不管是对象套数组还是数组套对象都能处理
3. 非侵入式：不会修改原对象，返回全新的处理后的结果

你之前代码的问题 #

• 仅遍历了顶层对象的键，完全没处理records、colors等深层嵌套的数组和对象
• 当cars[key]是对象或数组时，调用replace方法会直接报错（对象/数组没有该方法）
• 替换逻辑错误：cars[key].replace('{{' + cars[key] + '}}', ...)的写法会把{{TYPE_OF_RECORDS}}拼成{{{{TYPE_OF_RECORDS}}}}，根本匹配不上目标占位符

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