سرور مجازی NVMe

راهنمای نقشه جاوا اسکریپت() Methodتکرار از طریق دنباله ها می تواند برای دسترسی و نمایش عناصر دنباله استفاده شود – اما اغلب برای اجرای یک عملیات انجام می شود. روی هر یک یا برخی از عناصر توجه: اعمال یک تابع برای هر عنصر یک دنباله و برگرداندن نتیجه تبدیل شده به یک …

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۲۱, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 6 دقیقه

معرفی

تکرار از طریق دنباله ها می تواند برای دسترسی و نمایش عناصر دنباله استفاده شود – اما اغلب برای اجرای یک عملیات انجام می شود. روی هر یک یا برخی از عناصر

توجه داشته باشید: اعمال یک تابع برای هر عنصر از یک دنباله، و برگرداندن نتیجه تبدیل شده به یک دنباله جدید به عنوان شناخته شده است. نقشه برداری، جایی که هر عنصر از دنباله اصلی، Ex، به یک عنصر بالقوه تبدیل شده از دنباله جدید نگاشت، Exi.

مانند بسیاری از زبان ها، جاوا اسکریپت پیاده سازی کارآمدی دارد عملیات نقشه، و در آن تعبیه شده است Array کلاس

در این راهنما، روش کار با جاوا اسکریپت را یاد خواهید گرفت map() روش و روش کار آن، روی نمونه کدهای عملی

جاوا اسکریپت نقشه () روش

بیایید از طریق for-loop نحو و ببینید که چگونه می توانیم روش های خاصی را برای هر عنصر اعمال کنیم. فرض کنید مجموعه‌ای از امتیازات داریم و می‌خواهیم به هر کدام 5 امتیاز اضافه کنیم تا به افزایش امتیاز کمک کنیم:

const mathScores = (39, 50, 45, 41, 50); 
let newScores = ();
  
for (let i = 0; i < mathScores.length; i++) {
    newScores.push(mathScores(i) + 5);
}

console.log(newScores); // (44,55,50,46,55)

در کد بالا، ما از طریق حلقه حلقه زدیم mathScores آرایه، با اضافه کردن 5 به هر عضو، و سپس نمرات جدید را به newScores آرایه.

این یک روش کاملاً استاندارد است و کاملاً شبیه به آنچه است map() میکند!

را Array.map() متد در سراسر یک آرایه تکرار می شود و یک تابع callback اعمال می کند روی هر عنصر، عناصر حاصل را در یک آرایه جدید برمی گرداند.

نحو

نحو روش نسبتاً ساده است:

const newArray = oldArray.map((currentValue, index, array)=>{
    // Do stuff with currentValue
})

را index و array اختیاری هستند و می توان از آنها برای دسترسی به فهرست مطالب از currentValue و خود آرایه اصلی.

newArray – آرایه جدیدی که پس از برگردانده می شود map() تابع اعمال شده است.
oldArray – map() تابع عمل می کند روی آرایه اصلی، و آن را تغییر نمی دهد.
currentValue – ارزشی که map() تابع در مرحله پردازش است X، جایی که تابع تعریف می کند که در مرحله چه اتفاقی می افتد X.
index – شاخص ارزش فعلی.
array – یک پارامتر اختیاری که به آرایه اصلی اشاره می کند.

برای یک تجربه بصری بصری – می توانید این مقادیر را ثبت کنید و فقط مقدار اصلی را بدون هیچ تغییری برگردانید:

const mathScores = (39, 50, 45, 41, 50);
  
mathScores.map((currentValue, index, array) => {
    console.log('Current value:' + currentValue);
    console.log('Index:' + index);
    console.log('Array:' + array);
    return currentValue;
})

"Current value:39"
"Index:0"
"Array:39,50,45,41,50"
...
"Current value:50"
"Index:4"
"Array:39,50,45,41,50"

چگونه نقشه () کار؟

را map() عملکرد، برای تمام اهداف عملی، برای کار کردن به عناصر نیاز دارد روی – اما اگر آرایه ای که با آن تماس می گیرید map() روی خالی است، فقط یک آرایه خالی را برمی گرداند. می توان از آن با توابع پیکان یا توابع معمولی استفاده کرد:

قبل از ES6، معمولاً یک callback را به صورت زیر تعریف می‌کردید:

const codes = (101, 201, 301, 303, 202);
let mathCodes = codes.map(function(code) {
    return `mth${code}`;
});
  
console.log(mathCodes); //("mth101","mth201","mth301","mth303","mth202")

با این حال، با ES6، می توانید از یک تابع پیکان برای پاک کردن کد استفاده کنید:

const codes = (101, 201, 301, 303, 202); 
let mathCodes = codes.map((code)=>{
    return `mth${code}`;
});
  
console.log(mathCodes); //("mth101","mth201","mth301","mth303","mth202")

نمونه های map()

بیایید نگاهی به چند نمونه از آن بیاندازیم map() تابع! به عنوان مثال، بیایید مربع را محاسبه کنیم root از هر شماره در لیست:

const numbers = (9, 36, 64, 144);
  
let squareRoots = numbers.map((number) => {
    return Math.sqrt(number);
});
  
console.log(squareRoots); // (3,6,8,12)

یا می‌توانیم هر عنصر را به طول آن نگاشت کنیم:

const names = ("Bilbo", "Gandalf", "Nazgul");
let lengths = names.map((name) => name.length);
console.log(lengths); // (5,7,6)

یا می توانیم هر کدام را نقشه برداری کنیم اعتراض دانشجو به نام و نام خانوادگی آنها:

const students = (
    {firstName : "John", lastName: "Doe"},
    {firstName : "Stephen", lastName: "Matt"},
    {firstName : "Abigail", lastName: "Susu"}
);
  
let studentsNames = students.map(student => {
      return `${student.firstName} ${student.lastName}`;
})
  
console.log(studentsNames); // ("John Doe","Stephen Matt","Abigail Susu")

یکی از موارد استفاده واقعا متداول برای map() تابع روی قسمت جلویی قرار دادن داده ها در HTML است:

let cont = document.getElementById('#container');
  
let users = (
    { firstName : "John", lastName: "Doe", age: 17 },
    { firstName : "Stephen", lastName: "Matt", age: 16 },
    { firstName : "Abigail", lastName: "Susu", age: 15 }
);
  
let singleUser = users.map((user)=>{
    // Let's add the firstname and lastname together
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      <h3 class='name'>${fullName}</h3>
      <p class="age">${user.age}</p>
    `
});
  
container.innerHTML = singleUser;

نقشه () در مقابل سایر روش های تکرار کننده؟

map() نمونه ای از یک روش تکرار کننده در جاوا اسکریپت است و بسیار مفید است که بفهمید چه زمانی می خواهید از کدام روش تکرار کننده استفاده کنید. متدهای Iterator شما را قادر می‌سازد تا روی تمام اشیاء در یک آرایه حلقه بزنید تا عملیات خاصی را انجام دهید.

پیشنهاد می‌کنیم بخوانید: استفاده از __slots__ برای ذخیره داده های شی در پایتون

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

در اینجا برخی از روش های تکرار کننده اضافی موجود در جاوا اسکریپت آمده است:

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

تا حدی – این سوال پیش می آید:

چه فرقی با هم دارند map() و forEach()?

map() در مقابل forEach()

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

تمایز اصلی بین این دو روش این است که map() تابع برمی گردد یک آرایه جدید، در حالی که forEach() روش نمی کند – آن را آرایه اصلی را تغییر می دهد.

علاوه بر این، در هر تکرار از map() عملکرد، شما return یک عنصر تبدیل شده با forEach()، آنها را بر نمی گردانید، اما می توانید توابع را اجرا کنید روی که عناصر را در جای خود تغییر می دهند. اگرچه، شما حتی نیازی به اجرای یک تابع ندارید روی عنصر!

پیشنهاد می‌کنیم بخوانید: برنامه های تک صفحه ای با Vue.js و Flask: مدیریت ایالت با Vuex. از اینکه برای پست سوم به من پیوستید متشکریم روی استفاده از Vue.js و Flask برای توسعه وب تمام پشته. موضوع اصلی در این پست خواهد بود روی با استفاده از Vuex برای مدیریت وضعیت در برنامه ما. برای معرفی Vuex، روش بازسازی کامپوننت های Home و Survey را از...

این باعث می شود forEach() ترجیحاً وقتی صحبت از ثبت مقادیر به میان می‌آید، بدون تغییر آنها:

const characters = ('z', 'y', 'x', 'w');
  
characters.forEach(character => {
    console.log(character);
});

در حالی که اگر هدفتان باشد تغییر دادن عناصر، map() ترجیح داده می شود.

استفاده کردن نقشه () با سایر روش های آرایه

را map() روش از برنامه نویسی عملکردی ناشی می شود – و با برنامه ریزی کاربردی، روش های زنجیره ای مانند تنفس طبیعی است. زنجیره عملیات عملکردی بسیار رایج است و می تواند خطوط لوله عملیاتی بسیار پیچیده ای را فراهم کند!

بیایید نگاهی بیندازیم که چگونه می توانید زنجیر کنید map() با برخی از روش های کاربردی دیگر Array کلاس

استفاده کردن نقشه () با فیلتر()

فیلتر کردن معمولاً اولین عملیات در خط لوله است، زیرا اجرای عملیات ناکارآمد است روی عناصری که ممکن است در نتیجه گنجانده نشوند، مگر اینکه معیارهایی که بر اساس آن فیلتر می کنید بستگی داشته باشد روی برخی عملیات دیگر در خط لوله

توالی متداول مراحل این است که filter() یک آرایه مبتنی بر روی یک معیار خاص، و سپس map() عناصر باقی مانده

بیایید یک آرایه از دانش آموزان برای فیلتر کردن و نقشه برداری ایجاد کنیم:

const mathStudents = (
    {
      name: 'Jane',
      score: 60,
      enrollmentYear: 2019
    },
    {
      name: 'Emmy',
      score: 40,
      enrollmentYear: 2020
    },
    {
      name: 'John',
      score: 43,
      enrollmentYear: 2019
    },
    {
      name: 'Linda',
      score: 20,
      enrollmentYear: 2019
    }
)

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

برای قالبی قابل خواندن برای انسان، نمرات را به نمره “گذر”/”عدم قبولی” ترسیم می کنیم:

const passingStudents = mathStudents
    .filter((student) => student.enrollmentYear < 2020)
    .map((student) => {
      if (student.score > 40) {
        return student.name + ': passing'
      } else return student.name + ': not passing'
    });

console.log(passingStudents); // ("Jane: passing","John: passing","Linda: not passing")

استفاده کردن نقشه () با معکوس()

ممکن است مواقعی پیش آید که لازم باشد یک آرایه را قبل یا بعد از اجرای سایر عملیات معکوس کنید. این را می توان به راحتی با استفاده از reverse() تابع:

const numbers = (21, 32, 43, 54, 65);
const newNumbers = numbers.map((number) => number * 2).reverse();
  
console.log(numbers); // (21,32,43,54,65)
console.log(newNumbers); // (130,108,86,64,42)

ما درج کرده ایم reverse() عملکرد در انتهای حلقه به گونه ای است که آرایه حاصل را معکوس می کند. اگر بخواهیم قرار دهیم reverse() تماس قبل از map() تماس بگیرید – ما در واقع آن را معکوس می کنیم اصلی آرایه، و نقشه عناصر آن، به جای معکوس کردن آرایه جدید حاصل:

const numbers = (21, 32, 43, 54, 65);
const newNumbers = numbers.reverse().map((number) => number * 2);
  
console.log(numbers); // (65,54,43,32,21)
console.log(newNumbers); // (130,108,86,64,42)

استفاده کردن نقشه () روی یک شی

را map() تابع نیز ممکن است استفاده شود روی اشیاء پس از به دست آوردن مقادیر، کلیدها یا جفت کلید-مقدار با استفاده از روش‌های استاتیک Object (Object.keys()، Object.values()، و Object.entries()). از آنجا که هر یک از این روش‌های استاتیک شی یک آرایه تولید می‌کند، map() ممکن است به سادگی به هر یک زنجیر شود:

const scores = { math: 50, English: 70, Physics: 45, Agric: 60 };  
let newScores = Object.values(scores).map((score) => score + 5);
  
console.log(newScores); // (55,75,50,65)

نتیجه

در این راهنما، نگاهی به آن انداخته ایم map() روش در جاوا اسکریپت

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

علاوه بر این – ما را با هم مقایسه کردیم map() روش با forEach() روش، و کشف کرد که چگونه می توانیم زنجیره ای را به هم بزنیم map() با filter()، reverse() و اشیاء

منتشر شده در 1403-01-11 13:44:03

امتیاز شما به این مطلب