这个功能性 Javascript 示例是如何工作的？

Question

我似乎无法理解这段 sn-p 代码。你能给我一两个提示吗？

  var filteredList = watchList.map(function(e) {
  return {title: e["Title"], rating: e["imdbRating"]}
  }).filter((e) => e.rating >= 8);

问题：我知道 'e' 是传递给 map 方法回调的参数，但是 e["Title"] 和 e["imdbRating"] 是什么？我们应该在一个对象数组上运行这个函数。我不明白语法，以及它如何调用某些东西。非常困惑。

我了解代码的作用，但我们怎么会使用这个 title: e["Title"], rating: e["imdbRating"] ???

这是一组对象的示例！

var watchList = [
                 {  
                   "Title": "Inception",
                   "Year": "2010",
                   "Rated": "PG-13",
                   "Released": "16 Jul 2010",
                   "Runtime": "148 min",
                   "Genre": "Action, Adventure, Crime",
                   "Director": "Christopher Nolan",
                   "Writer": "Christopher Nolan",
                   "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
                   "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
                   "Language": "English, Japanese, French",
                   "Country": "USA, UK",
                   "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
                   "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
                   "Metascore": "74",
                   "imdbRating": "8.8",
                   "imdbVotes": "1,446,708",
                   "imdbID": "tt1375666",
                   "Type": "movie",
                   "Response": "True"
                },
                {  
                   "Title": "Interstellar",
                   "Year": "2014",
                   "Rated": "PG-13",
                   "Released": "07 Nov 2014",
                   "Runtime": "169 min",
                   "Genre": "Adventure, Drama, Sci-Fi",
                   "Director": "Christopher Nolan",
                   "Writer": "Jonathan Nolan, Christopher Nolan",
                   "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
                   "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
                   "Language": "English",
                   "Country": "USA, UK",
                   "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
                   "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
                   "Metascore": "74",
                   "imdbRating": "8.6",
                   "imdbVotes": "910,366",
                   "imdbID": "tt0816692",
                   "Type": "movie",
                   "Response": "True"
                },

Answer 1

e 是一个具有一些属性的对象。想象一下它看起来像这样：

var e = {
    Title: 'foo',
    imdbRating: 7.2,
};

所以 e["Title"] 将返回 'foo' 而 e["imdbRating"] 将返回 7.2。

你发布的函数也可以这样写：

  var filteredList = watchList.map(function(e) {
      return {title: e.Title, rating: e.imdbRating}
  }).filter((e) => e.rating >= 8);

也许这样更容易理解。

Answer 2

这里e 指向数组中正在处理的当前元素。所以e 基本上会代表数组中的每个对象。您可以将e 替换为任何其他有效名称。

在您的代码中，首先 map 正在创建一个新的对象数组，每个对象都有两个键 title 和 imbRating ，然后再次对其应用过滤器以创建另一个新数组，其中 imbRating 的值为8个以上

var watchList = [{
    "Title": "Inception",
    "Year": "2010",
    "Rated": "PG-13",
    "Released": "16 Jul 2010",
    "Runtime": "148 min",
    "Genre": "Action, Adventure, Crime",
    "Director": "Christopher Nolan",
    "Writer": "Christopher Nolan",
    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
    "Language": "English, Japanese, French",
    "Country": "USA, UK",
    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.8",
    "imdbVotes": "1,446,708",
    "imdbID": "tt1375666",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Interstellar",
    "Year": "2014",
    "Rated": "PG-13",
    "Released": "07 Nov 2014",
    "Runtime": "169 min",
    "Genre": "Adventure, Drama, Sci-Fi",
    "Director": "Christopher Nolan",
    "Writer": "Jonathan Nolan, Christopher Nolan",
    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
    "Language": "English",
    "Country": "USA, UK",
    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.6",
    "imdbVotes": "910,366",
    "imdbID": "tt0816692",
    "Type": "movie",
    "Response": "True"
  }
]



var filteredList = watchList.map(function(e) {
  return {
    title: e["Title"],
    rating: e["imdbRating"]
  }
}).filter((e) => e.rating >= 8);

console.log(filteredList)

Answer 3

var filteredList = watchList.map(function(e) {
  return {title: e["Title"], rating: e["imdbRating"]}
  }).filter((e) => e.rating >= 8);

在上面的代码中，map 函数用于迭代 watchList 数组中的所有元素。 Map 会一一迭代所有作为对象的值。 e 被分配了对象。它返回一个具有属性的对象，其值为e["Title"]。这是一种访问对象属性的方法。e["Title"] 和e.imdbRating 将分别调用与title 和imdbRating 值相关的值。

Answer 4

让我们把它分开，这样更有意义

首先，我们用 map 创建一个新数组。 Map 通过遍历数组（在这种情况下为 watchList）来工作，在每次迭代时，它将当前数组元素传递给提供的回调函数，返回的值定义新数组中索引 i 处的值，其中索引 i 是传递的元素的位置到回调函数。

举个例子：

const timeTwo = [1, 2, 3].map(num => num * 2);
// timesTwo = [2, 4, 6]

在您提供的示例中，map 返回一个包含属性 title 和 rating 的新对象数组。 title 与原始数组相同，但 rating 是 e.imdbRating 的映射值。

var filteredList = watchList.map(function(e){
  return {
    title: e.title,
    rating: e.imdbRating,
  };
});

现在让我们看看下一部分。过滤器，通过迭代旧数组来创建一个新数组，如果传递给过滤器的回调返回 true，则将元素添加到新数组中，如果返回 false，则排除该元素。

在这种情况下，filtered list 的最终值将是一个具有属性 title 和 rating 的对象数组，其中 rating 大于或等于 8；

  var filteredList = filteredList.filter((e) => e.rating >= 8);

让我们把它们放在一起，watchList.map 返回一个新数组，并且所有数组都有一个过滤器方法，所以我们可以将过滤器链接到地图上（如下所示）。最后过滤，返回一个数组，该数组将存储在变量filteredList中。

  var filteredList = watchList.map(function(e) {
      return {title: e.Title, rating: e.imdbRating}
  }).filter((e) => e.rating >= 8);