مرجع مقالات کاربردی حوزه اپلیکیشن

جاوااسکریپت متدهای مفیدی دارااست که به ما طراحی اپلیکیشن در مشهد یاری می‌نماید تا از روش آرایه‌هایمان شغل تکرار را اجرا دهیم. دو گزینه متداول که برای تکرار به کارگیری میگردد ()Array.prototype.map و ()Array.prototype.forEach میباشد.

ولی این دو ممکن میباشد برای مبتدیان مقداری نامعلوم باشد. چون هر دوی آنها شغل تکرار را جاری ساختن میدهند. پس تفاوت این دو چیست؟

تعریف و تمجید

مشی map یک تابع را تحت عنوان پارامتر اخذ می‌نماید. بعد آن را بر روی هر عنصر ایفا کرده و یک آرایه تماما تازه با نتیجه ها فراخوانی تابع ارائه گردیده را گشوده می‌گرداند.

این یعنی یک آرایه نو را گشوده می‌گرداند که مشتمل بر تصویری از هر عنصر آرایه میباشد. مدام به عبارتی تعداد گزینه را برمی‌گرداند.

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

myAwesomeArray.map(x => x * x)

// >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]
مانند map، سیاق forEach() یک تابع را تحت عنوان آرگومان اخذ می‌نماید و یک توشه آن را برای هر عنصر آرایه جاری ساختن می‌نماید. با این درحال حاضر، به مکان رجوع و برگشت یک آرایه نو مثل map، undefined را برمی‌گرداند.

const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
// >>>>>>>>> Output : john
// Ali
// Mass
1. مقدار بازگشتی

او‌لین تفاوت دربین map() و forEach() مقدار بازگشتی میباشد. اسلوب forEach()، undefined را برمی‌گرداند و map() یک آرایه نو را با موادسازنده تبدیل‌‌گردیده گشوده می‌گرداند. حتی در صورتیکه آن ها به عبارتی شغل را ایفا دهند، مقدار بازگشتی متعدد میباشد.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]
2. قابلیت و امکان زنجیروار کردن متدهای دیگر

دومی تفاوت در بین متدهای آرایه این میباشد که map() زنجیره‌ای میباشد. این یعنی شما می توانید پس از اجرای سیاق map() بر روی آرایه، reduce()، sort()، filter() و موردها دیگر را به آن متصل فرمایید.

این کاری میباشد که شما نمی‌توانید با forEach() ایفا دهید، چون به عبارتی‌طور که ممکن میباشد پیش بینی بزنید، این روال undefined را برمی‌گرداند.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55
3. تغییرپذیری

کلاً، تغییرپذیری یعنی تغییر‌و تحول، جایگزین، اصلاح یا این که تبدیل، و در دنیای جاوااسکریپت نیز همین معنا را داراست.

یک آبجکت قابل تغییر تحول آبجکتی میباشد که وضعیت آن قادر است پس از تولید تغییر تحول یابد. بدین ترتیب تغییرپذیری در ارتباط با forEach و map چه گونه میباشد؟

عالی، طبق مستندات MDN:

forEach() نمی‌تواند آرایه‌ای را که روی آن فراخوانی گردیده را تغییر تحول دهد. (با این اکنون، callback ممکن میباشد این عمل را جاری ساختن دهد).

map() نمی‌تواند آرایه‌ای را که بر روی آن فراخوانی گردیده است را تغییر و تحول دهد. (اگرچه callback، در شکل فراخوانی شدن، ممکن میباشد این شغل را اجرا دهد).

در اینجا تعریف‌و‌تمجید بسیار شبیه‌ای را می بینیم، و میدانیم که هر دوی آن ها یک callback را تحت عنوان آرگومان اخذ می‌نمایند. براین اساس کدام یک متکی به تغییرناپذیری میباشد؟

عالی، به لحاظ ما این تمجید هنوز بدیهی وجود ندارد. و برای درک کردن اینکه کدام یک آرایه اساسی را تغییر‌و تحول نمی‌دهد، آغاز می بایست طریق عمل این دو سیاق را نظارت کنیم.

سیاق map() یک آرایه تماما نو با ارکان تبدیل‌گردیده و به عبارتی مقدار داده را برمی‌گرداند. در زمینه ی forEach()، حتی در صورتی undefined را برگرداند، با callback آرایه اساسی را تغییر تحول میدهد.

براین اساس ما به وضوح می بینیم که map() به تغییرناپذیری متکی میباشد و forEach() یک مشی تغییردهنده میباشد.

4. سرعت کارایی

در ارتباط با سرعت همت، آنان یه خرده گوناگون می باشند. البته آیا اصلی میباشد؟ بهتر، این فرمان به موردها مختلفی بستگی دارااست مثل رایانه شما، ترازو داده‌هایی که با آن رمز و عمل دارید و غیره.

میتوانید با به کارگیری از مثالی که در تحت آمده میباشد یا این که با jsPerf خودتان آن را نظارت فرمائید تا مشاهده کنید کدام سریع‌خیس میباشد.

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

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)
کلام نهایی

مثل مدام، تعیین میان map() و forEach() بستگی به مورد ها استعمال شما داراست. در صورتی‌که می خواهید داده‌ها را تغییر‌و تحول دهید، جایگزین نمایید یا این که از آن ها استعمال فرمائید، شما بایستی map() را گزینش فرمائید، چون یک آرایه تازه را با داده‌های تبدیل‌گردیده برمی‌گرداند.

البته در صورتی‌که به آرایه بازگشتی نیاز ندارید، از map() به کارگیری نکنید، در ازای از forEach() یا این که حتی رینگ for به کارگیری فرمایید.

امید داریم این نوشته ی علمی تفاوت فی مابین این دو مشی را برای شما روشن ساخته باشد.