マップとフィルターと freeCodeCamp チャレンジ

開発者の皆さん、こんにちは!今日、私は Node.js から休憩を取って、いくつかの freeCodeCamp の課題に取り組みました. Node.js で map() および filter() メソッドを頻繁に使用するため、特に this challenge に注目しました.

まず、両方の方法について説明します.これらの方法を検討した後、課題を解決します.それは私にとって素晴らしいリフレッシュです!

Map メソッド

map() メソッドは、呼び出し配列内のすべての要素に対して提供された関数を呼び出した結果が取り込まれた新しい配列を作成します.
map() メソッドは新しい配列を作成します.したがって、元の配列は変更されません.配列のすべての要素を通過し、その内部で作成された関数の結果を返します.例えば:

const numbers = [10, 20, 30, 40]

// Pass a function to map
const biggerNumbers = numbers.map(item => item + 10)

console.log(biggerNumbers) // output: [20, 30, 40, 50]
console.log(numbers) // [10, 20, 30, 40]

上記のコードでは、JavaScript は数値配列の各要素を調べて、それらに 10 を追加しました.では、for ループでそれを行うことはできませんか?はい、できます.このシナリオの for ループと map メソッドの比較.

ループ VS の場合。 Map メソッド

const array1 = [10, 20, 30, 40];

// pass a function to map
const map1 = array1.map(x => x + 10);

console.log("With the map method: " + map1); // output: "With the map method: 20,30,40,50"

for (let i = 0; i < array1.length; i++) {
     array1[i] += 10
}
console.log("With for loop: " + array1) // output: "With for loop: 20,30,40,50"

同じ結果ですよね?いいえ:) forループでそれを行ったとき、元の配列を変更(変更)したためです.一方、map() メソッドで行った場合、元の配列は変更されず、同じままでした.

map() メソッドを使用しない場合

for ループの代わりに map メソッドを使用することは常に理にかなっていると思いがちですが、そうではありません. map メソッドから返された新しい配列を使用しない場合は、map メソッドを使用しないでください.メモリを浪費します.さらに悪いことに、コールバックから値を返さない場合は、map メソッドを使用しないでください.代わりに forEach() を使用してください.マップについては十分なので、filter() メソッドについて説明します.

フィルタ方法

フィルター方式を求人として想像してみてください.この欠員に応募する候補者がいます.要件に合格した候補者は面接を受けます.それがフィルターの役目です.候補をフィルタリングし、その機能は要件です.
例:

const candidates = [
    {
        fullname: "John Doe",
        jobTitle: "React Developer",
        experienceYears: 1
    },
    {
        fullname: "Micheal Shake",
        jobTitle: "React Developer",
        experienceYears: 3
    },
    {
        fullname: "name surname",
        jobTitle: "React Developer",
        experienceYears: 5
    }
]

const candidatePassed = candidates.filter(candidate => candidate.experienceYears > 3);

console.log(candidatePassed);
/*output { fullname: "name surname", jobTitle: "React Developer", experienceYears: 5 }*/

上記のコードでは、filter メソッドを使用して配列をループしました. filter 内の関数は、candidate をパラメーターとして取りました.そのため、候補者の経験が 3 を超える場合、その候補者は面接 (candidatePassed) 配列に取り込まれました. freeCodeCamp の課題を解決する時間です.

filter メソッドを使用して配列からデータを抽出する

here をクリックしてチャレンジに進みます

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

ウォッチリスト変数があります.私たちのタスクは、imbdRating が 8.0 を超える映画のタイトルと評価のみを示す配列を作成することです.

ウォッチリスト配列では、タイトルは "Title", で、評価はたまたま "imdbRating" です. "imdbRating" フィールドの値は文字列であることに注意してください.
私の解決策:

const filteredList = watchList.map(item => {
  let dataMap = {}

  dataMap.title = item.Title
  dataMap.imdbRating = item.imdbRating

  return dataMap
})

まず、watchlist 配列をマッピングしました.オブジェクトを作成し、それを dataMap と呼びました.次のようにして、新しいフィールドと値をオブジェクトに追加できます.

var object = {}

object.name = "new name"
object.age = 24
object.bool = true
object.array = ["string", 12, false]

console.log(object) // output: { name: 'new name', age: 24, bool: true, array: [ 'string', 12, false ] }

同様に、フィールド名も追加できます.このような

const filteredList = watchList.map(item => {
  let dataMap = {}

  dataMap.title = item.Title /* -> we tell JavaScript get item.Title(wacthList.Title) value and assign it to dataMap.title value
  */
  dataMap.imdbRating = item.imdbRating

  return dataMap /* output: [ { 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' } ] */
})

フィルタリングする時間です.次のコードを追加してください: .filter(item => parseFloat(item.rating) >= 8.0) はい、先頭にドットがあります.つまり、評価値を調べて 8.0 以上の要素をフィルタリングしました. parseFloat() メソッドを使用して文字列 (imdbRating フィールドの値は文字列) を変換し、文字列を 10 進数に変換して、2 つの値を比較できるようにしました.

それは今のところすべてです.注意してコーディングを続けてください