Javascript - 尝试使用属性过滤数组答案

【问题标题】：Javascript - Trying to filter array with propertiesJavascript - 尝试使用属性过滤数组
【发布时间】：2018-04-13 00:43:55
【问题描述】：

这是我遇到的一些示例代码。我认为它与数组的属性有关，有什么指导吗？我正在寻找使用联赛属性过滤数组。

<script>
var teams = [
{name: "newcastle", league: "Premiership"},
{name: "Hull", league: "League 1"},
{name: "Sunderland", league: "League 1"},
{name: "Arsenal", league: "Premiership"}];

var filterLeague = teams.filter(function (teams) {
 return (teams.league === "Premiership");
});

document.getElementById("output").innerHTML = filterLeague;

</script>

【问题讨论】：

filterLeauge 是一个数组。你为什么把它写成innerHTML？
考虑通过调试器运行它，看看会发生什么......
您得到的输出与您期望的输出是什么？
要添加到这些 cmets，您还应该考虑如何能够包含 .map() 以显示您的输出。
您的过滤器工作正常：[{name: "newcastle", league: "Premiership"}, {name: "Arsenal", league: "Premiership"}]。将结果放在innerHTML 中看起来像问题......

标签： javascript html filter

【解决方案1】：

改变这个：

document.getElementById("output").innerHTML = filterLeague

到这里：

document.getElementById("output").innerHTML = JSON.stringify(filterLeague);

【讨论】：

【解决方案2】：

过滤结果是对象数组。您需要将其转换为某种字符串才能显示在 DOM 元素中

<div id='output'></div>
<script>
var teams = [
{name: "newcastle", league: "Premiership"},
{name: "Hull", league: "League 1"},
{name: "Sunderland", league: "League 1"},
{name: "Arsenal", league: "Premiership"}];

var filterLeague = teams.filter(function (teams) {
 return (teams.league === "Premiership");
});

document.getElementById("output").innerHTML = JSON.stringify(filterLeague);

</script>

【讨论】：

【解决方案3】：

您的过滤器工作正常，但它返回的是一个数组，因此添加它innerHTML 不会那么好。

有几种方法可以创建输出，具体取决于您想要做什么。您可以按照其他答案的建议对数组进行字符串化。或者，您可以使用.map() 迭代每个结果，并将其作为新的 html 元素附加。

var teams = [
{name: "newcastle", league: "Premiership"},
{name: "Hull", league: "League 1"},
{name: "Sunderland", league: "League 1"},
{name: "Arsenal", league: "Premiership"}];

teams
.filter(function (teams) {
 return (teams.league === "Premiership");
})
.map(function(team) {
  var ul = document.getElementById('map-output');
  var li = document.createElement('li');
  li.innerText = team.name;
  ul.appendChild(li);
});

&lt;ul id="map-output"&gt;&lt;/ul&gt;

【讨论】：

感谢您解决了这个问题并演示了一种创建输出的方法。
不用担心。如果你想要更深入的使用 Map/Filter/Reduce 的教程，我会推荐这个 RxJS 教程reactivex.io/learnrx