优化 if/else 语句

Question

I wrote the following code to simulate and simplify what is happening in my application.

In this simplification, I have the if and else branch that are executing the same code

async function manipulDom(e) {
  const URItwo = `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json`;
  let response = await fetch(URItwo);
  var data = await response.json();
  console.log(data);
  for (var key in data) {
    if (data[key].cc == "USD") {
      rateone.innerHTML =
        data[key].txt + ` ` + data[key].rate.toFixed(2) + `грн`;
      cursUSD = data[key].rate.toFixed(2);
      console.log(cursUSD);
    } else if (data[key].cc == "EUR") {
      ratetwo.innerHTML =
        data[key].txt + ` ` + data[key].rate.toFixed(2) + `грн`;
      cursEUR = data[key].rate.toFixed(2);
      console.log(cursEUR);
    } else if (data[key].cc == "PLN") {
      ratetree.innerHTML =
        data[key].txt + ` ` + data[key].rate.toFixed(2) + `грн`;
      cursPLN = data[key].rate.toFixed(2);
      console.log(cursPLN);
      return;
    }
  }
}

Answer 1

Use objects indexed by the currency abbreviations instead:

const cursObj = {
  USD: <value of cursUSD>,
  EUR: <value of cursEUR>,
  PLN: <value of cursPLN>
};
const rateElementsByCurrency = {
  USD: rateone,
  EUR: rateTwo,
  PLN: rateThree
}

async function manipulDom(e) {
  const URItwo = `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json`;
  const response = await fetch(URItwo);
  const data = await response.json();
  data.forEach((obj) => {
    const { cc } = obj;
    if (cursObj[cc]) {
      cursObj[cc] = obj.rate.toFixed(2);
      rateElementsByCurrency[cc].textContent = obj.txt + ` ` + cursObj[cc] + `грн`;
      // If you're familiar with template literals, then you can do instead:
      // rateElementsByCurrency[cc].textContent = `${obj.txt} ${cursObj[cc]}грн`;
    }
  });
}

Because data is an array , not an object, iterate over it with forEach - don't use ` for..in to iterate over arrays.

Because you want to put text into the rateElementsByCurrency elements, rather than HTML, you should use textContent instead of innerHTML , it's safer, quicker, and more predictable.

Answer 2

Try This

 async function manipulDom(e) { const URItwo = `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json`; const response = await fetch(URItwo); const data = await response.json(); var cc = ["USD", "EUR", "PLN"]; var exchangeRates = {}; for(value of data){ if(cc.includes(value.cc)){ let index = cc.indexOf(value.cc); cc.splice(index,index+1); value.rate = Number(value.rate).toFixed(2); exchangeRates[value.cc] = value; } if(cc.length < 1){break;} } console.log(exchangeRates); } manipulDom();