比较两个使用特定变量的对象文本文件值，如果值有差异，则返回该值

Compare two Object literal files value that uses specific variables and return the value if it has differences

提问人：Karuppiah RK 提问时间：1/10/2023 最后编辑：Karuppiah RK 更新时间：1/13/2023 访问量：166

问：

我有两组不同的对象文字颜色变量文件。

第一个是 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。在这个文件中，我使用了main.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'
      }
    }
  }
];

我想实现的是，我想将第二个.js文件与main.js文件进行比较。我在两个文件中都有相同和不同的uniqueId。如果任何列表使用了 second.js 文件中的变量，则应返回与 main.js 文件具有不同的唯一 ID。

此示例的预期输出为：

listDefault、listFocus、listHover 和 listActive 使用变量而不是直接颜色值。因此，这 4 个列表 uniqueId 应与 main.js 颜色变量进行比较。这里我们在 listDefault 中使用了 var（--primary），在 listFocus 和 listActive 中使用了 var（--primaryHover），在 listHover 中使用了 var（--primaryHover）。

  • listDefault 和 var（--primary） 都具有相同的 uniqueID - 无需返回
  • listFocus 和 var（--primary） 具有不同的 uniqueID - listFocus 键应返回
  • listActive 和 var（--primary） 具有不同的 uniqueID - listActive 键应返回
  • listHover 和 var（--primaryHover） 都具有相同的 uniqueID - 无需返回

如何比较两个使用特定变量的对象文本文件值，如果值有差异，则返回该值？

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'
    }
  }
];

function getUniqueID() {
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      value.uniqueId;
      console.log(value.uniqueId);
    });
  });
  
  return;
}
getUniqueID();



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'
      }
    }
  }
];

javascript 循环对象 比较 对象文字

评论

6赞 jabaa 1/10/2023
在使用标签之前，请阅读标签说明。请勿将 JSON 标记用于对象文本。您的问题中没有任何 JSON。请不要发送垃圾标签。这个问题与 React 有什么关系？
0赞 Inigo 1/13/2023
那么你尝试过什么？向我们展示您的代码以及它未按预期工作的原因。Stack Overflow 不是为了免费劳动力而来的（不，50 代表的赏金不是报酬），而是为了帮助那些已经付出努力但仍然陷入困境的人。
0赞 Karuppiah RK 1/13/2023
@Inigo我已经尝试并发布了答案。谢谢

答：

0赞 Karuppiah RK 1/13/2023 #1

尝试几个小时后，我返回了预期的结果。这是堆栈代码段输出和 JS 代码，

function getUniqueID() {
  let myArray = [];
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      let result = key+`-`+value.uniqueId;
       myArray.push(result);
    });
  });
 
  // console.log(myArray.join(''));
  return myArray.join('');
}
// getUniqueID();

function filterValues() {
  compVariables.forEach((element) => {
    Object.entries(element.list).map(([key, value]) => {
      if (value.default[0].includes('var(--') || value.dark[0].includes('var(--')) {
        if (value.default[0].includes('var(--')) {
          var result = removeVar(value.default[0].replace('--',''));
          var result1 = result+`-`+value.uniqueId;
        }
        if (value.dark[0].includes('var(--')) {
          var result = removeVar(value.dark[0].replace('--',''));
          var result2 = result+`-`+value.uniqueId;
        }
        // console.log(result1);
        // console.log(result2);

        let idArray = getUniqueID();
        let arrayContains = (idArray.indexOf(result1 || result2) > -1);

        console.log(!arrayContains ? key : 'SAME UNIQUE ID');
      }
    });
  });
}
filterValues();


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'
    }
  }
];

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'
      }
    }
  }
];

function removeVar(string) {
    let result = string.replace('var(', '').replace(')', '');
    return result;
}

function getUniqueID() {
  let myArray = [];
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      let result = key+`-`+value.uniqueId;
       myArray.push(result);
    });
  });
 
  // console.log(myArray.join(''));
  return myArray.join('');
}
// getUniqueID();

function filterValues() {
  compVariables.forEach((element) => {
    Object.entries(element.list).map(([key, value]) => {
      if (value.default[0].includes('var(--') || value.dark[0].includes('var(--')) {
        if (value.default[0].includes('var(--')) {
          var result = removeVar(value.default[0].replace('--',''));
          var result1 = result+`-`+value.uniqueId;
        }
        if (value.dark[0].includes('var(--')) {
          var result = removeVar(value.dark[0].replace('--',''));
          var result2 = result+`-`+value.uniqueId;
        }
        // console.log(result1);
        // console.log(result2);

        let idArray = getUniqueID();
        let arrayContains = (idArray.indexOf(result1 || result2) > -1);

        console.log(!arrayContains ? key : 'SAME UNIQUE ID');
      }
    });
  });
}
filterValues();

上一个：对象字面量中的方法定义是什么以及何时使用它们？[复制]

下一个：在 Typescript 中动态分配给对象文字