如何在不使用箭头功能的情况下编写此功能？

Question

这是一门课程的练习。 给定一个对象数组，我必须使用map方法循环所有元素，并返回一个称为“ rating”的新变量，这是一个仅包含每个对象的Title和Rating属性的新数组。 给定的对象数组就是这个：

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"
            },
            {
               "Title": "The Dark Knight",
               "Year": "2008",
               "Rated": "PG-13",
               "Released": "18 Jul 2008",
               "Runtime": "152 min",
               "Genre": "Action, Adventure, Crime",
               "Director": "Christopher Nolan",
               "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
               "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
               "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
               "Language": "English, Mandarin",
               "Country": "USA, UK",
               "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
               "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
               "Metascore": "82",
               "imdbRating": "9.0",
               "imdbVotes": "1,652,832",
               "imdbID": "tt0468569",
               "Type": "movie",
               "Response": "True"
            },
            {  
               "Title": "Batman Begins",
               "Year": "2005",
               "Rated": "PG-13",
               "Released": "15 Jun 2005",
               "Runtime": "140 min",
               "Genre": "Action, Adventure",
               "Director": "Christopher Nolan",
               "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
               "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
               "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
               "Language": "English, Urdu, Mandarin",
               "Country": "USA, UK",
               "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
               "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
               "Metascore": "70",
               "imdbRating": "8.3",
               "imdbVotes": "972,584",
               "imdbID": "tt0372784",
               "Type": "movie",
               "Response": "True"
            },
            {
               "Title": "Avatar",
               "Year": "2009",
               "Rated": "PG-13",
               "Released": "18 Dec 2009",
               "Runtime": "162 min",
               "Genre": "Action, Adventure, Fantasy",
               "Director": "James Cameron",
               "Writer": "James Cameron",
               "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
               "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
               "Language": "English, Spanish",
               "Country": "USA, UK",
               "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
               "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
               "Metascore": "83",
               "imdbRating": "7.9",
               "imdbVotes": "876,575",
               "imdbID": "tt0499549",
               "Type": "movie",
               "Response": "True"
            }];

最终结果应如下：

[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]

老实说，由于我无法真正提出解决方案，因此我寻找并找到了以下解决方案：

rating = watchList.map( (item) => ({"title":item["Title"], "rating":item["imdbRating"]}) );

但这是我仅部分理解的箭头功能，因此我尝试使用ECMA5规则解决它，并尝试了以下操作：

var rating = watchList.map(function (item){
let obj ={
   "title":item["Title"], 
    "rating":item["imdbRating"]
    }
    return obj;

}）;

我的观点是，对于地图元素循环的每个元素，它都会在新数组中返回一个对象，但在控制台上显示的结果是：

[object Object],[object Object],[object Object],[object Object],[object Object]

那么，如何在不使用箭头函数的情况下编写函数并获得准确的结果呢？

先感谢您

Answer 1

问题可能出在您使用console.log的方式（字符串与对象打印[object Object]串联）。

两种map功能均产生相同的响应。 演示在这里👇

Answer 2

它完美地工作-请参阅如何将arrow函数修改为符合ES5的函数：

 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" }, { "Title": "The Dark Knight", "Year": "2008", "Rated": "PG-13", "Released": "18 Jul 2008", "Runtime": "152 min", "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)", "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine", "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", "Language": "English, Mandarin", "Country": "USA, UK", "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg", "Metascore": "82", "imdbRating": "9.0", "imdbVotes": "1,652,832", "imdbID": "tt0468569", "Type": "movie", "Response": "True" }, { "Title": "Batman Begins", "Year": "2005", "Rated": "PG-13", "Released": "15 Jun 2005", "Runtime": "140 min", "Genre": "Action, Adventure", "Director": "Christopher Nolan", "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)", "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes", "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.", "Language": "English, Urdu, Mandarin", "Country": "USA, UK", "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg", "Metascore": "70", "imdbRating": "8.3", "imdbVotes": "972,584", "imdbID": "tt0372784", "Type": "movie", "Response": "True" }, { "Title": "Avatar", "Year": "2009", "Rated": "PG-13", "Released": "18 Dec 2009", "Runtime": "162 min", "Genre": "Action, Adventure, Fantasy", "Director": "James Cameron", "Writer": "James Cameron", "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang", "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.", "Language": "English, Spanish", "Country": "USA, UK", "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg", "Metascore": "83", "imdbRating": "7.9", "imdbVotes": "876,575", "imdbID": "tt0499549", "Type": "movie", "Response": "True" } ]; var ratings = watchList.map(function(item) { return {"Title": item["Title"], "Rating": item["imdbRating"]} }); console.log(ratings); 

Answer 3

在您的情况下，箭头符号或function关键字等效于创建函数。 这是因为您不使用this绑定或任何外部绑定。 而且，您的语法很好。

请注意，如果您想查看对象的实际内容，则“标准”方法是从object中获取JSON 。

您应该可以使用console.log(JSON.stringify(yourObject)) ，它应该可以为您带来期望。

Answer 4

控制台日志返回您的监视列表的[object，object]，因为这是数组内的一个对象，这是正确的，我在这里通过控制台记录监视列表的控制台尝试了您的代码，它返回了对象结果的所需数组： https://es6console.com/jr72hz5j/

如果您在理解箭头功能方面遇到困难，我将为您提供帮助，因为这是比es5语法更好的实现：

const rating =  // the Storing of your Variable this should be constant if your don't want the data to be changed and let if you want to change it later
watchList.map( (item) => // this is equal to function(item) {} the item here is each element of your arra.
({"title":item["Title"], // this stores the object with a key of title you can also use item.Title instead
"rating":item["imdbRating"]})  // This stores the imdb rating to your new rating object you can also use item.imdbRating instead for shorter code
);

es6可以实现较短的行，并且可以创建较短的实现。 如果您有任何疑问，请在评论中回复

Answer 5

我编译了您的原始代码，使其同时包含ES5和ES6函数（两者均正常工作）以及console.log('ES5', ratingES5); 和console.log('ES6', ratingES6); 。

两个console.logs均返回所需的输出。 您如何使用console.log ？ 那可能是问题所在。

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"
  },
  {
  "Title": "The Dark Knight",
  "Year": "2008",
  "Rated": "PG-13",
  "Released": "18 Jul 2008",
  "Runtime": "152 min",
  "Genre": "Action, Adventure, Crime",
  "Director": "Christopher Nolan",
  "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
  "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
  "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
  "Language": "English, Mandarin",
  "Country": "USA, UK",
  "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
  "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
  "Metascore": "82",
  "imdbRating": "9.0",
  "imdbVotes": "1,652,832",
  "imdbID": "tt0468569",
  "Type": "movie",
  "Response": "True"
  },
  {  
  "Title": "Batman Begins",
  "Year": "2005",
  "Rated": "PG-13",
  "Released": "15 Jun 2005",
  "Runtime": "140 min",
  "Genre": "Action, Adventure",
  "Director": "Christopher Nolan",
  "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
  "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
  "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
  "Language": "English, Urdu, Mandarin",
  "Country": "USA, UK",
  "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
  "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
  "Metascore": "70",
  "imdbRating": "8.3",
  "imdbVotes": "972,584",
  "imdbID": "tt0372784",
  "Type": "movie",
  "Response": "True"
  },
  {
  "Title": "Avatar",
  "Year": "2009",
  "Rated": "PG-13",
  "Released": "18 Dec 2009",
  "Runtime": "162 min",
  "Genre": "Action, Adventure, Fantasy",
  "Director": "James Cameron",
  "Writer": "James Cameron",
  "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
  "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
  "Language": "English, Spanish",
  "Country": "USA, UK",
  "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
  "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
  "Metascore": "83",
  "imdbRating": "7.9",
  "imdbVotes": "876,575",
  "imdbID": "tt0499549",
  "Type": "movie",
  "Response": "True"
  }
];       

let ratingES6 = watchList.map( (item) => ({"title":item["Title"], "rating":item["imdbRating"]}) );

var ratingES5 = watchList.map(function(item) {
  let obj = { "title":item["Title"], "rating":item["imdbRating"] }
  return obj;
});

console.log('ES5', ratingES5);
// [{"title":"Inception","rating":"8.8"},{"title": "Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]

console.log('ES6', ratingES6);
// logs same output above