如何对比两个Object Literal变量文件，返回uniqueId不匹配项？

问题说明 #

我有两个颜色变量文件：

main.js（基础变量定义） #

const variables = [
  {
    primary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK011'
    },
    secondary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK021'
    },
    disable: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK031'
    },
    primaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK041'
    },
    secondaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK051'
    },
    primaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK061'
    },
    secondaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK062'
    }
  }
];

second.js（引用基础变量的组件变量） #

const compVariables = [
  { 
    list: {
      listDefault: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK011'
      },
      listHover: {
        default: ['blue'],
        dark: ['var(--primaryHover)'],
        uniqueId: 'CK041'
      },
      listFocus: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK081'
      },
      listActive: {
        default: ['var(--primary)'],
        dark: ['green'],
        uniqueId: 'CK091'
      },
      listDisable: {
        default: ['blue'],
        dark: ['green'],
        uniqueId: 'CK001'
      }
    }
  }
];

需求：遍历second.js中的所有项，找出那些引用了main.js变量（格式如var(--primary)）的项，对比它们的uniqueId与main中对应变量的uniqueId，返回所有不匹配项的key。

示例预期输出：

listDefault、listFocus、listHover、listActive使用了变量，需对比其uniqueId：

• listDefault与var(--primary)的uniqueId一致，无需返回
• listFocus与var(--primary)的uniqueId不一致，需返回listFocus
• listActive与var(--primary)的uniqueId不一致，需返回listActive
• listHover与var(--primaryHover)的uniqueId一致，无需返回

实现步骤与代码 #

1. 构建main变量的UniqueID映射表 #

先把main.js里的变量名和对应的uniqueId提取成一个对象，方便后续快速查询：

// 构建变量名到uniqueId的映射
const variableIdMap = {};
variables[0] && Object.entries(variables[0]).forEach(([varName, varData]) => {
  variableIdMap[varName] = varData.uniqueId;
});

2. 正则提取引用的变量名 #

用正则表达式从var(--xxx)格式的字符串中提取变量名：

// 匹配var(--xxx)格式的正则，提取xxx部分
const varRegex = /var\(--([a-zA-Z0-9]+)\)/;

3. 遍历检查second.js的项 #

遍历second.js中的所有组件变量，检查每个项的颜色数组，提取引用的变量，对比uniqueId：

function findMismatchedIds() {
  const mismatchedKeys = [];
  // 获取second.js中的list对象
  const listItems = compVariables[0]?.list || {};

  Object.entries(listItems).forEach(([itemKey, itemData]) => {
    // 收集当前项所有引用的变量名（去重）
    const referencedVars = new Set();
    // 检查default和dark数组
    ['default', 'dark'].forEach(mode => {
      itemData[mode]?.forEach(color => {
        const match = color.match(varRegex);
        if (match) {
          referencedVars.add(match[1]);
        }
      });
    });

    if (referencedVars.size === 0) return; // 没有引用变量，跳过

    // 遍历所有引用的变量，对比uniqueId
    for (const varName of referencedVars) {
      const expectedId = variableIdMap[varName];
      if (!expectedId) continue; // main中没有该变量，跳过
      if (itemData.uniqueId !== expectedId) {
        mismatchedKeys.push(itemKey);
        break; // 只要有一个不匹配，就标记该项
      }
    }
  });

  return mismatchedKeys;
}

// 执行函数并输出结果
const result = findMismatchedIds();
console.log('不匹配的项key:', result); // 输出: ["listFocus", "listActive"]

代码说明 #

• 映射表variableIdMap将main中的变量名和uniqueId关联，查询时间复杂度O(1)
• 正则varRegex精准匹配var(--xxx)格式的字符串，提取变量名
• 用Set去重同一项引用的重复变量，避免重复对比
• 只要项中有一个引用变量的uniqueId不匹配，就将该项key加入结果数组

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