此代码段效果很好，但是我想知道updateList函数中if语句背后的逻辑吗？
我知道为什么选择值是全部时得到所有国家，但是当我在选择列表中选择其他值(如大洋洲)时，我只会从该地区得到国家。简单的逻辑或运算符如何过滤其他国家/地区并仅返回特定区域？如果有人可以逐步向我解释整个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>最佳答案
图像国家结构是一个数组，对象只有region和name。
例如，我有这个数组:
const countries = [
{region: "oceania", name: "australia"},
{region: "oceania", name: "fiji"},
{region: "oceania", name: "Samoa"},
{region: "south america", name: "peru"},
{region: "south america", name: "brazil"},
{region: "south america", name: "argentina"},
];
现在，您将使用if语句将每个数组分别映射到每个元素:
或运算符
||表示只有一部分会通过true传递。如果将
regionMenu.value选择为"all"，则所有国家/地区都将通过条件(1)的第一部分。否则，如果选择其他值，例如
"oceania"，则第一部分始终为假oceania === all => False(1)。因此，过滤器将取决于第二部分(2):australia: oceania === oceania (True)
fiji: oceania === oceania (True)
Samoa: oceania === oceania (True)
peru: oceania === south america (False)
brazil: oceania === south america (False)
argentina: oceania === south america (False)
Res: [australia, fiji, Samoa].
再举一个例子，如果
regionMenu.value的值为"south america"，结果将是:australia: south america === oceania (False)
fiji: south america === oceania (False)
Samoa: south america === oceania (False)
peru: south america === south america (True)
brazil: south america === south america (True)
argentina: south america === south america (True)
Res: [peru, brazil, argentina].
关于javascript - 大家好，updateList函数的if语句如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59286595/