معرفی مهمترین متدهای جاوا اسکریپت + مثال و کد

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

چرا باید از متدها جاوا اسکریپت استفاده کنیم؟

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

مرجع کامل و تخصصی آموزش طراحی سایت + اعطای گواهینامه دوره

کلیک کنید

• زمان توسعه سریع‌تر به دلیل قابلیت استفاده مجدد کدها با رویکرد متد
• خطایابی و نگهداری راحت‌تر کدها در زمان توسعه و بهره‌برداری
• امکان تولید کدهای کارآمدتر به دلیل سازماندهی بهتر کدها با متد

متد در جاوا اسکریپت چیست؟

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

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

پیشنهاد مطالعه: آموزش کوکی در جاوا اسکریپت به زبان ساده

متدهای رشته «String» در جاوا اسکریپت

رشته‌ها از انواع داده‌هایی هستند که بیشترین کاربرد را در برنامه‌نویسی دارند. مخصوصاً برنامه‌نویسی تحت وب که معمولاً با رشته کار می‌کند. به همین دلیل چند متد کاربردی برای این نوع داده‌ای طراحی شده که عبارت‌اند از:

• تابع length()‎: طول یک رشته‌ای که به آن پاس می‌دهیم را برمی‌گرداند.
• تابع indexOf()‎: اندیس قرارگیری یک کاراکتر مشخص را در یک رشته را برمی‌گرداند.
• تابع charAt()‎: کاراکتر اندیس مشخص شده را در یک رشته برمی‌گرداند.
• تابع substring(‎): یک زیر رشته از یک رشته را برمی گرداند.
• تابع toUpperCase()‎: تمام حروف یک رشته را به حروف بزرگ تبدیل می‌کند.
• تابع toLowerCase()‎: تمام حروف یک رشته را به حروف کوچک تبدیل می‌کند.
• تابع trim()‎: فضای خالی بین کاراکترها را حذف می‌کند.

با مثال زیر با نحوه استفاده از متد length()‎ بهتر آشنا می‌شوید. این مثال را می‌توانید الگویی در نظر بگیرید برای کار با دیگر متد‌های رشته در جاوا اسکریپت.

let str = 'Hello World';
let length = str.length;

console.log(length); // 11

در این مثال از متد length()‎ برای شمردن طول رشته Hello World استفاده شده است. نتیجه عدد ۱۱ خواهد بود. توجه داشته باشید که در شمارش طول رشته در جاوا اسکریپت فضا‌ها خالی یا همان فاصله بین کلمات نیز به عنوان یک کاراکتر شمرده می‌شوند.

متد‌های آرایه در javascript

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

به این عدد اندیس می‌گوییم. برای این که بتوانیم مقادیر موجود در یک آرایه را بهتر مدیریت کنیم چند متد نیاز داریم. این متد‌ها به شرح زیر هستند.

آموزش Asynchronous در جاوا اسکریپت

کلیک کنید

• تابع push()‎: یک عنصر جدید به انتهای آرایه اضافه می‌کند.
• تابع pop()‎: آخرین عنصر آرایه را حذف می‌کند.
• تابع shift()‎: اولین عنصر آرایه را حذف می‌کند.
• تابع unshift()‎: یک عنصر به ابتدای آرایه اضافه می‌کند.
• تابع sort()‎: عناصر آرایه را به ترتیب صعودی مرتب می‌کند.
• تابع reverse()‎: ترتیب عناصر یک آرایه را معکوس می‌کند.

حال بیایید متد Push در جاوا اسکریپت برای نمونه استفاده کنیم تا با کارکرد آن بهتر آشنا شویم.

let arr = ['apple', 'banana', 'cherry'];
arr.push('orange');

console.log(arr); // ['apple', 'banana', 'cherry', 'orange']

در مثال بالا توانستیم عنصر orange را با کمک متد Push به انتهای آرایه خود اضافه کنید. یک آرایه با ۳ عضو داشتیم که پس از اجرای کد ۴ عضو خواهد شد. در این کد نیز باید دقت کنید که با هر با اجرای کد همان مقدار در اندیس جدید ایجاد می‌شود. یعنی اگر بخواهیم دوباره این کد را اجرا کنیم این بار ۵ عنصر در آرایه خواهند بود. در واقع تکرار مقدار خاص در چند خانه از آرایه اشکالی ندارد.

پیشنهاد مطالعه: آموزش Hoisting در جاوا اسکریپت به زبان ساده

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

آبجکت‌های در جاوا اسکریپت نوعی داده کلید/مقداری هستند. چیزی شبیه به آرایه. با این تفاوت که آدرس هر خانه از آن را با یک نام مشخص می‌کنیم. شیوه ساخت این نوع شی در جاوا اسکریپت شباهت زیادی با کتابخانه دارد. آبجکت‌ها ترتیب خاصی ندارند. مدیریت این نوع داده کمی ساده‌تر است. متد‌های زیر ابزارهای مدیریت Object در جاوا اسکریپت هستند.

• تابع hasOwnProperty()‎: یک مقدار بولی را برمی‌گرداند که نشان می‌دهد آیا Object مورد نظر دارای ویژگی مشخص شده است یا خیر.
• تابع keys()‎: آرایه‌ای از کلیدهای Object را برمی‌گرداند.
• تابع values()‎: آرایه‌ای از مقادیر Object را برمی‌گرداند.
• تابع entries()‎: آرایه‌ای از کلیدها و مقدارهای Object برمی‌گرداند.

کد زیر مثالی ساده از نحوه استفاده متد hasOwnProperty()‎ در جاوا اسکریپت است.

let obj = {
  name: 'John',
  age: 30
};

let hasName = obj.hasOwnProperty('name');

console.log(hasName); // true

در این مثال قصد داریم بفهمیم که آیا کلیدی با شناسه «Name» در آبجکت وجود دارد یا خیر. می‌بینید که این کلید در آبجکت ما موجود است؛ بنابراین طبق تعریف مقدار «True» به نشانه تأیید آن برگردانده می‌شود.

متد‌ some در جاوا اسکریپت

فرض کنید آرایه‌ای به شکل زیر داریم که می‌خواهیم بدانیم مقدار ویژگی pilot در کدام قسمت برابر True است.

var operatives = [
 	{ id: 12, name: 'Baze Malbus', pilot: false },
{ id: 44, name: 'Bodhi Rook', pilot: true },
 	{ id: 59, name: 'Chirrut Îmwe', pilot: false },
 	{ id: 122, name: 'Jyn Erso', pilot: false } ];
]

در حالت عادی و بدون استفاده از متد some باید کد زیر را بنویسیم.

var listHasPilots = false;

operatives.forEach(function (operative) {

if (operative.pilot) {

listHasPilots = true;

}

});

اما به یمن وجود متد Some کد ما به شکل زیر ساده و خلاصه می‌شود.

var listHasPilots = operatives.some(function (operative) {

return operative.pilot;

});

همچنین در ES6 کد ما به شکلی که در ادامه می‌بینید تنها در یک سطر خلاصه خواهد شد.

const listHasPilots = operatives.some(operative => operative.pilot);

این متد مقدار اولین pilot را که برابر True بود را برمی‌گرداند.

متد find در javascript

این متد مانند متد Some برای جستجو در آرایه استفاده می‌شود. با این تفاوت که در مثال قبلی مقداری که درون pilot را دریافت کردیم. حال مقدار را به تابع find می‌دهیم و این بار انتظار داریم نام خود ویژگی یعنی «pilot» را به عنوان نتیجه جستجوی خود برگرداند.

همان آرایه قبلی را در نظر بگیرید. متد Find برای این آرایه به شکل زیر نوشته می‌شود.

var firstPilot = operatives.find(function (operative) {

return operative.pilot;

});

در ES6 نیز کد زیر را داریم:

const firstPilot = operatives.find(operative => operative.pilot);

این متد اولین مقدار مطابق با شرط را برمی‌گرداند. اگر می‌خواهید تمام مقادیر را داشته باشید می‌توانید از متد Filterاستفاده کنید. متد Filter آرایه‌ای از مقادیر که با شرط اعمال شده همخوانی دارند را به شما می‌دهد.

متد Map در javascript

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

const myArray = [2, 4, 7, 10];

const resultArray = myArray.map(x => x * 2);

console.log(resultArray); // [4, 8, 14, 20]

متد Reduce در جاوا اسکریپت

متد Reduce در جاوا اسکریپت برای جمع کردن یا به عبارتی تبدیل عناصر یک آرایه به یک عنصر واحد استفاده می‌شود. مهم نیست مقدار عناصر و نوع داده‌ای آن‌ها چه باشد. طبق خواص ذاتی مقادیر با آن‌ها برخورد می‌کند.

فرض کنید یک آرایه با مقادیر عددی داریم که می‌خواهیم این مقادیر را جمع کرده و به عنوان یک عنصر واحد برگردانیم. کد ما بدون متد Reduce به شکل زیر خواهد بود.

let numbers = [1, 2, 3];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum);

متد Reduce کد ما را به شکل زیر تغییر می‌دهد.

let numbers = [1, 2, 3];

let sum = numbers.reduce(function (previousValue, currentValue) {

return previousValue + currentValue;

});

console.log(sum);

متد findindex در جاوا اسکریپت

با متد findindex مقداری را داخل آرایه جستجو کرده و اندیس اولین مقدار مطابق را دریافت می‌کنیم. کد زیر یک مثال ساده برای این متد است.

var MyName = ["Reza","Sadegh","Mahnaz"];

var result = document.getElementById("Result");

result.innerHTML = MyName.findIndex(MyFilter);

function MyFilter(names){

return names == "Reza";

}

دام در جاوا اسکریپت

جاوا اسکریپت برای این که پویایی را در فایل HTML برقرار کند باید به محتوای این سند دسترسی داشته باشد. DOM مخفف کلمات  Document Object Model و به معنای مدل شیءگرایی سند است. در واقع تمام متد‌ها برای این بتوانند درست عمل کنند با این مدل در ارتباط هستند.

پیشنهاد مطالعه: Event در جاوا اسکریپت – راهنمای جامع

سخن پایانی

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

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

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

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

کلیک کنید