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

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

مثالی از آرگومان در جاوا اسکریپت

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

به عنوان مثال، تابعی به نام storeNames () را بررسی می‌کنیم. هنگامی که این تابع را با سه آرگومان فراخوانی می‌شود، مانند storeNames ("Mulder"، "Scully"، "Alex Krycek")، این سه آرگومان در شی آرگومان‌ها کپسوله خواهند شد. در این فرآیند، تابعی تعریف می‌شود که شی آرگومان‌ها را بازمی‌گرداند. پس از اجرای این تابع با آرگومان‌های n(در این مورد ۳)، شی را به ما بازخواهد گرداند. این شی شبیه آرایه است و در عین حال راهی برای تبدیل آن به آرایه واقعی نیز وجود دارد که در ادامه آن را بررسی خواهیم کرد. قطعه کد زیر به عنوان یکی از کدهای آماده جاوا اسکریپت این مفهوم را نشان می‌دهد:

1function storeNames() {
2    return arguments;
3}
4
5// When we run the following line in the console:
6storeNames("Mulder", "Scully", "Alex Krycek");
7
8// The output will be { '0': 'Mulder', '1': 'Scully', '2': 'Alex Krycek' }

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

استفاده از آرگومان به عنوان آرایه

برای اینکه شی آرگومان را به عنوان آرایه‌ای در نظر گرفت و از عملیات مرتبط با آرایه برای آن استفاده کرد، باید آرگومان مد نظر به آرایه‌ای واقعی تبدیل شود. این تبدیل را می‌توان با تعریف نوعی متغیر و استفاده از متد Array.prototype.slice.callبه دست آورد. همچنین، می‌توان از رویکرد جاوا اسکریپت ES6 با Array.from(arguments)استفاده کرد:

1// Using the Array.prototype.slice.call method
2var args = Array.prototype.slice.call(arguments);
3
4// Or the ES6 way
5var args = Array.from(arguments);

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

1function getGrades() {
2    var args = Array.prototype.slice.call(arguments, 1, 3);
3    return args;
4}
5
6// Let's display the result!
7console.log(getGrades(90, 100, 75, 40, 89, 95));
8
9// The OUTPUT SHOULD BE: //
10// [100, 75] <- Why? Because it started from index 1 and stopped at index 3,
11// so, index 3 (40) wasn't included.
12//
13// If we remove the '3' parameter, leaving just (arguments, 1), we'd obtain
14// every argument from index 1: [100, 75, 40, 89, 95].

با تبدیل شی آرگومان به آرایه با استفاده از Array.prototype.slice.callیا ES6 Array.from()، انعطاف‌پذیری استفاده از آرگومان‌ها افزایش یافته و می‌توان از آن در کدهای خود به نحو احسن استفاده کرد.

مشکلات بهینه سازی با Array.slice

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

1var args = []; // Initially an empty array.
2for (var i = 0; i < arguments.length; i++) {
3    args.push(arguments[i]);
4}
5// Now, 'args' is an array containing your arguments.

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

دور زدن شی آرگومان با پارامتر rest در ES6

در «ES2015 (ES6)» و فراتر از آن، برنامه نویس می‌تواند از پارامتر restکه با (...)نشان داده می‌شود به عنوان جایگزین مدرن‌تری برای شی آرگومان‌های سنتی استفاده کند. در کدهای آماده جاوا اسکریپت زیر نحوه به‌روزرسانی تابعی که بدون ویژگی‌های ES6 نوشته شده، نشان داده شده است.

تابع اصلی (بدون استفاده از ES6):

1function getIntoAnArgument() {
2    var args = arguments.slice();
3    args.forEach(function(arg) {
4        console.log(arg);
5    });
6}

حال شیوه استفاده و نوشتن این تابع با استفاده از ES6 به صورت زیر است:

1function getIntoAnArgument(...args) {
2    args.forEach(arg => console.log(arg));
3}

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

توجه به این نکته مهم است که شی آرگومان در بدنه «تابع پیکان» (Arrow Functions) قابل دسترسی نیست، بنابراین اگر به طور گسترده از شی آرگومان استفاده شود، ممکن است بهتر باشد که آن را به توابع سنتی پیوند داد. همچنین، باید به این نکته توجه داشت که هنگام استفاده از پارامتر rest، همیشه باید restآخرین پارامتر در تعریف تابع باشد:

1function getIntoAnArgument(arg1, arg2, arg3, ...restOfArgs /* no more arguments allowed here */) {
2    // Function body
3}

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

کدهای آماده جاوا اسکریپت برای عملیات حسابی

جاوا اسکریپت پنج عملگر محاسباتی اولیه را برای انجام عملیات‌های مختلف ریاضی ارائه می‌دهد، از جمله عملیات زیر:

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

• «+» (جمع)
• «-» (تفریق)
• «*» (ضرب)
• «/» (تقسیم)
• و «%» (باقی‌مانده)

در ادامه با کدهای آماده جاوا اسکریپت این موضوع را مورد بررسی قرار خواهیم داد.

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

«سینتکس» (Syntax) عملیات جمع در جاوا اسکریپت به صورت زیر است:

1a + b

مثال زیر نحوه استفاده از این عملیات را نشان می‌دهد:

12 + 3          // returns 5
2true + 2       // interprets true as 1 and returns 3
3false + 5      // interprets false as 0 and returns 5
4true + "bar"   // concatenates the boolean value and returns "truebar"
55 + "foo"      // concatenates the string and the number and returns "5foo"
6"foo" + "bar"  // concatenates the strings and returns "foobar"

عملیات تفریق در جاوا اسکریپت

سینتکس عملیات تفریق در جاوا اسکریپت به صورت زیر است: