۱۱ دستور کاربردی جاوا اسکریپت

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

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

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

شئ 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۸