堆栈内存溢出
  简体   繁体   English

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

[英]How can I write this function without using an arrow function?

 原文  2019-01-22 00:27:17  8   5    javascript/ arrays/ object/ ecmascript-6/ functional-programming

问题描述

This is an exercise from a course. 这是一门课程的练习。 Given an array of objects I had to use the map method to cycle all the elements and return in a new variable, called "rating", a new array containing just the Title and Rating property for each object. 给定一个对象数组，我必须使用map方法循环所有元素，并返回一个称为“ rating”的新变量，这是一个仅包含每个对象的Title和Rating属性的新数组。 The given array of obejcts is this one: 给定的对象数组就是这个： 

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"
            }];

The final result should be as follow: 最终结果应如下： 

[{"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"}]

Honestly as I couldn't really come up with the solution, I looked for it and found this one: 老实说，由于我无法真正提出解决方案，因此我寻找并找到了以下解决方案： 

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

However this is an arrow function which I only partially understand, so I was trying to solve it using ECMA5 rules and i tried this: 但这是我仅部分理解的箭头功能，因此我尝试使用ECMA5规则解决它，并尝试了以下操作： 

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

}); }）;

My point was, for every element the map function cycles it returns an object in the new array but showing on console the result was: 我的观点是，对于地图元素循环的每个元素，它都会在新数组中返回一个对象，但在控制台上显示的结果是： 

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

So, how can I write the function without using an arrow function and obtain the exact result? 那么，如何在不使用箭头函数的情况下编写函数并获得准确的结果呢？

Thank you in advance 先感谢您

5 个解决方案

解决方案1
 2  2019-01-22 00:36:59

The problem could be with the way you are using console.log (String concatenation with object prints [object Object] ). 问题可能出在您使用console.log的方式（字符串与对象打印[object Object]串联）。

Both map functions generate the same response. 两种map功能均产生相同的响应。 Demo here 👇 演示在这里👇

编辑9j8mwo2z6p

解决方案2
 1  2019-01-22 00:36:18

It works perfectly - see how I modified the arrow function to an ES5-compliant function: 它完美地工作-请参阅如何将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);

解决方案3
 1  2019-01-22 00:38:37

In your case, arrow notation or function keywords are equivalent for creating a function. 在您的情况下，箭头符号或function关键字等效于创建函数。 This is because you don't use this or any external binding. 这是因为您不使用this绑定或任何外部绑定。 Moreover, your syntax is fine. 而且，您的语法很好。

Note that if you want to see the actual contents of the object, the "standard" way would be to get a JSON from your object . 请注意，如果您想查看对象的实际内容，则“标准”方法是从object中获取JSON 。

You should be able to use console.log(JSON.stringify(yourObject)) , which should give you what you expected. 您应该可以使用console.log(JSON.stringify(yourObject)) ，它应该可以为您带来期望。

解决方案4
 0  2019-01-22 01:21:06

The console log returns [object,object] for your watchlist because this is an object inside an array, which is correct by the way, I tried your code here by console logging the watch list and it returns the desired array of an object result: https://es6console.com/jr72hz5j/ 控制台日志返回您的监视列表的[object，object]，因为这是数组内的一个对象，这是正确的，我在这里通过控制台记录监视列表的控制台尝试了您的代码，它返回了对象结果的所需数组： https://es6console.com/jr72hz5j/

If you are having a hard time understanding arrow functions I will help you since this is a better implementation than es5 syntax: 如果您在理解箭头功能方面遇到困难，我将为您提供帮助，因为这是比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 can implement shorter lines and can create shorter implementation. es6可以实现较短的行，并且可以创建较短的实现。 If you have questions just reply in the comments 如果您有任何疑问，请在评论中回复

解决方案5
 0  2019-01-22 02:31:16

I compiled your original code to include both ES5 and ES6 functions (both work perfectly), as well as a console.log('ES5', ratingES5); 我编译了您的原始代码，使其同时包含ES5和ES6函数（两者均正常工作）以及console.log('ES5', ratingES5); and console.log('ES6', ratingES6); 和console.log('ES6', ratingES6); . 。

Both console.logs return the desired output. 两个console.logs均返回所需的输出。 How are you using console.log ? 您如何使用console.log ？ That is probably the issue. 那可能是问题所在。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在没有箭头功能的情况下编写此功能 - How to write this function without arrow function 如何使用没有花括号的 if 来编写较短的箭头 function - How do I write a shorter arrow function using an if without curly braces around the body 如何在ES6箭头功能中编写此代码块 - How can I write this block of code in ES6 Arrow Function 我可以用 if 在一行上写箭头 function - Can I write arrow function with if on a single line 如何在不使用模数的情况下编写此函数？ - How can I write this function without using a modulo? 如何使用箭头 function 编写此回调代码？ - How to write this callback code using arrow function? 如何使用箭头函数返回数组中的第一项？ - How can I return the first item in an array using a arrow function? 如何使用胖箭头表示法将异步功能编写为模块功能 - How to write async function a module function using fat arrow notation 如何将此if语句转换为箭头函数？ - How can I convert this if statement to an arrow function? 如何在 Tcpsocket 中使用箭头 function？ - How can i use arrow function in Tcpsocket?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM