У меня есть два набора разных файлов переменных цвета литерала объекта.
Первый — 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'
}
}
}
];
Чего я хочу добиться, так это сравнить файл second.js с файлом main.js. У меня одинаковые и разные уникальные идентификаторы в обоих файлах. Если какой-либо из списков использовал переменные в файле second.js, который имеет уникальный идентификатор, отличный от main.js, он должен быть возвращен.
Ожидаемый результат этого примера:
listDefault, listFocus, listHover и listActive использовали переменные вместо прямого значения цвета. Таким образом, эти 4 списка uniqueId следует сравнивать с цветовой переменной main.js. Здесь мы использовали var(--primary) в listDefault, listFocus и listActive, var(--primaryHover) в listHover.
Как сравнить два значения литеральных файлов объектов, которые используют определенные переменные, и вернуть значение, если оно имеет различия?
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.info(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'
}
}
}
];
Итак, что вы пробовали? Покажите нам свой код и объясните, почему он не работает должным образом. Переполнение стека здесь не для бесплатного труда (и нет, вознаграждение в 50 повторений не оплачивается), а для помощи людям, которые приложили усилия и все еще застряли.
@Inigo Я попытался и опубликовал ответ. Спасибо
Попробовав несколько часов, я вернул ожидаемый результат. Вот вывод фрагмента стека и код JS,
function getUniqueID() {
let myArray = [];
variables.forEach((element) => {
Object.entries(element).map(([key, value]) => {
let result = key+`-`+value.uniqueId;
myArray.push(result);
});
});
// console.info(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.info(result1);
// console.info(result2);
let idArray = getUniqueID();
let arrayContains = (idArray.indexOf(result1 || result2) > -1);
console.info(!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.info(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.info(result1);
// console.info(result2);
let idArray = getUniqueID();
let arrayContains = (idArray.indexOf(result1 || result2) > -1);
console.info(!arrayContains ? key : 'SAME UNIQUE ID');
}
});
});
}
filterValues();
Пожалуйста, прочитайте описания тегов, прежде чем использовать теги. Не используйте тег JSON для литералов объектов. В вашем вопросе нет JSON. Пожалуйста, не спамьте тегами. Как этот вопрос связан с React?