11 تکنیک جاوااسکریپت

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 13 مرداد 1398
دسته بندی ها : جاوا اسکریپت

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

 

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

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

۱. فیلتر مقادیر غیر تکراری در آرایه

شئ Set گزینه جدیدی است که در ES6 معرفی شد. با استفاده از این مورد و عملگر spread ما می‌توانیم یک آرایه جدید را تنها با مقادیر یونیک و غیر تکراری ایجاد کنیم. 

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

قبل از ES6 قرار دادن مقادیر غیر تکراری در یک آرایه جدید نیاز به دستورات بسیار بیشتری داشت. البته این تکنیک صرفا برای آرایه‌هایی پاسخگو‌ست که مقادیر داده‌ای اولیه را دارند. مقادیری مانند undefined، null، boolean، string و number. اگر آرایه‌ای با مقادیری مانند اشیاء، توابع و یا آرایه‌ای دیگر دارید، نیاز است که از رویکرد متفاوتی استفاده کنید.

۲. ارزیابی کوتاه

برای نوشتن دستورهای شرطی می‌توان از عملگرهای سه‌گانه استفاده کرد. یک مثال از این حالت را می‌توانید در زیر مشاهده کنید:

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

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

چگونه کار می‌کند

بیایید فکر کنیم که قصد ارسال تنها یک گزینه را بین چند گزینه مختلف در یک دستور شرطی داریم.

اگر از عملگر && استفاده کنید، اولین موردی که منجر به false می‌شود برگردانده خواهد شد و اگر تمام گزینه‌های خروجی true باشند، آخرین گزینه‌ای که بررسی شده برگشت داده خواهد شد:

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

از طرفی عملگر || اولین مقدار true را برمی‌گرداند. اگر تمام گزینه‌های خروجی false باشند آخرین مورد برگشت داده خواهد شد.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

مثال اول

قصد داریم طول یک متغیر را که نوع داده‌ای‌ آن را نمی‌دانیم در خروجی نشان دهیم.

می‌توانیم از یک دستور if/else برای بررسی مورد قبول بودن مقدار متغیر foo استفاده کنیم اما انجام چنین کاری ممکن است با خط کدهای بسیاری همراه باشد. بجای آن می‌شود به صورت ساده از دستورهای ارزیابی کوتاه استفاده کرد:

return (foo || []).length;

در این صورت اگر متغیر foo برابر true باشد طول آن برگشت داده خواهد شد در غیر اینصورت مقدار طول یک آرایه خالی که صفر است به خروجی ارسال می‌شود. 

مثال دوم

تا به حال مشکل در دسترسی به یک object property تودرتو را داشته‌اید؟ بیایید فکر کنیم که ما قصد دسترسی پیدا کردن به خاصیت data در this.state را داریم اما مشکل آنجاست که data تا زمان برگشت موفقیت آمیز یک درخواست، undefined است. بنابراین براساس مکانی که ما از دستور this.state.data استفاده می کنیم، این موضوع ممکن است برنامه ما را متوقف کند. برای حل این مشکل می‌توانیم به صورت زیر از یک دستور if/else استفاده کنیم:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

اما اگر راه‌حلی کوتاه‌تر نیز باشد چه؟

return (this.state.data || 'Fetching Data');

در کد بالا نمی‌توانیم از عملگر && استفاده کنیم. چرا که دستور 'Fetching Data’ && this.state.data مقدار this.state.data را برمی‌گرداند که یک مقدار undefined است. 

۳. تبدیل به Boolean

در کنار مقادیر boolean مانند true و false، جاوااسکریپت با مقادیر دیگر به عنوان مقادیر truthy و falsy برخورد می‌کند. 

اگر یک متغیر define نشده باشد، جاوااسکریپت با آن به صورت truthy رفتار می‌کند البته به استثنا مقادیری مانند 0، "”، null، undefined، NaN و البته false که این‌ موارد به صورت falsy در نظر گرفته می‌شوند.

برای سوئیچ کردن بین مقادیر true و false می‌توان به سادگی از عملگر ! استفاده کرد که خروجی آن نیز یک مقدار boolean خواهد بود.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

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

۴. تبدیل به رشته

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

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

۵. تبدیل به عدد

حالت برعکس مورد ۴ نیز به سرعت امکان پذیر است. کافی‌ست عملگر جمع را قبل از نام متغیر قرار دهید:

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

می‌توان از این حالت برای تبدیل کردن مقادیر boolean نیز استفاده کرد:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

حالت‌هایی نیز وجود دارد که در آن عملگر + به عنوان یک عملگر برای تلفیق دو موجودی استفاده می‌شود و دیگر خبری از عمل جمع کردن نیست. زمانی که چنین اتفاقی می‌افتد برای تبدیل کردن یک رشته به عدد می‌توانید از ~~ استفاده کنید. این مقدار همچنین خروجی integer خواهد داشت.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

۶. توان

با ارائه ES7 قابلیت استفاده از عملگر ** در جاوااسکریپت نیز بوجود آمد. این عملگر روشی سریع‌تر برای دسترسی پیدا کردن به مقدار Math.pow(2,3) است. 

console.log(2 ** 3); // Result: 8

۷. تبدیل Float به Integer

اگر قصد تبدیل کردن مقدار float به integer را دارید می‌توانید از Math.floor، Math.ceil و Math.round استفاده کنید. اما اگر به دنبال روشی سریع‌تر هستید می‌توانید از عملگر | استفاده کنید:

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

۸. Automatic Binding در کلاس‌ها

می‌توانیم از arrow notation در متدهای یک کلاس استفاده کنیم. با انجام این کار فرایند binding به صورت ضمنی انجام می‌شود. انجام چنین کاری ما را از نوشتن چند خط کد اضافی معاف می‌کند. 

import React, { Component } from React;
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
myMethod = () => {
    // This method is bound implicitly!
  }
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

۹. کوتاه کردن یک آرایه

اگر قصد حذف کردن یکسری از داده‌ها داخل یک آرایه را دارید، راهکاری سریع‌تر نسبت به استفاده از splice() وجود دارد. 

برای مثال اگر قصد دارید تا فقط ۴ اندیس اول آرایه را حفظ کنید می‌توانید به صورت زیر عمل نمایید:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

البته من بعدا متوجه شدم که استفاده از slice مدت زمان اجرای برنامه را کمتر کرده و در نتیجه برنامه شما سریع‌تر اجرا خواهد شد.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

۱۰. دریافت آخرین آیتم در یک آرایه

متد slice می‌تواند ورودی منفی نیز داشته باشد. اگر یک مقدار ورودی منفی را به این متد بدهید از آخر آرایه شروع به slice کردن می‌کند:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

۱۱. قالب‌دهی به کدهای JSON

ممکن است از دستور JSON.stringify قبلا استفاده کرده باشید، اما آیا می‌دانستید که می‌توانید با استفاده از این دستور کدهای‌تان را قالب‌دهی کنید؟

متد stringify() دو پارامتر به عنوان ورودی دریافت می‌کند: یک تابع replacer که برای فیلتر JSON استفاده می‌شود و یک مقدار space که برای فرمت‌دهی به کدهای JSON به کار برده می‌شود. در زیر ورودی 't\’ به این معنی است که از یک فاصله tab برای ورودی‌ها استفاده کن:

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

در پایان

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

اگر قصد یادگیری ویژگی‌های جدید جاوااسکریپت در ES6، ES7 و ES8 را دارید می‌توانید به منابع زیر مراجعه کنید:

آموزش جاوااسکریپت ES۶

آموزش جاوااسکریپت ES۷ و ES۸

منبع

مقالات پیشنهادی

  • 10 نمونه از یادگیری ماشین در جاوااسکریپت

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

    ارسطو عباسی
  • ۷ فریمورک جاوااسکریپت در سال 2019

    جاوااسکریپت بدون شک یکی از محبوبترین زبان‌های برنامه‌نویسی در دنیا است که در فرایند توسعه وب در کنار HTML و CSS مشارکت دارد. جاوااسکریپت زبان سبک، شئ‌...

    ارسطو عباسی