نحوه استفاده از Maps در JavaScript

مقدمه

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

پیش نیازها

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

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

.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) کد شما را کمی خواناتر می کند.

چگونه یک رشته JS را به یک آرایه تبدیل کنیم

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

همه چیز در جاوا اسکریپت یک شی است و متدها توابعی هستند که به این اشیاء متصل می شوند. Call() به شما امکان می دهد از متن یک شی بر روی شی دیگر استفاده کنید. بنابراین، شما می‌توانید متن .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 از .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);

این یک جزء بدون حالت در React است که یک div را با یک لیست ارائه می کند. آیتم های لیست فردی با استفاده از .map() برای تکرار روی آرایه نام ها ارائه می شوند. این مؤلفه با استفاده از ReactDOM در عنصر DOM با شناسه ریشه ارائه می شود.

نحوه قالب بندی مجدد اشیاء آرایه جاوا اسکریپت

از .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}
]

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