javascript if语句的条件元素> number给出奇怪的结果

cwxwcias  于 12个月前  发布在  Java
关注(0)|答案(3)|浏览(112)

标题很笼统,但我想我缺乏适当的文字来解释这一点。
所以我从外部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
    ....

jtjikinw

jtjikinw1#

这里有一些我们可以检查的代码,我想忘记你现有的代码,直接进入问题的核心,那就是拉一个电影列表,分析它们,并以某种自定义的方式对它们进行排序。
我选择使用Array.reduce(),因为它允许我们跳过来自数据库的每一部电影,并分析它的任何我们喜欢的东西,然后它创建一个输出对象,过滤匹配的结果,并维护一个被拒绝的电影列表。
我这样做是因为我想让你知道reduce是如何工作的(因为它很棒)

// Simulate the Movie DB
const movies = [
  { title: 'Sammy goes to the store', poster_path: 'http://www.com/photo.jpg', popularity: 2, url: 'http://www.com' },
  { title: 'Sammy doesnt go to the store', poster_path: 'http://www.com/photo.jpg', popularity: 4, url: '' },
  { title: 'Willy goes to Whalemart', poster_path: 'http://www.com/photo.jpg', popularity: 6, url: 'http://www.com' },
  { title: 'Jimmy only had one job', poster_path: 'http://www.com/photo.jpg', popularity: 8, url: '' },
  { title: 'Jimmy no longer has one job', poster_path: 'http://www.com/photo.jpg', popularity: 10, url: 'http://www.com' },
  { title: 'Fred goes to the farm', poster_path: undefined, popularity: 12, url: 'http://www.com' },
  { title: 'Fred doesnt go to the farm', poster_path: 'http://www.com/photo.jpg', popularity: 14, url: '' },
  { title: 'Helga goes to the hackathon', poster_path: 'http://www.com/photo.jpg', popularity: 16, url: 'http://www.com' },
  { title: 'Bhima only had one job', poster_path: 'http://www.com/photo.jpg', popularity: 18, url: '' },
  { title: 'Bhima no longer has one job', poster_path: null, popularity: 20, url: 'http://www.com' },
]

// Simulate the network request to get the movies
const response = { results: movies }

// Start with your existing code
const findMovies = response.results

// Rather than forEach, we will use Array.map() or Array.reduce()
// and set the filtered results into a new Array,
// because it provides you more utility overall
const filteredMovies = findMovies.reduce((acc, movie) => {
  if (movie.poster_path == null) {
    // console.log('REJECTING:', movie, 'REASON: no photo')
    movie.rejectReason = 'no photo'
    acc.rejects.push(movie)
    return acc
  }
  if (movie.popularity < 8) {
    // console.log('REJECTING:', movie, 'REASON: bad rating')
    movie.rejectReason = 'bad rating'
    acc.rejects.push(movie)
    return acc
  }
  acc.matches.push(movie)
  return acc
}, { matches: [], rejects: [] })

console.log('MATCHES', filteredMovies.matches)

console.log('\nREJECTS', filteredMovies.rejects)

字符串
首先,Array.map()Array.reduce()Array.forEach()非常相似。如果您已经知道这一点,太棒了--我爱你。这三个方法都遍历一个可迭代对象,并对每一项做一些事情。不同的是map生成一个新的Array,而reduce可以生成任何数据结构。这使得这个过程不可变这是一个很好的实践。你将不得不自己研究不变性。如果你这样做了,请注意JavaScript是如何维护对非原语的实时引用的。当涉及到“共享可变状态”时,这可能会造成噩梦。
其次,Array.reduce()比map多一点,因为它是一个累加器。如果你不熟悉,我强烈建议你学习所有关于reduce的知识。长话短说,在我的例子中,我们正在累加一个有两个键的Object:matchesrejects。我们正在遍历movies Array中的每个项目,并使用您的原始逻辑进行分析,但我把它翻到了你的反面。它是这样的:
1)检查每部电影
2)如果movie.poster_path == null:movie是一个reject,把它推到我们正在累加的reject数组中。使用==将捕获所有falsy值,例如''0undefinednull
3)如果movie.popularity < 8:movie是一个reject,则将其推入我们正在累积的reject Array中。
4)在我们移动到列表中的下一部电影之前,我们将rejectReason属性添加到电影结果中(以防我们以后想要检查它或在错误消息中显示它)。
5)注意reduce函数是一个if语句列表,这些语句会导致拒绝,最后一步是:“如果电影还没有被拒绝,将其添加到我们正在累积的matches数组中。

附赠说明acc代表累加器。如果你仔细看,我们正在累加一些东西,而reduce函数正在循环每个项目。当它说return acc时。这意味着,返回累加器,以便下一个项目也可以使用它。

既然你在这个问题上花了很长时间,我想帮助你理解如何思考做这种“从列表到过滤集的转换”。我使用并提倡函数式编程技术。map,filter和reduce是这种思维方式的核心,所以是不可变的数据结构和一般的单向数据流。注意这些关键字我下降,并始终注意,当人们谈论当你在复杂的应用程序中做更多疯狂的异步事件处理时,这些东西会变得越来越吸引你。

zbdgwd5y

zbdgwd5y2#

试试这个

const findMovies = response.results;
    findMovies.forEach( movie => {
      if (movie.poster_path != null && (8-movie.popularity> 0d)){
         // print to DOM
      } else {
         //dont print anything
      }

字符串

rryofs0p

rryofs0p3#

您也可以尝试:

const result = findMovies.filter(movies => movies.popularity > 8);
console.log(result);

字符串
这将过滤数组,最终结果是只返回受欢迎程度大于8的电影。然后,如果您只从键等中查找某些值,则可以在末尾使用.forEach()来遍历该结果

相关问题