时间戳

首页 > 解决方案 > 大家好，updateList 函数的 if 语句是如何工作的？

javascript - 大家好，updateList 函数的 if 语句是如何工作的？

问题描述

此代码片段运行良好，但我想知道 updateList 函数中 if 语句背后的逻辑？我知道为什么选择所有国家时都会获得所有国家，但是当我在大洋洲（Oceiaia）这样的选择列表中选择其他价值时，我才能从该地区获得国家。这个简单的逻辑或运算符如何过滤其余国家/地区并仅返回特定区域？如果有人可以逐步向我解释整个 updateList 函数是如何工作的，我将不胜感激？

const regionMenu = document.querySelector('#regionMenu');
const result = document.querySelector('.result');
const countryUrl = 'https://restcountries.eu/rest/v2/all';
let countries;

fetch(countryUrl)
    .then(response => response.json())
    .then(json => {
        countries = json;
        // console.log(countries);
        updateList();
    })
    .catch(err => console.log(err));

function updateList() {
    let output = '';
    for(let i = 0; i < countries.length; i++) {
        if(regionMenu.value === 'all' || regionMenu.value === countries[i].region) {
          output += `
          <div>
            <img src=${countries[i].flag} width="160px" height="80px">
            <ul>
              <li> Name: ${countries[i].name}</li>
              <li> Population: ${countries[i].population}</li>
              <li> Region: ${countries[i].region}</li>
              <li> Capital: ${countries[i].capital}</li>
            </ul>
          </div>
        `;
        }
    }
    result.innerHTML = output;
}

regionMenu.addEventListener('change', updateList);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <header>
        <h3>Where in the world?</h3>
        <i class="fas fa-moon">Dark Mode</i>
    </header>
    <nav>
        <!-- Search input -->
        <div class="search">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Search for a country" id="searchInput">
        </div>
    </nav>
    <main>
        <!-- Filter Countries -->
        <select name="Filter by Region" id="regionMenu">
            <option value="all">Filter by Region</option>
            <option value="Africa">Africa</option>
            <option value="Americas">Americas</option>
            <option value="Asia">Asia</option>
            <option value="Europe">Europe</option>
            <option value="Oceania">Oceania</option>
        </select>
        <div class="result">

        </div>
    </main>

    <script src="main.js"></script>
</body>

</html>

标签： javascriptjsonfetch

解决方案

您可能被该代码使用map不正确的事实误导了。不过，首先，回答您的实际问题：

那个简单的逻辑或运算符如何过滤其余国家并仅返回特定区域？

如果条件为假，map回调不做任何事情。如果条件为真，则附加到output变量。

那么使用map不当是怎么回事呢？可悲的是，有人在教map作为数组的通用迭代器。它不是。map根据从回调中获得的返回值创建一个新数组。如果您不使用该新数组，map则使用错误的工具很简单——使用forEachorfor-of或其他几种方法中的任何一种循环遍历数组。

但是由于该代码正在使用map，您可能认为map正在做的不仅仅是循环遍历数组。不是，只是用错了。

正如我所说，根据过去约 18 个月左右在 Stack Overflow 上看到的代码，一定有人在积极教授这种对 . 的滥用map，这是不幸的。

以下是您可以更新的一些示例updateList ——

使用forEach：

function updateList() {
    let output = '';
    countries.forEach(country => {
        if (regionMenu.value === 'all' || regionMenu.value === country.region) {
          output += `
          <div>
            <img src=${country.flag} width="160px" height="80px">
            <ul>
              <li> Name: ${country.name}</li>
              <li> Population: ${country.population}</li>
              <li> Region: ${country.region}</li>
              <li> Capital: ${country.capital}</li>
            </ul>
          </div>
        `;
        }
    });
    result.innerHTML = output;
}

使用for-of：

function updateList() {
    let output = '';
    for (const country of countries) {
        if (regionMenu.value === 'all' || regionMenu.value === country.region) {
          output += `
          <div>
            <img src=${country.flag} width="160px" height="80px">
            <ul>
              <li> Name: ${country.name}</li>
              <li> Population: ${country.population}</li>
              <li> Region: ${country.region}</li>
              <li> Capital: ${country.capital}</li>
            </ul>
          </div>
        `;
        }
    }
    result.innerHTML = output;
}

map通过始终返回有意义的值并.join("")在结果数组上使用来正确使用：

function updateList() {
    result.innerHTML = countries.map(country => {
        if (regionMenu.value === 'all' || regionMenu.value === country.region) {
          return `
          <div>
            <img src=${country.flag} width="160px" height="80px">
            <ul>
              <li> Name: ${country.name}</li>
              <li> Population: ${country.population}</li>
              <li> Region: ${country.region}</li>
              <li> Capital: ${country.capital}</li>
            </ul>
          </div>
        `;
        }
        return "";
    }).join("");
}

使用filter, 然后map, 然后join:

function updateList() {
    result.innerHTML = countries.filter(
        country => regionMenu.value === 'all' || regionMenu.value === country.region
    ).map(country => `
          <div>
            <img src=${country.flag} width="160px" height="80px">
            <ul>
              <li> Name: ${country.name}</li>
              <li> Population: ${country.population}</li>
              <li> Region: ${country.region}</li>
              <li> Capital: ${country.capital}</li>
            </ul>
          </div>
        `
    ).join("");
}

推荐阅读