迭代时显示为“未定义”的 Javascript 对象答案

【问题标题】：Javascript objects showing up as 'undefined' when iterating through迭代时显示为“未定义”的 Javascript 对象
【发布时间】：2019-12-07 06:36:00
【问题描述】：

真的很基础，我知道，但我只是进入 Javascript 并练习一些数组和对象。我已经编写了一个基本的电影数据库，其中存储在 var movies 中的对象，但是控制台一直显示字符串 ive build 它应该在其中插入 movie.title 为 undefined。我错过了什么？

var movies = [
  {
    "title": "Armagedon",
    "rating": 4.8,
    "hasWatched": true,
  },
  {
    "title": "Tomb Raider",
    "rating": 2.6,
    "hasWatched": true,
  },
  {
    "title": "Fight Club",
    "rating": 4.9,
    "hasWatched": true,
  }
];

movies.forEach(function(movie) {
  var item = "You have ";
  if (movies.hasWatched = true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movies.title + "\" - ";
  item += movies.rating + " stars";
  console.log(item);
})

这显然是一些非常基本的东西，所以放轻松！谢谢！

【问题讨论】：

你应该使用movie.title，而不是movies.title。其他参考文献也一样。
您使用了movies 而不是movie（当前项目）。

标签： javascript arrays javascript-objects

【解决方案1】：

除了一个小错别字之外，您所做的一切很棒...
把电影换成电影就行了

movies.forEach(function(movie) {
  var item = "You have ";
  if (movie.hasWatched = true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movie.title + "\" - ";
  item += movie.rating + " stars";
  console.log(item);
})

你可以试试我对相同代码的小简化

movies.forEach(movie => {
  console.log(
    `You have ${movie.hasWatched ? 'watched' : 'not seen'} "${movie.title}" - ${movie.rating}`
  )
})

此代码使用箭头函数和字符串插值

【讨论】：

【解决方案2】：

电影不是电影

var movies = [
  {
    "title": "Armagedon",
    "rating": 4.8,
    "hasWatched": true,
  },
  {
    "title": "Tomb Raider",
    "rating": 2.6,
    "hasWatched": true,
  },
  {
    "title": "Fight Club",
    "rating": 4.9,
    "hasWatched": true,
  }
];

movies.forEach((movie) => {
  var item = "You have ";
  if (movie.hasWatched = true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movie.title + "\" - ";
  item += movie.rating + " stars";
  console.log(item);
})

使用现代 Javascript 可以大大改善这一点：

var movies = [
  {
    "title": "Armagedon",
    "rating": 4.8,
    "hasWatched": true,
  },
  {
    "title": "Tomb Raider",
    "rating": 2.6,
    "hasWatched": true,
  },
  {
    "title": "Fight Club",
    "rating": 4.9,
    "hasWatched": true,
  }
];

movies.map(({ hasWatched, title, rating }) => `You have ${(hasWatched) ? 'watched ' : 'not seen '}${title} - ${rating} stars`)
      .forEach(m => console.log(m));

【讨论】：

【解决方案3】：

好的，这里有几件事。以及底部的一些建议。

你有两个错误： 1)if (movies.hasWatched = true) {,should be if (movie.hasWatched == true) { 否则，您正在为对象属性分配一个值，而不是调用比较运算符。

2）因为您在迭代块内，并且每个实例都被您传递给 map 中函数的参数引用，请检查以下行：

movies.forEach(function(movie) {

您应该将电影更改为电影，全部在此块内，而不是调用 movies.hasWatched, movies.title, movies.rating

您的代码应该如下所示：

  var movies = [
  {
    "title": "Armagedon",
    "rating": 4.8,
    "hasWatched": true,
  },
  {
    "title": "Tomb Raider",
    "rating": 2.6,
    "hasWatched": true,
  },
  {
    "title": "Fight Club",
    "rating": 4.9,
    "hasWatched": true,
  }
];

movies.forEach(function(movie) {
  var item = "You have ";
  if (movie.hasWatched == true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movie.title + "\" - ";
  item += movie.rating + " stars";
  console.log(item);
})
VM695:28 You have watched "Armagedon" - 4.8 stars
VM695:28 You have watched "Tomb Raider" - 2.6 stars
VM695:28 You have watched "Fight Club" - 4.9 stars

建议：调试是一个非常值得学习的耐心过程。使用浏览器开发工具检查发生了什么。您可以直接在控制台中运行代码，也可以使用调试器来迭代您的代码。它们是强大的工具。通过练习，您将在阅读时更好地选择错误。

另一个小评论是关于stackoverflow的。首先尝试调试和破解错误，耐心等待，从长远来看，它会更快地为您工作。你会在这里发布很多关于非常棘手和罕见的事情。

【讨论】：