比較2個陣列并獲取值以查看陣列1是否大于陣列2-有解無憂

我仍在學習 React 和 Javascript，并且在我當前的專案中遇到了障礙。

專案目標 我試圖通過兩個物件陣列進行映射，并檢查某個屬性是否匹配。如果推薦的SkillTree.skills.skill === currentSkills.skill，那么我想檢查一下是否推薦的SkillTree.skills.level > currentSkills.level。如果符合上述條件，或者 currentSkills.skill 沒有推薦的技能樹資料中的技能，則該技能將顯示為紅色文本。否則，綠色文本。

我所做 的我嘗試在 2 個陣列之間進行映射以檢查 currentSkills.skill ===推薦的SkillTree.skills.skill。

  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;

提前感謝您的寶貴時間，如果我提出問題的方式不符合社區標準，我深表歉意，因為這是我第一次在這里發帖。因為我是完全自學成才的，而且我周圍沒有人在技術領域，所以我周圍沒有人可以提問。太感謝了。

uj5u.com熱心網友回復：

這可能是實作預期目標的一種可能解決方案。

代碼片段

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物件級別的驗證
.map因此，重用JSX 中發生的現有迭代

uj5u.com熱心網友回復：

這是一個使用Lodash map的示例。您可以嘗試使用該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/[email protected]/lodash.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/447637.html

標籤：javascript 数组反应目的

上一篇：將CSV物件寫入陣列Mulesoft

下一篇：當名稱路徑存盤在未知長度的陣列中時，如何從多維物件中獲取值？