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

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

در این مقاله، 12 روش عالی برای بهبود و سرعت بخشیدن به کد جاوا اسکریپت را به شما نشان خواهم داد. در بیشتر موارد آنها جهانی هستند.

یادآوری می کنیم: برای همه خوانندگان "Habr" - تخفیف 10 روبل هنگام ثبت نام در هر دوره Skillbox با استفاده از کد تبلیغاتی "Habr".

Skillbox توصیه می کند: دوره عملی "موبایل توسعه دهنده PRO".

فیلتر کردن مقادیر منحصر به فرد

آرایه ها

نوع شیء 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]

در شرایط عادی، کدهای بسیار بیشتری برای انجام همان عملیات مورد نیاز است.

این تکنیک برای آرایه های حاوی انواع اولیه کار می کند: تعریف نشده، تهی، بولی، رشته و عدد. اگر با یک آرایه حاوی اشیا، توابع یا آرایه‌های اضافی کار می‌کنید، به رویکرد متفاوتی نیاز دارید.

طول آرایه کش در چرخه

چرخه ها

وقتی حلقه‌ها را یاد می‌گیرید، از روش استاندارد پیروی می‌کنید:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

با این حال، با این نحو، حلقه for بارها و بارها طول آرایه را در هر تکرار بررسی می کند.

گاهی اوقات این می تواند مفید باشد، اما در بیشتر موارد، ذخیره کردن طول آرایه در حافظه پنهان کارآمدتر است، که نیاز به یک دسترسی به آن دارد. ما می توانیم این کار را با تعریف یک متغیر طول انجام دهیم که در آن متغیر i را به صورت زیر تعریف می کنیم:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

در اصل، تقریباً مانند بالا است، اما با افزایش اندازه حلقه، صرفه جویی قابل توجهی در زمان خواهیم داشت.

رتبه بندی اتصال کوتاه (رده بندی مک کارتی)

اپراتورهای مشروط

عملگر سه تایی روشی سریع و کارآمد برای نوشتن عبارات شرطی ساده (و گاهی نه چندان ساده) است:

x> 100؟ "بیش از 100": "کمتر از 100"؛
x> 100؟ (x> 200؟ "بیش از 200": "بین 100-200"): "کمتر از 100";

اما گاهی اوقات حتی اپراتور سه تایی پیچیده تر از نیاز است. می توانیم به جای || از «and» && و «or» استفاده کنیم عملگرهای بولی برای ارزیابی عبارات خاص به روشی حتی مختصرتر. اغلب به آن "اتصال کوتاه" یا "رده بندی اتصال کوتاه" می گویند.

چطور کار می کند؟

فرض کنید می خواهیم تنها یکی از دو یا چند شرط را برگردانیم.

استفاده از && اولین مقدار نادرست را برمی گرداند. اگر هر عملوند به درستی ارزیابی شود، آخرین عبارت ارزیابی شده برگردانده خواهد شد.

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

با استفاده از || اولین مقدار واقعی را برمی گرداند. اگر هر عملوند نادرست ارزیابی شود، آخرین مقدار ارزیابی شده برگردانده می شود.

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

به عنوان مثال 1

فرض کنید می خواهیم طول یک متغیر را برگردانیم، اما نوع آن را نمی دانیم.

در این مورد، می توانید از if/else برای بررسی اینکه foo نوع مناسبی است استفاده کنید، اما این روش ممکن است خیلی طولانی باشد. بنابراین، بهتر است از "اتصال کوتاه" خود استفاده کنیم.

return (foo || []).length;

اگر متغیر foo دارای طول مناسبی باشد، آن زمان برگردانده خواهد شد. در غیر این صورت 0 می گیریم.

به عنوان مثال 2

آیا برای دسترسی به یک شی تودرتو مشکل داشته اید؟ ممکن است ندانید که یک شی یا یکی از ویژگی های فرعی آن وجود دارد یا خیر، و این می تواند منجر به مشکلاتی شود.

به عنوان مثال، ما می خواستیم به ویژگی داده در this.state دسترسی داشته باشیم، اما تا زمانی که برنامه ما یک درخواست واکشی را برگرداند، داده تعریف نمی شود.

بسته به جایی که از آن استفاده می کنیم، فراخوانی this.state.data ممکن است مانع از شروع برنامه شود. برای حل مشکل، می‌توانیم این را در یک عبارت شرطی قرار دهیم:

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

یک گزینه بهتر استفاده از عملگر "یا" است.

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

ما نمی توانیم کد بالا را برای استفاده از && تغییر دهیم. اپراتور "واکشی داده" && this.state.data این.state.data را بدون در نظر گرفتن اینکه تعریف نشده باشد یا خیر، برمی گرداند.

زنجیر اختیاری

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

به عنوان مثال، ما می‌توانیم مثال بالا را برای بدست آوردن this.state.data?..(). یعنی داده ها تنها در صورتی برگردانده می شوند که مقدار صفر نباشد.

یا، اگر مهم است که وضعیت تعریف شده است یا نه، می‌توانیم این.state?.data را برگردانیم.

تبدیل به Boolean

تبدیل نوع

علاوه بر توابع بولی معمولی true و false، جاوا اسکریپت همچنین تمام مقادیر دیگر را درست یا نادرست در نظر می گیرد.

تا زمانی که در غیر این صورت ذکر نشده باشد، همه مقادیر در جاوا اسکریپت درست هستند، به جز 0، ""، null، تعریف نشده، NaN و، البته، false. دومی کاذب است.

ما به راحتی می توانیم با استفاده از عملگر ! بین این دو سوئیچ کنیم که نوع را نیز به Boolean تبدیل می کند.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // 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"

این روش همچنین می تواند برای تبدیل نوع داده بولی به مقادیر عددی معمولی استفاده شود، همانطور که در زیر نشان داده شده است:

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

ممکن است شرایطی وجود داشته باشد که + به جای عملگر اضافه به عنوان یک عملگر الحاق تفسیر شود. برای جلوگیری از این، باید از tildes استفاده کنید: ~~. این عملگر معادل -n-1 است. برای مثال ~15 برابر با -16 است.

استفاده از دو تایلد پشت سر هم عملیات را نفی می کند زیرا - (- - n - 1) - 1 = n + 1 - 1 = n. به عبارت دیگر ~-16 برابر با 15 است.

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

<Quick Powers

عملیات

با شروع در ES7، می‌توانید از عملگر قدرت ** به عنوان مخفف قدرت‌ها استفاده کنید. این بسیار سریعتر از استفاده از Math.pow (2، 3) است. ساده به نظر می رسد، اما این نکته در لیست تکنیک ها گنجانده شده است، زیرا در همه جا ذکر نشده است.

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

نباید با نماد ^ که معمولاً برای قدرت استفاده می شود اشتباه گرفته شود. اما در جاوا اسکریپت این عملگر XOR است.

قبل از ES7، میانبر ** فقط برای توان های پایه 2 با استفاده از عملگر شیفت چپ بیتی <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

به عنوان مثال، 2 << 3 = 16 معادل 2 ** 4 = 16 است.

شناور به عدد صحیح

عملیات / تبدیل نوع

اگر نیاز به تبدیل یک float به یک عدد صحیح دارید، می توانید از Math.floor()، Math.ceil() یا Math.round() استفاده کنید. اما یک راه سریعتر وجود دارد، برای این کار از |، یعنی عملگر OR استفاده می کنیم.

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

رفتار | تا حد زیادی به این بستگی دارد که آیا با اعداد مثبت یا منفی سر و کار دارید، بنابراین این روش تنها زمانی مناسب است که به کاری که انجام می دهید اطمینان داشته باشید.

n | 0 همه چیز بعد از جداکننده اعشاری را حذف می کند و شناور را به یک عدد صحیح کوتاه می کند.

با استفاده از ~~ می توانید همان افکت گرد را بدست آورید. پس از تبدیل اجباری به یک عدد صحیح، مقدار بدون تغییر باقی می ماند.

حذف اعداد دنباله دار

عملگر OR می تواند برای حذف هر تعداد رقم از یک عدد استفاده شود. این بدان معناست که ما نیازی به تبدیل انواع مانند اینجا نداریم:

let str = "1553";
Number(str.substring(0, str.length - 1));

در عوض ما به سادگی می نویسیم:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

لینک دهی خودکار

کلاس ها

نمادهای فلش ES6 را می توان در متدهای کلاس استفاده کرد و binding به صورت ضمنی وجود دارد. این به این معنی است که می توانید با عبارات تکراری مانند this.myMethod = this.myMethod.bind(this) خداحافظی کنید!

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() وجود دارد.

به عنوان مثال، اگر اندازه آرایه اصلی را می دانید، می توانید ویژگی length آن را به صورت زیر لغو کنید:

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

اما روش دیگری و سریعتر وجود دارد. اگر سرعت برای شما مهم است، در اینجا انتخاب های ما آمده است:

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() دارد.

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

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

متد stringify () دو پارامتر اختیاری دارد: یک تابع جایگزین، که می تواند برای فیلتر کردن JSON نمایش داده شده استفاده شود، و یک مقدار فاصله.

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

این همه است، امیدوارم همه این تکنیک ها مفید بوده باشند. چه ترفندهایی بلدی؟ آنها را در نظرات بنویسید.

Skillbox توصیه می کند:

• دوره عملی دو ساله "من یک توسعه دهنده وب PRO هستم".
• دوره آنلاین "توسعه دهنده سی شارپ از 0".
• دوره عملی سال "توسعه دهنده PHP از 0 تا PRO".

منبع: www.habr.com