mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-21 11:06:03 -05:00
330 lines
13 KiB
Markdown
330 lines
13 KiB
Markdown
---
|
|
id: 587d7b8f367417b2b2512b61
|
|
title: Verwende die map-Methode, um Daten aus einem Array zu extrahieren
|
|
challengeType: 1
|
|
forumTopicId: 18214
|
|
dashedName: use-the-map-method-to-extract-data-from-an-array
|
|
---
|
|
|
|
# --description--
|
|
|
|
Bis jetzt haben wir gelernt, reine Funktionen zu verwenden, um Nebeneffekte in einem Programm zu vermeiden. Außerdem haben wir gesehen, wie wichtig es ist, dass eine Funktion nur von ihren Eingabeargumenten abhängt.
|
|
|
|
Das ist erst der Anfang. Wie der Name schon sagt, geht es bei der funktionalen Programmierung um eine Theorie der Funktionen.
|
|
|
|
Es wäre sinnvoll, sie als Argumente an andere Funktionen zu übergeben und eine Funktion von einer anderen Funktion zurückzugeben. Funktionen gelten in JavaScript als <dfn>Objekte erster Klasse</dfn>, d. h. sie können wie jedes andere Objekt verwendet werden. Sie können in Variablen gespeichert, in einem Objekt abgelegt oder als Funktionsargumente übergeben werden.
|
|
|
|
Beginnen wir mit einigen einfachen Array-Funktionen, die Methoden für den Prototyp des Array-Objekts sind. In dieser Übung schauen wir uns `Array.prototype.map()` an, oder einfacher `map`.
|
|
|
|
Die Methode `map` durchläuft jedes Element in einem Array und gibt ein neues Array zurück, das die Ergebnisse des Aufrufs der Callback-Funktion für jedes Element enthält. Dies geschieht, ohne dass das ursprüngliche Array verändert wird.
|
|
|
|
Wenn der Callback verwendet wird, werden ihm drei Argumente übergeben. Das erste Argument ist das aktuelle Element, das bearbeitet wird. Das zweite ist der Index dieses Elements und das dritte ist das Array, auf dem die Methode `map` aufgerufen wurde.
|
|
|
|
Unten findest du ein Beispiel, in dem du die Methode `map` auf das Array `users` anwendest, um ein neues Array zu erstellen, das nur die Namen der Benutzer als Elemente enthält. Der Einfachheit halber wird im Beispiel nur das erste Argument des Callbacks verwendet.
|
|
|
|
```js
|
|
const users = [
|
|
{ name: 'John', age: 34 },
|
|
{ name: 'Amy', age: 20 },
|
|
{ name: 'camperCat', age: 10 }
|
|
];
|
|
|
|
const names = users.map(user => user.name);
|
|
console.log(names);
|
|
```
|
|
|
|
Die Konsole würde den Wert `[ 'John', 'Amy', 'camperCat' ]` ausgeben.
|
|
|
|
# --instructions--
|
|
|
|
Das Array `watchList` enthält Objekte mit Informationen über verschiedene Filme. Verwende `map` auf `watchList`, um der Variablen `ratings` ein neues Array von Objekten zuzuweisen. Jeder Film im neuen Array sollte nur einen Key `title` mit dem Namen des Films und einen Key `rating` mit der IMDB-Bewertung besitzen. Der Code im Editor verwendet dafür eine `for`-Schleife. Du solltest also die Schleifenfunktion durch deinen `map`-Ausdruck ersetzen.
|
|
|
|
# --hints--
|
|
|
|
Die Variable `watchList` sollte sich nicht ändern.
|
|
|
|
```js
|
|
assert(
|
|
watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron'
|
|
);
|
|
```
|
|
|
|
Dein Code sollte keine `for`-Schleife verwenden.
|
|
|
|
```js
|
|
assert(!code.match(/for\s*?\([\s\S]*?\)/));
|
|
```
|
|
|
|
Dein Code sollte die Methode `map` verwenden.
|
|
|
|
```js
|
|
assert(code.match(/\.map/g));
|
|
```
|
|
|
|
`ratings` sollte gleich `[{"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"}]` sein.
|
|
|
|
```js
|
|
assert.deepEqual(ratings, [
|
|
{ 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' }
|
|
]);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```js
|
|
// The global variable
|
|
const 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, Elliot 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"
|
|
}
|
|
];
|
|
|
|
// Only change code below this line
|
|
|
|
const ratings = [];
|
|
for (let i = 0; i < watchList.length; i++) {
|
|
ratings.push({title: watchList[i]["Title"], rating: watchList[i]["imdbRating"]});
|
|
}
|
|
|
|
// Only change code above this line
|
|
|
|
console.log(JSON.stringify(ratings));
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
const 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, Elliot 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"
|
|
}
|
|
];
|
|
|
|
const ratings = watchList.map(function(movie) {
|
|
return {
|
|
title: movie["Title"],
|
|
rating: movie["imdbRating"]
|
|
}
|
|
});
|
|
```
|