متد map روی آرایه ها (ES6 Array map())

در این صفحه با متد map روی آرایه ها آشنا می شوی. متد (Method) یعنی تابعی که روی یک شیء صدا می زنیم؛ این جا روی آرایه.

متد map روی آرایه ها در جاوااسکریپت

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

مثل این است که لیست نمره های کلاس را بگیری و برای هر نمره، نمره تشویقی جدید حساب کنی و در لیست تازه ذخیره کنی.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((x) => {
  return x * 2;
});

مشاهده در ادیتور

در این مثال، numbers آرایه اصلی است. متغیر doubled آرایه جدید است که هر عدد در آن دو برابر شده.

استفاده از map در ری اکت برای نمایش لیست

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

const fruitlist = ['apple', 'banana', 'cherry'];

function MyList() {
  return (
    <ul>
      {fruitlist.map((fruit) => {
        return (
          <li key={fruit}>
            {fruit}
          </li>
        );
      })}
    </ul>
  );
}

مشاهده در ادیتور

نکته: در ری اکت هر li باید prop کلید (key) یکتا داشته باشد. این کار به ری اکت کمک می کند آیتم ها را سریع تر دنبال کند.

متد map با آرایه ای از آبجکت ها

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

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

function UserList() {
  return (
    <ul>
      {users.map((user) => {
        return (
          <li key={user.id}>
            {user.name} is {user.age} years old
          </li>
        );
      })}
    </ul>
  );
}

مشاهده در ادیتور

اینجا هر user یک آبجکت است. با user.name و user.age به فیلدها دسترسی داریم. برای key از user.id استفاده شده که یکتا است.

ورودی های متد map()

تابعی که به map می دهی، می تواند سه ورودی بگیرد. معمولا فقط اولی استفاده می شود؛ اما دانستن بقیه هم مفید است.

• currentValue: مقدار فعلی آرایه که روی آن کار می کنی.
• index: شماره خانه همان مقدار در آرایه.
• array: خود آرایه ای که روی آن map صدا شده.

const fruitlist = ['apple', 'banana', 'cherry'];

function App() {
  return (
    <ul>
      {fruitlist.map((fruit, index, array) => {
        return (
          <li key={fruit}>
            Number: {fruit}, Index: {index}, Array: {array}
          </li>
        );
      })}
    </ul>
  );
}

مشاهده در ادیتور

نکته: متد map همیشه یک آرایه جدید برمی گرداند. آرایه اصلی را تغییر نمی دهد؛ مثل این است که از روی برگه اصلی، یک برگه تمیز رونویسی کنی.

تمرین گام به گام با متد map روی آرایه ها

برای این که متد map روی آرایه ها بهتر توی ذهنت بنشیند، این تمرین کوتاه را انجام بده.

1. یک آرایه از نمره های خودت بساز و آن را در متغیر scores ذخیره کن.
2. با متد map، آرایه ای بساز که هر نمره در آن یک نمره اضافه تشویقی گرفته باشد.
3. یک کامپوننت ساده ری اکت بنویس که این نمره ها را در li نمایش دهد.
4. دفعه بعد، همین تمرین را با آرایه ای از آبجکت ها مثل users انجام بده.

اگر بخش های قبلی ES6 را لازم داشتی، صفحه متغیرها در ES6 (ES6 Variables) و صفحه توابع پیکانی ES6 (ES6 Arrow Functions) می توانند کمک خوبی باشند.

جمع بندی سریع

• متد map روی هر عضو آرایه یک تابع اجرا می کند.
• متد map همیشه یک آرایه جدید می سازد و قبلی را دست نمی زند.
• در ری اکت از متد map برای ساخت لیست JSX استفاده می کنیم.
• هر آیتم لیست در ری اکت باید prop کلید یکتا داشته باشد.
• تابع map می تواند currentValue، index و array را به عنوان ورودی بگیرد.