استفاده از مپ در جاوا اسکریپت برای حل سه مساله

چالش اول برای استفاده از مپ map در جاوا اسکریپت:

آرایه ای از اعداد به شما داده میشود، شما باید یک آرایه برگردانید به صورتی که هر عدد مربع یا در خود ضرب شده باشد.

تصور کنید آرایه داده شده nums نام دارد. سپس شما میتوانید یک متغیر به نام squares بسازید که برابر باشد با : استفاده از مپ map برای ضرب هر عدد در خودش و برگرداندن این مقدار، اکنون به کد زیر توجه کنید:

num که به عنوان پارامتر ورودی به تابع ارسال میشود، یک نام دلخواه است

const nums = [1, 2, 3, 4, 5]

const squares = nums.map(function(num) {
    return     num * num
})

console.log(squares)
// result-->       [1, 4, 9, 16, 25]

چالش دوم برای استفاده از مپ map در جاوا اسکریپت:

آرایه‌ای از رشته‌ها به شما داده میشود، شما باید آرایه‌ای را برگردانید که در آن حرف اول هر رشته بزرگ باشد.

تصور کنید آرایه ای به نام names داریم، یک متغیر به نام capitalized تعریف میکنیم و برابر قرار میدهیم با: استفاده از مپ بر روی آرایه names و یک ارو فانکشن که در قسمت return آن از دو متد استفاده میکنیم:

یکی toUpperCase و دیگری slice

در هنگام استفاده از متد to UpperCase در داخل براکت عدد صفر را مینویسیم تا بگویم ، اولین حرف رشته را به حرف بزرگ تبدیل کند.

اکنون به کد زیر توجه کنید:

const names = ['alice', 'bob', 'charlie', 'danielle']

const capitalized = names.map((name) => {
    return  name[0].toUpperCase() + name.slice(1)
})

console.log(capitalized)
// Result -->        ['Alice', 'Bob', 'Charlie', 'Danielle']

چالش سوم استفاده از مپ:

با توجه به آرایه‌ای از رشته‌ها، آرایه‌ای از رشته‌ها را برگردانید که هر یک از رشته‌های اصلی را در یک تگ HTML مانند <p></p> میگذارد. به کد زیر توجه کنید تا متوجه شوید چگونه مپ روی آرایه ها حلقه میزند:

const pokemon = ['Bulbasaur', 'Charmander', 'Squirtle']

const paragraphs = pokemon.map((mon) => {
    return `<p>${mon}</p>`
})

console.log(paragraphs)
//Result -->          ['<p>Bulbasaur</p>', '<p>Charmander</p>', '<p>Squirtle</p>']

برای مشاهده کدها به این لینک در کدپن بروید یا در صورت قابل مشاهده بودن به کدها در زیر توجه فرمایید:

اگر کدهای بالا قابل مشاهده نیست به این لینک در کدپن بروید.