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

نوشته شده توسط: تیم فنی نیک آموز

تاریخ انتشار: ۱۰ مرداد ۱۴۰۳

آخرین بروزرسانی: 23 دی 1403

زمان مطالعه: 11 دقیقه

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

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

به زبان ساده، متدهای جاوا اسکریپت کمک می‌کنند تا در Object ها یا Array ها دست‌درازی کنیم و عملیات خاصی را در زمانی کوتاه روی آن‌ها انجام دهیم. برای رسیدن به دید بهتر درمورد این ویژگی‌ در JavaScript، می‌توانید کاربرد توابع را بررسی کنید که شاید این توابع توسط خود کاربر نوشته شده باشند.

یک تابع یک یا چند ورودی دارد تا براساس آن، عملیات خاصی را انجام داده و خروجی موردنظر را تحویل دهد.

متدهای جاوا اسکریپت یک تفاوت اساسی در مقایسه با توابع دارند و آن هم ذاتی‌بودن این ویژگی‌ها در این زبان است و کاربرد آن‌ها در اشیا، آرایه‌ها و رشته‌ها است.

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

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

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

با متد length به‌راحتی می‌توان طول یک آرایه را در زبان جاوا اسکریپت به‌دست آورد.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد length</h2>
    <p dir="rtl">ویژگی length طول یک رشته را در جاوا اسکریپت بر می‌گرداند.</p>
    <p id="demo"></p>
    <script>
        const numbers = ["One", "Two", "Three", "Four"];
        let size = numbers.length;
        document.getElementById("demo").innerHTML = size;
    </script>
</body>
</html>

شاید هم در شرایط مختلف، نیاز به حذف آخرین عنصر یک آرایه باشد که در سریع‌ترین زمان ممکن، با متد ()pop در این زبان می‌توان به این مهم دست پیدا کرد.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد pop</h2>
    <p dir="rtl">متد pop آخرین عضو از آرایه را حذف می‌کند.</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        const numbers = ["One", "Two", "Three", "Four"];
        document.getElementById("demo1").innerHTML = numbers;
        numbers.pop();
        document.getElementById("demo2").innerHTML = numbers;
    </script>
</body>
</html>

اهمیت استفاده از متدها در جاوا اسکریپت

بیشتر عملیاتی را که متدهای جاوا اسکریپت انجام می‌دهند، می‌توان با توابع پیاده‌سازی کرد؛ اما امروزه نوشتن توابع روتین، اصلاً از نظر زمانی و هزینه‌ها به‌صرفه نیست و بهترین کار برای انجام عملیات روتین روی آرایه‌ها، رشته‌ها و اشیا، استفاده از متدهای ازپیش‌نوشته‌شده است.

اهمیت استفاده از این ویژگی زبان JS ، فراهم‌کردن مزایای منحصربه‌فرد زیر برای توسعه‌دهندگان و متخصصان است:

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

انواع متدهای جاوا اسکریپت

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

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

متدهای رشته در این زبان، بیش از ۲۰ مورد است که در این بخش، درمورد مهم‌ترین آن‌ها، اطلاعات کاملی را به‌دست خواهیم آورد.

ویژگی length

ویژگی length برای رشته‌ها کمک خواهد کرد تا به‌راحتی، طول رشته را به‌دست آوریم. روش استفاده از آن نیز به‌صورت زیر است:

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">رشته‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">ویژگی length</h2>
    <p dir="rtl">طول رشته برابر است با:</p>
    <p id="demo"></p>
    <script>
        let str = "ABCD123456";
        document.getElementById("demo").innerHTML = str.length;
    </script>
</body>
</html>

ویژگی at

در صورتی که نیاز به برگرداندن یک حرف خاص در رشته باشد، می‌توان از ویژگی at به‌صورت زیر استفاده کرد. ایندکس‌ها در زبان JavaScript از ۰ شروع می‌شوند؛ بنابراین، برای برگرداندن حرف سوم نیاز است تا از at با عدد ۲ استفاده کنیم.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">رشته‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">ویژگی at</h2>
    <p dir="rtl">متد at برای برگرداندن المان هر ایندکس به کار می‌رود.</p>
    <p id="demo"></p>
    <script>
        const str = "ABCDEFG";
        let letter = str.at(5);
        document.getElementById("demo").innerHTML = letter;
    </script>
</body>
</html>

ویژگی slice

درصورتی‌که قصد استخراج بخش مشخصی از یک رشته را دارید، متد slice ، یکی از بهترین گزینه‌ها برای این کار است.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">رشته‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد slice</h2>
    <p dir="rtl">متد slice برای استخراج بخش خاصی از رشته به کار می‌رود.</p>
    <p id="demo"></p>
    <script>
        let text = "ABC, DEF, GHK";
        let part = text.slice(5, 8);
        document.getElementById("demo").innerHTML = part;
    </script>
</body>
</html>

ویژگی toUpperCase

متد toUpperCase یکی از متدهای جاوا اسکریپت است که کمک خواهد کرد کاراکترها را به حرف بزرگ تبدیل کنید. برای درک بهتر، می‌توانید مثال زیر را تمرین کنید. همچنین می‌توانید از متد toLowerCase برای تبدیل تمامی کاراکترها به حروف کوچک استفاده کنید.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">رشته‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد toUpperCase</h2>
    <p dir="rtl">متد toUpperCase برای تبدیل کاراکترها به حروف بزرگ:</p>
    <button onclick="convertFunction()">تبدیل</button>
    <p id="demo">ABCdefg!</p>
    <script>
        function convertFunction()
            {
            let text = document.getElementById("demo").innerHTML;
            document.getElementById("demo").innerHTML =
            text.toUpperCase();
            }
    </script>
</body>
</html>

ویژگی concat

متد concat یکی از محبوب‌ترین متدهای جاوا اسکریپت برای رشته‌ها است که با استفاده از آن، می‌توانید دو رشته را به‌هم متصل کنید. روش کار برای استفاده از این متد نیز به‌صورت زیر است:

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">رشته‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد concat</h2>
    <p dir="rtl">متد concat برای اتصال دو رشته به هم:</p>
    <p id="demo"></p>
    <script>
        let text1 = "ABC";
        let text2 = "DEF";
        let text3 = text1.concat(" ",text2);
        document.getElementById("demo").innerHTML = text3;
    </script>
</body>
</html>

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

جاوا اسکریپت شامل بسیاری از متدها برای آرایه‌ها است که بدون وجود آن‌ها، درعمل نمی‌توان تحلیل روی آرایه‌های کوچک و بزرگ را انجام داد. برای آرایه‌ها، بیش از ۱۵ متد کاربردی تعریف شده است که در این بخش، با مهم‌ترین آن‌ها آشنا خواهیم شد.

ویژگی toString

متد toString کمک خواهد کرد تا عناصر داخلی یک آرایه را به رشته واحد تبدیل کنید. البته، شاید در آینده نیاز به شکستن این رشته به المان‌های جدا ازهم باشد که برای آن هم متد اختصاصی وجود دارد.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد toString</h2>
    <p dir="rtl">متد toString برای تبدیل یک آرایه به رشته واحد:</p>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        const array = ["Abc", "Def", "Ghi", "Jkl"];
        let str = array.toString();
        document.getElementById("demo").innerHTML = str;
        document.getElementById("demo2").innerHTML = typeof(str);
    </script>
</body>
</html>

ویژگی push

متد push یکی از متدهای جاوا اسکریپت برای آرایه‌ها است که با استفاده از آن، می‌توان یک عنصر جدید را به آرایه اضافه کرد. روش استفاده از این متد بسیار آسان است و به‌صورت زیر می‌توانید از آن استفاده کنید. گفتنی است push دقیقاً برعکس متد pop عمل می‌کند.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد push</h2>
    <p dir="rtl">متد push برای افزودن یک المان جدید به آرایه: </p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        const chars = ["A", "B", "C", "D"];
        document.getElementById("demo1").innerHTML = "The Old Array is: " + chars;
        chars.push("E");
        document.getElementById("demo2").innerHTML = "The New Array is: " + chars;
    </script>
</body>
</html>

ویژگی shift

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

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد shift</h2>
    <p dir="rtl">متد شیفت برای حذف اولین المان و شیفت دیگر المان‌ها به چپ: </p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        const array = ["A", "B", "C", "D"];
        document.getElementById("demo1").innerHTML = array;
        array.shift();
        document.getElementById("demo2").innerHTML = array;
    </script>
</body>
</html>

ویژگی concat

متد concat در جاوا اسکریپت برای اتصال دو آرایه به همدیگر به کار می‌رود. برای مثال، یک آرایه ۲ تایی را می‌توان با آرایه ۳ تایی به‌صورت زیر ترکیب کرد:

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد concat</h2>
    <p dir="rtl">متد concat برای اتصال دو آرایه به همدیگر: </p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <script>
        const array1 = ["A", "B"];
        const array2 = ["C", "D", "E"];
        const combinedArray = array1.concat(array2);
        document.getElementById("demo1").innerHTML = array1;
        document.getElementById("demo2").innerHTML = array2;
        document.getElementById("demo3").innerHTML = combinedArray;
    </script>
</body>
</html>

ویژگی splice

splice یکی از کاربردی‌ترین متدهای جاوا اسکریپت است که برای اضافه‌کردن المان‌های بیشتر به یک آرایه به کار می‌رود. پارامتر اول در این متد، ایندکس شروع المان‌های جدید را نشان می‌دهد و پارامتر دوم (۰) تعداد المان‌هایی که قرار است حذف شوند را مشخص می‌کند. در این مثال، ۲ المان به ایندکس ۲ و ۳ اضافه می‌شوند و المانی از آرایه حذف نمی‌شود.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">آرایه‌ها در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد splice</h2>
    <p dir="rtl">متد splice برای افزودن المان‌های جدید به یک آرایه: </p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        const array = ["A", "B", "C", "D"];
        document.getElementById("demo1").innerHTML = array;
        array.splice(2, 0, "E", "F");
        document.getElementById("demo2").innerHTML = array;
    </script>
</body>
</html>

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

بسیاری از متدها برای اشیا یا همان object ها در جاوا اسکریپت درنظر گرفته شده است تا کاربران به‌راحتی تحلیل داده را انجام دهند. در ادامه، با کاربردی‌ترین متدهای جاوا اسکریپت درمورد اشیا آشنا می‌شویم.

ویژگی entries

با متد entries می‌توان یک آرایه شامل key و value از object موردنظر دریافت کرد. روش کار با این متد به‌صورت زیر است:

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">اشیا در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد entries</h2>
    <p dir="rtl">متد entries برای برگرداندن آرایه‌ای از key/valueها</p>
    <p id="demo"></p>
    <script>
        const object = {
            firstChar: "A",
            lastChar: "B",
            code: 10,
        };
        let text = Object.entries(object);
        document.getElementById("demo").innerHTML = text;
    </script>
</body>
</html>

ویژگی values

درصورت نیاز به استخراج value ها از یک object در جاوا اسکریپت می‌توان از این متد استفاده کرد. این متد نیز مانند entries یک آرایه در خروجی چاپ خواهد کرد.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">اشیا در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد values</h2>
    <p dir="rtl">متد values برای استخراج آرایه‌ای از valueها: </p>
    <p id="demo"></p>
    <script>
        const object = {
            firstChar : "A",
            lastChar: "B",
            code: 10,
        };
        let text = Object.values(object)
        document.getElementById("demo").innerHTML = text;
    </script>
</body>
</html>

ویژگی keys

درکنار متد values، یک متد کاربردی دیگر نیز برای اشیا وجود دارد که برای استخراج key ها از یک object به کار می‌رود. استفاده از متد keys هم به‌سادگی به‌صورت زیر امکان‌پذیر است:

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">اشیا در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد keys</h2>
    <p dir="rtl">متد keys برای استخراج keyها: </p>
    <p id="demo"></p>
    <script>
        const object = {
            firstChar: "A",
            lastChar: "B",
            code: 10,
        };
        const keys = Object.keys(object);
        document.getElementById("demo").innerHTML = keys;
    </script>
</body>
</html>

ویژگی create

درصورت نیاز به ایجاد یک object از روی object ، دیگر می‌توانید از یکی از کاربردی‌ترین متدهای جاوا اسکریپت استفاده کنید که create نام دارد. این متد، یک کپی از شیء ایجاد خواهد کرد.

<!DOCTYPE html>
<html>
<body>
    <h1 dir="rtl">اشیا در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد create</h2>
    <p dir="rtl">متد create برای ایجاد یک شی بر اساس شی دیگر: </p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        const object1 = {
            firstChar: "A",
            lastChar: "B",
            code: 10
        };
        const object2 = Object.create(object1);
        object2.firstChar = "C";
        document.getElementById("demo1").innerHTML =
            object1.firstChar + ", " + object1.lastChar + ", " + object1.code;
        document.getElementById("demo2").innerHTML =
            object2.firstChar + ", " + object2.lastChar + ", " + object2.code;
    </script>
</body>
</html>

ویژگی freeze

متد freeze در بسیاری از مواقع، به کمک برنامه‌نویسان خواهد آمد تا از ایجاد تغییر در object موردنظر جلوگیری شود. با اعمال این متد، دیگر امکان تغییر در بخش‌های مختلف یک شیء وجود ندارد.

<!DOCTYPE html>

<html>
<body>
    <h1 dir="rtl">اشیا در جاوا اسکریپت</h1>
    <h2 dir="rtl">متد freeze</h2>
    <p dir="rtl">متد freeze برای جلوگیری از تغییر یک object: </p>
    <p id="demo"></p>
    <script>
    "use strict"
        const car = {
          carName: "BMW",
        };
    Object.freeze(car);
    let text;
        try {
            car.color = "red";
            text = Object.values(color);
        } catch (err) {
            text = err;
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>
</html>

جمع بندی: متدهای جاوا اسکریپت

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