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

Question

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

第一个是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'
}
}
];

另一个Object文本文件在这里叫做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'
}
}
}
];

我想要实现的是，我想比较second.js文件和main.js文件。我在两个文件中有相同和不同的uniqueId。如果任何列表使用了second.js文件中的变量，并且与main.js具有不同的uniqueId，则应该返回。

这个例子的预期输出是:

listDefault, listFocus, listthover和listActive使用变量代替直接的颜色值。所以，这4个列表应该与main.js的颜色变量进行比较。这里我们在listDefault, listFocus和listActive中使用var(——primary)，在listthover中使用var(——primaryHover)。

• listDefault和var(——primary)都有相同的唯一id -不需要返回
• listFocus和var(——primary)有不同的唯一id - listFocus键应该返回
• listActive和var(——primary)有不同的惟一id - listActive键应该返回
• listthover和var(——primaryHover)都有相同的唯一id -不需要返回

我如何比较使用特定变量的两个对象文本文件值，并返回值，如果它有差异?

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

Answer 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();