比较2个数组并获取值以查看数组1是否大于数组2

我仍在学习React和Javascript，目前的项目遇到了障碍。

项目目标我正在尝试映射两个对象数组，并检查某个属性是否匹配。如果推荐SkillTree.skills.skill==currentSkills.skill，那么我想检查是否推荐SkillTree.skills.level>currentSkills.level。如果上述条件匹配，或者currentSkills.skill不具备推荐技能树数据中的技能，则该技能将显示为红色文本。否则，为绿色文本。

我所做的我尝试在两个数组之间进行映射，以检查currentSkills.skill===recommendatedSkillTree.skills.

const skillMatch = recommendedSkillTree.filter((skillRecommended) =>
currentSkills.some((skillCurrent) => skillRecommended.skills.skill === skillCurrent.skill)
);
.
.
.
return (
<div>
{recommendedSkillTree.map((item, i) => (
<div key={item.id}>
<div
style={{
color: !skillMatch[i] ? "red" : "green", 
}}
>
{item.skill}
</div>
</div>
))}
</div>

通过这样做，我能够大量输出currentSkills中存在的技能显示为绿色，而不在其中的技能则显示为红色

接下来，我想更深入一步，并尝试比较当前技能的技能水平，如果它们达不到推荐水平，文本将显示为红色。

const levelGap = recommendedSkillTree.map((recommendedLevel) =>
currentSkills.some((levelCurrent) => recommendedLevel.level > levelCurrent.level)
);

通过这样做，我将期待的输出

[true, false, true, true, true, true, true, true, true]

相反，我有：

[true, true, true, true, false, true, true, false, false]

我看不出哪一部分出了问题。如果这个领域的任何前辈能指导我，我将不胜感激。

数据1

const recommendedSkillTree = [
{
id: "1",
role: "Paladin",
skills: [
{
id: "1",
skill: "Attack",
level: "3",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "3",
},
{
id: "4",
skill: "Heal",
level: "4",
},
{
id: "5",
skill: "Group Heal",
level: "2",
},
{
id: "6",
skill: "Double Attack",
level: "4",
},
{
id: "7",
skill: "Ultimate",
level: "3",
},
{
id: "8",
skill: "Defense Up",
level: "2",
},
{
id: "9",
skill: "Attack Up",
level: "2",
},
],
},
];
export default recommendedSkillTree;

数据2

const currentSkills = [
{
id: "1",
skill: "Attack",
level: "2",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "2",
},
{
id: "4",
skill: "Heal",
level: "3",
},
{
id: "5",
skill: "Final Slash",
level: "3",
},
];
export default currentSkills;

提前感谢您抽出时间，如果我的提问方式不符合社区标准，我深表歉意，因为这是我第一次在这里发帖。我周围真的没有人可以问问题，因为我是自学成才的，我周围没有人从事技术领域。非常感谢。

这可能是实现所需目标的一种可能的解决方案。

代码段

const isGreenOrRed = (reco, curr) => (
reco.skills.map(re => (
curr.some(({skill}) => skill === re.skill)
? curr.find(({skill}) => skill === re.skill)['level'] >= re.level
? 'green'
: 'red'
: 'red' 
))
);
const recommendedSkillTree = [
{
id: "1",
role: "Paladin",
skills: [
{
id: "1",
skill: "Attack",
level: "3",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "3",
},
{
id: "4",
skill: "Heal",
level: "4",
},
{
id: "5",
skill: "Group Heal",
level: "2",
},
{
id: "6",
skill: "Double Attack",
level: "4",
},
{
id: "7",
skill: "Ultimate",
level: "3",
},
{
id: "8",
skill: "Defense Up",
level: "2",
},
{
id: "9",
skill: "Attack Up",
level: "2",
},
],
},
];
const currentSkills = [
{
id: "1",
skill: "Attack",
level: "2",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "2",
},
{
id: "4",
skill: "Heal",
level: "3",
},
{
id: "5",
skill: "Final Slash",
level: "3",
},
];
console.log(isGreenOrRed(recommendedSkillTree[0], currentSkills).join(", "));
const SomeComp = ({getColor, ...props}) => (
<div>
{recommendedSkillTree[0].skills.map((item, i) => (
<div key={item.id}>
<div
style={{
color: getColor[i] 
}}
>
{item.skill}
</div>
</div>
))}
</div>
);
ReactDOM.render(
<div>
<h4>Demo UI</h4>
<SomeComp getColor={isGreenOrRed(recommendedSkillTree[0], currentSkills)}/>
</div>,
document.getElementById('rd')
);

<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

解释

这使用了与OP在问题中尝试的逻辑相同的逻辑
修复了所面临的一些问题

下面的解决方案采用了另一种方法来获得相同的结果。

代码段

const isGreenOrRed = (needle, haystack) => (
haystack.some(({skill}) => skill === needle.skill)
? haystack.find(({skill}) => skill === needle.skill)['level'] >= needle.level
? 'green'
: 'red'
: 'red' 
);
const recommendedSkillTree = [
{
id: "1",
role: "Paladin",
skills: [
{
id: "1",
skill: "Attack",
level: "3",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "3",
},
{
id: "4",
skill: "Heal",
level: "4",
},
{
id: "5",
skill: "Group Heal",
level: "2",
},
{
id: "6",
skill: "Double Attack",
level: "4",
},
{
id: "7",
skill: "Ultimate",
level: "3",
},
{
id: "8",
skill: "Defense Up",
level: "2",
},
{
id: "9",
skill: "Attack Up",
level: "2",
},
],
},
];
const currentSkills = [
{
id: "1",
skill: "Attack",
level: "2",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "2",
},
{
id: "4",
skill: "Heal",
level: "3",
},
{
id: "5",
skill: "Final Slash",
level: "3",
},
];
console.log(recommendedSkillTree[0].skills.map(it => isGreenOrRed(it, currentSkills)).join(", "));
const SomeComp = () => (
<div>
{recommendedSkillTree[0].skills.map(item => (
<div key={item.id}>
<div
style={{
color: isGreenOrRed(item, currentSkills)
}}
>
{item.skill}
</div>
</div>
))}
</div>
);
ReactDOM.render(
<div>
<h4>Demo UI - Alternate Approach</h4>
<SomeComp />
</div>,
document.getElementById('rd')
);

<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

解释

这将在单个skill对象级别推动验证
因此，重新使用JSX中发生的现有.map迭代

下面是一个使用Lodash映射的示例。您可以尝试使用check函数来获得所需的结果。

const recommendedSkillTree = [{
id: "1",
role: "Paladin",
skills: [{
id: "1",
skill: "Attack",
level: "3",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "3",
},
{
id: "4",
skill: "Heal",
level: "4",
},
{
id: "5",
skill: "Group Heal",
level: "2",
},
{
id: "6",
skill: "Double Attack",
level: "4",
},
{
id: "7",
skill: "Ultimate",
level: "3",
},
{
id: "8",
skill: "Defense Up",
level: "2",
},
{
id: "9",
skill: "Attack Up",
level: "2",
},
],
}];
const currentSkills = [{
id: "1",
skill: "Attack",
level: "2",
},
{
id: "2",
skill: "Block",
level: "3",
},
{
id: "3",
skill: "Taunt",
level: "2",
},
{
id: "4",
skill: "Heal",
level: "3",
},
{
id: "5",
skill: "Final Slash",
level: "3",
},
];
var result = [];
function check(skill) {
var found = _.find(currentSkills, function(o) {
return o.skill === skill.skill;
});
if (found) {
result.push(found.level >= skill.level);
} else {
result.push(false);
}
}
_.map(recommendedSkillTree[0].skills, check);
console.log(result);

<script src="https://lodash.com/vendor/cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

相关内容

最新更新

热门标签：