如何在不使用箭頭功能的情況下編寫此功能？

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