چهار موقعیت استفاده از Array.map() در JavaScript که باید بدانید

از متد کلاسیک forloop‌ گرفته تا forEach()، تکنیک‌ها و متدهای مختلف برای تکرار (iterate) کردن در طی دیتاست‌ها در JavaScript، فراوان هستند. گرچه، یکی از متدهای معروف‌تر، متد .map() است.

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

در این پست، ما به ۴ موقعیت استفاده با ارزش از .map() در JavaScript نگاه خواهیم داشت. بیایید شروع کنیم!

1. فراخوانی یک تابع بر روی هر آیتم در یک آرایه
2. تبدیل یک رشته به یک آرایه
3. رندر کردن لیست‌ها در کتابخانه‌های JavaScript
4. قالب‌بندی مجدد آبجکت‌های آرایه

فراخوانی یک تابع بر روی هر آیتم در یک آرایه

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

const sweetArray = [2, 3, 4, 5, 35]

const sweeterArray = sweetArray.map(sweetItem => {

    return sweetItem * 2

})

console.log(sweeterArray) // [4, 6, 8, 10, 70]

این کد حتی می‌تواند به این صورت بیشتر ساده‌سازی شود تا واضح‌تر باشد:

// ساخت یک تابع برای استفاده کردن

const makeSweeter = sweetItem => sweetItem * 2;

// ما یک آرایه داریم

const sweetArray = [2, 3, 4, 5, 35];

// فراخوانی تابعی که ساختیم. خواناتر است.

const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray); // [4, 6, 8, 10, 70]

داشتن کدی مانند sweetArray.map(makeSweeter)، این کد را وقتی که به طور ناگهانی به آن وارد می‌شوید، کمی خواناتر می‌کند.

تبدیل یک رشته به یک آرایه

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

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

.call() می‌تواند آرگومان‌های منتقل شده تابع اصلی، زمینه تابع اصلی که قرار است استفاده شود، و پارامترهایی برای آرگومان‌های تابع اصلی باشد. پیچیده به نظر می‌رسد؟ در اینجا یک مثال را مشاهده می‌نمایید:

const name = "Chuloo"

const map = Array.prototype.map

const newName = map.call(name, eachLetter => {

    return `${eachLetter}a`

})

console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]

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

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

رندر کردن لیست‌ها در کتابخانه‌های JavaScript

کتابخانه‌های JavaScript به مانند React، .map‌ را به کار می‌گیرند تا آیتم‌های داخل یک لیست را رندر کنند. این کار به سینتکس JSX‌ نیاز دارد، اما متد .map() در یک سینتکس JSX جمع‌بندی شده است. در اینجا یک مثال خوب از یک کامپوننت React را مشاهده می‌نمایید:

import React from "react";

import ReactDOM from "react-dom";

const names = ["john", "sean", "mike", "jean", "chris"];

const NamesList = () => (

  <div>

    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>

  </div>

);

const rootElement = document.getElementById("root");

ReactDOM.render(<NamesList />, rootElement);

آیا با React آشنا نیستید؟ این کامپوننت، یک کامپوننت بدون state ساده در React است که یک div به همراه یک لیست را رندر می‌کند. آیتم‌های لیست جداگانه، با استفاده از .map() رندر می‌شوند تا در طی آرایه نام‌ها که در ابتدا ساخته شد، تکرار (Iterate) کند. این کامپوننت با استفاده از ReactDOM بر روی عنصر DOM با آیدی root رندر می‌شود.

قالب‌بندی مجدد آبجکت‌های آرایه

مدیریت آبجکت‌ها در یک آرایه چه؟ .map() می‌تواند برای تکرار (iterate) بر روی آبجکت‌های داخل یک آرایه به روشی مشابه آرایه‌های قدیمی (این که محتویات هر آبجکت جداگانه را تغییر دهید) استفاده شود و یک آرایه جدید را برگرداند. در اینجا یک مثال را مشاهده می‌نمایید:

const myUsers = [

    { name: 'chuloo', likes: 'grilled chicken' },

    { name: 'chris', likes: 'cold beer' },

    { name: 'sam', likes: 'fish biscuits' }

]

const usersByFood = myUsers.map(item => {

    const container = {};

    container[item.name] = item.likes;

    container.age = item.name.length * 10;

    return container;

})

console.log(usersByFood);

// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]

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

نتیجه گیری

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

منبع