标题很笼统,但我想我缺乏适当的文字来解释这一点。
所以我从外部API获取一些数据,我想过滤一些结果。我使用forEach
循环响应,然后使用if语句根据某些条件排除其中的一些。
所以在这个例子中,我提取了一些电影数据,我想排除那些没有img URL返回的电影。这部分工作正常。接下来,我想排除那些受欢迎程度较低的电影。JSON对象上的受欢迎程度设置为一个数字,即4.45644。
const findMovies = response.results;
findMovies.forEach( movie => {
if (movie.poster_path != null && movie.popularity > 8) {
// print to DOM
} else {
//dont print nothing
}
字符串
问题是,与上述代码我过滤出所有的电影,有一个受欢迎程度小于或大于8。我相信我错过了一些非常愚蠢的,但我已经花了几个小时卡住了。
让我知道如果你需要任何其他的代码片段,可能是有帮助的。
这基本上就是控制台上的API响应日志
results: Array(20)
0:
adult:false
poster_path: "/tjQHn6xW5BiB1RJ3OZIPDzIOSkF.jpg"
popularity: 30.400022
....
型
3条答案
按热度按时间jtjikinw1#
这里有一些我们可以检查的代码,我想忘记你现有的代码,直接进入问题的核心,那就是拉一个电影列表,分析它们,并以某种自定义的方式对它们进行排序。
我选择使用
Array.reduce()
,因为它允许我们跳过来自数据库的每一部电影,并分析它的任何我们喜欢的东西,然后它创建一个输出对象,过滤匹配的结果,并维护一个被拒绝的电影列表。我这样做是因为我想让你知道
reduce
是如何工作的(因为它很棒)字符串
首先,
Array.map()
或Array.reduce()
与Array.forEach()
非常相似。如果您已经知道这一点,太棒了--我爱你。这三个方法都遍历一个可迭代对象,并对每一项做一些事情。不同的是map生成一个新的Array,而reduce可以生成任何数据结构。这使得这个过程不可变这是一个很好的实践。你将不得不自己研究不变性。如果你这样做了,请注意JavaScript是如何维护对非原语的实时引用的。当涉及到“共享可变状态”时,这可能会造成噩梦。其次,
Array.reduce()
比map多一点,因为它是一个累加器。如果你不熟悉,我强烈建议你学习所有关于reduce的知识。长话短说,在我的例子中,我们正在累加一个有两个键的Object:matches
和rejects
。我们正在遍历movies Array中的每个项目,并使用您的原始逻辑进行分析,但我把它翻到了你的反面。它是这样的:1)检查每部电影
2)如果
movie.poster_path == null
:movie是一个reject,把它推到我们正在累加的reject数组中。使用==
将捕获所有falsy值,例如''
,0
,undefined
和null
。3)如果
movie.popularity < 8
:movie是一个reject,则将其推入我们正在累积的reject Array中。4)在我们移动到列表中的下一部电影之前,我们将
rejectReason
属性添加到电影结果中(以防我们以后想要检查它或在错误消息中显示它)。5)注意reduce函数是一个if语句列表,这些语句会导致拒绝,最后一步是:“如果电影还没有被拒绝,将其添加到我们正在累积的
matches
数组中。附赠说明:
acc
代表累加器。如果你仔细看,我们正在累加一些东西,而reduce函数正在循环每个项目。当它说return acc
时。这意味着,返回累加器,以便下一个项目也可以使用它。既然你在这个问题上花了很长时间,我想帮助你理解如何思考做这种“从列表到过滤集的转换”。我使用并提倡函数式编程技术。map,filter和reduce是这种思维方式的核心,所以是不可变的数据结构和一般的单向数据流。注意这些关键字我下降,并始终注意,当人们谈论当你在复杂的应用程序中做更多疯狂的异步事件处理时,这些东西会变得越来越吸引你。
zbdgwd5y2#
试试这个
字符串
rryofs0p3#
您也可以尝试:
字符串
这将过滤数组,最终结果是只返回受欢迎程度大于8的电影。然后,如果您只从键等中查找某些值,则可以在末尾使用.forEach()来遍历该结果