چطور از متد ‎.map()‎ در جاوا اسکریپت استفاده کنیم؟

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

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

در ادامه خواهید خواند:

• پیش نیاز
• اجرای تابع روی هر عضو آرایه در جاوا اسکریپت
• چگونه یک رشته در جاوا اسکریپت را به آرایه تبدیل کنیم؟
• چگونه لیست‌ها را در کتابخانه‌های جاوا اسکریپت رندر کنیم؟
• بازسازی آبجکت‌های آرایه در جاوا اسکریپت
• جمع بندی

پیش نیاز

برای دنبال کردن این آموزش نیازی به تجربه کدنویسی نیست. با این حال، اگر می‌خواهید مثال‌ها را خودتان امتحان کنید، می‌توانید از محیط Node.js REPL یا ابزارهای توسعه‌دهنده مرورگر استفاده کنید.

• Node.js را به‌صورت محلی نصب کنید.
• همچنین برای استفاده از Chrome DevTools کافی است آخرین نسخه مرورگر Google Chrome را دانلود و نصب کنید.

اجرای تابع روی هر عضو آرایه در جاوا اسکریپت

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

مثالی از این کاربرد:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

خروجی در کنسول نمایش داده می‌شود:

Output
[ 4, 6, 8, 10, 70 ]

می‌توان این کد را ساده‌تر و خواناتر هم نوشت:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

خروجی همچنان همان خواهد بود:

Output
[ 4, 6, 8, 10, 70 ]

استفاده از ساختار sweetArray.map(makeSweeter) باعث می‌شود کد شما خواناتر و قابل فهم‌تر باشد و به راحتی بتوان عملکرد هر بخش از کد را دنبال کرد.

12 پروژه متن‌ باز فول‌ استک جاوا اسکریپت که نباید از دست بدهید!
پروژه متن‌ باز فول‌ استک

چگونه یک رشته در جاوا اسکریپت را به آرایه تبدیل کنیم؟

متد .map() معمولا متعلق به آرایه‌ها است. در این بخش، از آن برای تبدیل یک رشته به آرایه استفاده می‌کنیم. هدف ما این نیست که متد .map() را برای رشته‌ها توسعه دهیم، بلکه با استفاده از متد ویژه .call() این کار را انجام می‌دهیم.

در جاوا اسکریپت همه چیز یک شی (object) است و متدها توابعی هستند که به این اشیا متصل‌اند. متد .call() به شما اجازه می‌دهد تا زمینه (context) یک شی را روی شی دیگری اعمال کنید. به این ترتیب، زمینه .map() که برای آرایه تعریف شده است را روی یک رشته اعمال می‌کنید.

متد .call() می‌تواند هم آرگومان مربوط به زمینه و هم پارامترهای تابع اصلی را دریافت کند.

مثالی از این کاربرد:

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

خروجی در کنسول نمایش داده می‌شود:

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

در اینجا، شما زمینه .map() را روی رشته اعمال کردید و آرگومانی به آن دادید که تابع .map() انتظار دارد.

این روش مشابه متد .split() برای رشته‌ها عمل می‌کند، با این تفاوت که هر کاراکتر رشته می‌تواند قبل از بازگشت به آرایه تغییر داده یا پردازش شود.

با هاست React لیارا، اپلیکیشن‌های React خودت رو با سرعت و کیفیت میزبانی کن.
✅ نصب فوری✅ منابع اختصاصی✅ دسترسی کامل SSH
خرید و راه‌اندازی هاست React

چگونه لیست‌ها را در کتابخانه‌های جاوا اسکریپت رندر کنیم؟

کتابخانه‌های جاوا اسکریپت مانند React از متد .map() برای رندر کردن آیتم‌ها در یک لیست استفاده می‌کنند. با این حال، این کار نیازمند استفاده از JSX است، زیرا متد .map() داخل سینتکس JSX قرار می‌گیرد.

مثالی از یک کامپوننت React:

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

این کامپوننت بدون state در React است که یک <div> حاوی لیست را رندر می‌کند. آیتم‌های جداگانه لیست با استفاده از متد .map() روی آرایه names تولید می‌شوند. این کامپوننت با استفاده از ReactDOM روی عنصر DOM با شناسه root رندر می‌شود.

۱۰ ترفند جاوا اسکریپت که فقط توسعه‌دهندگان حرفه‌ای از آن‌ها خبر دارند!
۱۰ ترفند جاوا اسکریپت 

بازسازی آبجکت‌های آرایه در جاوا اسکریپت

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

مثالی از این کاربرد:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

خروجی در کنسول نمایش داده می‌شود:

Output
[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

در اینجا، هر آبجکت در آرایه با استفاده از نشانه‌گذری با براکت و نقطه تغییر داده شده است. این روش می‌تواند برای پردازش یا خلاصه‌سازی داده‌های دریافتی قبل از ذخیره یا پردازش در سمت فرانت‌اند کاربرد داشته باشد.

با هاست Node.js لیارا، اپلیکیشن‌های Node خودت رو روی بستر سریع، پایدار و امن اجرا کن.
✅ نصب فوری✅ منابع اختصاصی✅ دسترسی کامل SSH
خرید و راه‌اندازی هاست Node.js

جمع بندی

متد .map() ابزاری قدرتمند در جاوا اسکریپت است که به شما امکان می‌دهد روی هر عضو آرایه عملیات دلخواه انجام دهید و یک آرایه جدید بسازید، بدون آنکه آرایه اصلی تغییر کند.

چه برای پردازش اعضای آرایه، تبدیل رشته‌ها به آرایه، رندر کردن لیست‌ها یا بازفرمت‌دهی آبجکت‌ها، .map() کدی خواناتر و قابل نگهداری‌تر ارائه می‌دهد و یادگیری کاربردهای آن، مدیریت داده‌ها در پروژه‌های مدرن را ساده‌تر می‌کند.