روش map جاوا اسکریپت که در ECMAScript 5 معرفی شده است، یک ابزار اساسی برای دستکاری و تبدیل آرایه است. این روش همه کاره و ساده است و در برنامه نویسی مدرن جاوا اسکریپت به یکی از اصلی ترین روش ها تبدیل شده است.

در این مقاله، نحو روش map و طیف وسیعی از کاربردهای آن، از دستکاری داده‌های اولیه تا پارادایم‌های برنامه‌نویسی کاربردی پیشرفته را تحلیل می‌کنیم.

می توانید تمام کد منبع را از اینجا دریافت کنید.

فهرست مطالب

مبانی روش map

نحو map روش

موارد استفاده رایج از map

نتیجه

مبانی روش map

متد Map در جاوا اسکریپت یک تابع مرتبه بالاتر است که بر روی هر عنصر یک آرایه تکرار می شود و به شما امکان می دهد یک تابع مشخص را برای هر عنصر اعمال کنید. این تابع معمولاً به عنوان تابع پاسخ به تماس نامیده می شود.

ویژگی کلیدی روش Map این است که یک آرایه جدید بر اساس نتایج اعمال این تابع فراخوانی برای هر عنصر آرایه اصلی ایجاد می کند، بدون اینکه خود آرایه اصلی را تغییر دهد.

نحو map روش

نحو روش Map ساده است:

 const newArray = array.map(callback(currentValue[, index[, array]]) { // return element for newArray, after executing something }[, thisArg]);

array : آرایه اصلی که می خواهید روی آن تکرار شود.

callback : تابعی که روی هر عنصر آرایه اجرا می شود.

currentValue : عنصر فعلی در حال پردازش در آرایه.

index (اختیاری): شاخص عنصر فعلی در حال پردازش.

array (اختیاری): آرایه ای که map فراخوانی شد.

thisArg (اختیاری): یک شی اختیاری که می تواند در تابع callback به this اشاره کند.

موارد استفاده رایج از map

تبدیل داده ها

سناریو: شما یک آرایه از اعداد دارید و می خواهید هر عدد را در آرایه دو برابر کنید.

بدون نقشه:

 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = []; for (let i = 0; i < numbers.length; i++) { doubledNumbers.push(numbers[i] * 2); } // doubledNumbers: [2, 4, 6, 8, 10]

در روش سنتی، یک آرایه خالی doubledNumbers را مقداردهی اولیه می کنیم، روی هر عنصر در آرایه numbers با استفاده از حلقه for تکرار می کنیم، و به صورت دستی هر عنصر را با ضرب آن در 2 دو برابر می کنیم. در نهایت، مقدار دو برابر شده را به آرایه doubledNumbers فشار می دهیم.

با نقشه:

 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(num => num * 2); // doubledNumbers: [2, 4, 6, 8, 10]

با استفاده از روش map ، یک تابع فراخوانی ارسال می کنیم که هر عنصر ( num ) را در آرایه numbers دو برابر می کند.

روش map روی هر عنصر آرایه تکرار می شود، تابع فراخوانی ارائه شده را اعمال می کند و یک آرایه جدید ( doubledNumbers ) حاوی مقادیر دو برابر شده را برمی گرداند. این رویکرد کد را ساده می کند و خوانایی را بهبود می بخشد.

تبدیل شی

سناریو: شما یک آرایه از اشیاء کاربر دارید و می خواهید فقط شناسه های آنها را در یک آرایه جدید استخراج کنید.

بدون نقشه:

 const users = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Doe' } ]; const userIds = []; for (let i = 0; i < users.length; i++) { userIds.push(users[i].id); } // userIds: [1, 2, 3]

در روش مرسوم، یک آرایه خالی userIds مقداردهی اولیه می‌کنیم، با استفاده از یک حلقه for، روی هر شی کاربر در آرایه users تکرار می‌کنیم و به صورت دستی ویژگی id را از هر شی کاربر استخراج می‌کنیم. سپس مقدار id استخراج شده را به آرایه userIds فشار می دهیم.

با نقشه:

 const users = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Doe' } ]; const userIds = users.map(user => user.id); // userIds: [1, 2, 3]

با استفاده از روش map ، ما یک تابع callback ارائه می کنیم که ویژگی id را از هر شی کاربر ( user ) در آرایه users استخراج می کند.

روش map روی هر عنصر آرایه تکرار می‌شود، تابع فراخوانی را اعمال می‌کند و یک آرایه جدید ( userIds ) که فقط حاوی مقادیر id است را برمی‌گرداند. این رویکرد کد را ساده می کند و قابلیت نگهداری را افزایش می دهد.

دستکاری رشته

سناریو: شما آرایه ای از نام ها دارید و می خواهید همه نام ها را به حروف بزرگ تبدیل کنید.

بدون نقشه:

 const names = ['John', 'Jane', 'Doe']; const uppercasedNames = []; for (let i = 0; i < names.length; i++) { uppercasedNames.push(names[i].toUpperCase()); } // uppercasedNames: ['JOHN', 'JANE', 'DOE']

در رویکرد سنتی، یک آرایه خالی uppercasedNames مقداردهی می کنیم، روی هر عنصر در آرایه names با استفاده از حلقه for تکرار می کنیم، و با استفاده از متد toUpperCase() هر نام را به حروف بزرگ تبدیل می کنیم. در نهایت، نام بزرگ را وارد آرایه uppercasedNames می کنیم.

با نقشه:

 const names = ['John', 'Jane', 'Doe']; const uppercasedNames = names.map(name => name.toUpperCase()); // uppercasedNames: ['JOHN', 'JANE', 'DOE']

با استفاده از متد map ، تابع callback را ارسال می کنیم که هر نام ( name ) در آرایه names را با استفاده از روش toUpperCase() به حروف بزرگ تبدیل می کند.

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

کار با شاخص

سناریو: شما یک آرایه از اعداد دارید و می خواهید هر عدد را با شاخص آن افزایش دهید.

بدون نقشه:

 const numbers = [1, 2, 3, 4, 5]; const incrementedNumbers = []; for (let i = 0; i < numbers.length; i++) { incrementedNumbers.push(numbers[i] + i); } // incrementedNumbers: [1, 3, 5, 7, 9]

در رویکرد سنتی، یک آرایه خالی incrementedNumbers مقداردهی اولیه می‌کنیم، با استفاده از حلقه for روی هر عنصر در آرایه numbers تکرار می‌کنیم، شاخص i به هر عدد اضافه می‌کنیم و مقدار افزایش‌یافته را به آرایه incrementedNumbers فشار می‌دهیم.

با نقشه:

 const numbers = [1, 2, 3, 4, 5]; const incrementedNumbers = numbers.map((num, index) => num + index); // incrementedNumbers: [1, 3, 5, 7, 9]

با استفاده از روش map ، یک تابع فراخوانی را ارسال می کنیم که هم مقدار فعلی ( num ) و هم شاخص ( index ) را به عنوان پارامتر می گیرد. در تابع callback، به هر عدد ایندکس اضافه می کنیم.

متد map روی هر عنصر آرایه تکرار می‌شود، تابع فراخوانی را اعمال می‌کند و یک آرایه جدید ( incrementedNumbers ) حاوی مقادیر افزایش‌یافته را برمی‌گرداند. این رویکرد منطق افزایش هر عدد با شاخص آن را به زیبایی مدیریت می کند.

نتیجه

خواه دستکاری داده، تبدیل شی یا دستکاری رشته باشد، روش Map راه حلی قوی برای طیف وسیعی از وظایف برنامه نویسی ارائه می دهد و آن را به بخشی ضروری از جعبه ابزار توسعه دهندگان جاوا اسکریپت تبدیل می کند.

با مقایسه روش های سنتی با روش Map و تحلیل موارد استفاده مختلف، می توانید درک عمیق تری از قابلیت های آن به دست آورید.

اگر بازخوردی دارید، لطفاً در توییتر یا لینکدین به من پیام دهید

خبرکاو