حال مدتی می‌شود که JavaScript بر روی صحنه قرار دارد. گرچه، فقط در طی سال‌های اخیر بود که شروع به معروف شدن کرد. با توجه به این که تقربیا 75 درصد توسعه‌دهندگان، توسعه‌دهنده وب هستند، احتمال قوی‌ای وجود دارد که از هر ۵ توسعه‌دهنده، ۳ عدد از آن‌ها از JavaScript استفاده کنند.
برخی میان‌برها برای JavaScript وجود دارند که معمولا زیاد از آن‌ها استفاده می‌کنیم. در این مقاله، برخی از آن‌ها را به اشتراک خواهیم گذاشت.
1. مقادیر: truthy و falsy
اکثر توسعه‌دهندگان JavaScript جدید، ممکن است از انواع داده داخلی در آن اطلاع داشته باشند. گرچه، هر کسی از طبقه‌بندی truthy و falsy در JavaScript خبر ندارد.
هر زمان که JavaScript انتظار یک مقدار boolean را دارد، مقدار truthy به مانند true، و falsy هم به مانند false کار خواهند کرد. این‌ها مقادیر falsy هستند:
- 0
- -0
- Null
- Undefined
- ‘’
- NaN
همانطور که می‌توانید ببینید، حتی یک رشته خالی هم falsy در نظر گرفته می‌شود. تمام مقادیر دیگر به جز موارد بالا، truthy در نظر گرفته می‌شوند.
عملگر «!» می‌تواند برای تبدیل هر مقداری به boolean استفاده شود. وقتی که از عملگر ! با مقادیر استفاده می‌کنید، مقادیر truthy به شکل false ارزیابی می‌شود، و مقادیر falsy به شکل true ارزیابی می‌شوند. می‌توانید از عملگر دوتایی (!!) برای دریافت معادل boolean برای هر مقداری استفاده کنید.
// FALSY مقادیر
console.log(!!0); // false
console.log(!!-0); // false
console.log(!!''); // false
console.log(!!false); // false
console.log(!!NaN); // false
console.log(!!null); // false
console.log(!!undefined); // false
// TRUTHY مقادیر
console.log(!!+Infinity); // true
console.log(!!-Infinity); // true
console.log(!![]); // true
console.log(!!{}); // true
console.log(!!new String('')); // true
console.log(!!new RegExp('')); // true
console.log(!!'Non-empty'); // true
فرض کنید که متغیری به نام person، فقط می‌تواند یک آبجکت، یا مقدار null را شامل شود. می‌توانید با استفاده از این شرط، تایید کنید که متغیر person برابر با null نیست:
if (person !== null) { ... }
با در نظر گرفتن این که null برابر با falsy است، هر آبجکت دیگری truthy خواهد بود. می‌توانید از این کد استفاده کنید:
if (person) { ... }
2. تبدیل نوع: عدد و رشته
یکی از موارد رایج که می‌توانید خود را در میان آن‌ها پیدا کنید، استفاده از عملگرهای ریاضی (+، -، x، /) است. این عملگرها انتظار مقادیری را دارند، که اعداد هستند. پس هر وقت که یک مقدار عدد نیست، JavaScript به اجبار آن را تبدیل به یک عدد می‌کند. اما گاهی اوقات ممکن است مقداری که انتظارش را دارید را به دست نیاورید؛ به خصوص وقتی که از عملگر + استفاده می‌کنید. علت اصلی آن این است که عملگر + برای پیوند زدن رشته استفاده می‌شود. به این قطعه کد نگاهی داشته باشید:
console.log(100 + 50); // 150
console.log(100 - 50); // 50
console.log('100' + 50); // "10050"
console.log('100' - 50); // 50
console.log(null + 50); // 50
console.log(null - 50); // -50
console.log(void 0 + 50); // NaN
console.log(void 0 - 50); // NaN
console.log(true + 50); // 51
console.log(true - 50); // -49
console.log(false + 50); // 50
console.log(false - 50); // -50
console.log([] + 50); // "50"
console.log([] - 50); // -50
console.log([100] + 50); // "10050"
console.log([100] - 50); // 50
console.log({} + 50); // "[object Object]50"
console.log({} - 50); // NaN
console.log(new Date + 1000); // "Thu May 31 2018 18:27:51 GMT+0100 (WAT)1000"
console.log(new Date - 1000); // 1527787670595
همانطور که می‌توانید ببینید، تغییر نوع اجباری شاید همیشه نتیجه‌ای که منتظر آن بودید را به شما ندهد. علت این مسئله، نحوه مدیریت تبدیل نوع در JavaScript، به خصوص برای آبجکت‌ها است. این تفاوت، به علت ترتیبی است که JavaScript متدهای toString() و valueOf() را بر روی آبجکت فراخوانی می‌کند.
حال در اینجا راه حل آن را مشاهده می‌نمایید. عملگر + وقتی که به عنوان یک عملگر یگانه استفاده می‌شود، مقدار مربوطه را به یک عدد تبدیل می‌کند. از این رو، این کد را در نظر داشته باشید:
console.log(+'100'); // 100
console.log(+null); // 0
console.log(+void 0); // NaN
console.log(+true); // 1
console.log(+false); // 0
console.log(+[]); // 0
console.log(+[100]); // 100
console.log(+[100, 50]); // NaN
console.log(+{}); // NaN
console.log(+new Date); // 1527790306576
استفاده از عملگر یگانه + بر روی یک مقدار، عملا معادل تبدیل مقدار با استفاده از تابع Number() است.
+new Date === Number(new Date); // true
عملگر + همچنین می‌تواند برای تبدیل مقادیر به رشته استفاده شود. با استفاده از عملگر +، یک رشته خالی (‘’) را به هر مقداری پیوند بزنید، تا آن را به یک رشته تبدیل کنید:
console.log(100 + ''); // "100"
console.log(null + ''); // "null"
console.log(void 0 + ''); // "undefined"
console.log(true + ''); // "true"
console.log(false + ''); // "false"
console.log([] + ''); // ""
console.log([100] + ''); // "100"
console.log([100, 50] + ''); // "100,50"
console.log({} + ''); // "[object Object]"
console.log(new Date + ''); // "Thu May 31 2018 19:28:09 GMT+0100 (WAT)"
استفاده از عملگر + برای تبدیل مقادیر به رشته، عملا معادل تبدیل مقادیر به رشته با استفاده از تابع String() است.
([100, 50] + '') === String([100, 50]); // true
3. دور زدن کوتاه
وقتی که با عملگرهای منطقی (|| و &&) کار می‌کنید، ممکن است متوجه رفتار جالبی به نام دور زدن کوتاه شده باشید. نحوه کار آن به این صورت است:
عملگر منطقی «&&» اولین مقدار را در صورتی که falsy باشد، بر می‌گرداند؛ و در غیر این صورت مقدار دوم را بر می‌گرداند.
دور زدن کوتاه && معمولا به عنوان جایگزینی برای بیانیه‌های if ساده استفاده می‌شود. به مانند این کد:
// روش ۱: استفاده از بیانیه
if (person) {
fetchProfile(person);
}
// روش ۲: استفاده از دور زدن کوتاه
person && fetchProfile(person);
دقت کنید که دور زدن کوتاه از آنجایی که یک عبارت JavaScript است، در واقع یک مقدار را بر می‌گرداند. از این رو، نتیجه عملیات دور زدن کوتاه می‌تواند در یک متغیر ذخیره شود، یا در هر جایی که JavaScript انتظار یک مقدار را دارد، استفاده شود.
var personProfile = person && fetchProfile(person);
گرچه، استفاده از بیانیه if یک مقدار را بر نمی‌گرداند؛ زیرا یک بیانیه JavaScript است.
عملگر منطقی || اولین مقدار را در صورتی که truthy باشد، بر می‌گرداند؛ و در غیر این صورت مقدار دوم را بر می‌گرداند.
دور زدن کوتاه || معمولا هنگام اختصاص‌دهی مقادیر fallback به متغیرهای داخلی استفاده می‌شود. به مانند این کد:
// روش ۱: استفاده از بیانیه
let requestAnimFrame = null;
if (window.requestAnimationFrame) {
requestAnimFrame = window.requestAnimationFrame;
}
else if (window.webkitRequestAnimationFrame) {
requestAnimFrame = window.webkitRequestAnimationFrame;
}
else if (window.mozRequestAnimationFrame) {
requestAnimFrame = window.mozRequestAnimationFrame;
}
// روش ۲: استفاده از دور زدن کوتاه
const requestAnimFrame2 = (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
null
);
در قطعه کد زیر، دور زدن کوتاه برای ساخت دو تابع جدید که همیشه یک مقدار Boolean را بر می‌گردانند استفاده شده است. اگر اولین آرگومان یک مقدار boolean باشد، برگردانده می‌شود؛ و در غیر این صورت مقدار boolean مورد نظر برگردانده می‌شود.
// تابعی که مقدار بولین را به عنوان آرگومان اول خود می‌پذیرد
// و اگر غلط نباشد آن را بر می‌گرداند
const booleanOrFalse = value => (typeof value == 'boolean') && value;
// تابعی که مقدار بولین را به عنوان آرگومان اول خود می‌پذیرد
// و اگر صحیح نباشد آن را بر می‌گرداند
const booleanOrTrue = value => (typeof value != 'boolean') || value;
console.log(booleanOrFalse(true)); // true
console.log(booleanOrFalse(false)); // false
console.log(booleanOrFalse(1)); // false
console.log(booleanOrFalse(0)); // false
console.log(booleanOrFalse('String')); // false
console.log(booleanOrFalse({})); // false
console.log(booleanOrFalse([])); // false
console.log(booleanOrTrue(true)); // true
console.log(booleanOrTrue(false)); // false
console.log(booleanOrTrue(1)); // true
console.log(booleanOrTrue(0)); // true
console.log(booleanOrTrue('String')); // true
console.log(booleanOrTrue({})); // true
console.log(booleanOrTrue([])); // true
4. عملگر سه گانه
عملگر سه گانه می‌تواند به عنوان جایگزینی برای بیانیه‌های ساده if / else استفاده شود. سینتکس آن را در اینجا مشاهده می‌کنید:
(condition) ? (return value if truthy) : (return value if falsy)
عملگر سه گانه نیازمند سه مقدار است. اولین مورد، مقدار یا عبارت condition (شرط) است. دومین مورد، مقدار یا عبارتی است که ارزیابی می‌شود و اگر شرط برابر با truthy باشد، برگردانده می‌شود. سومین مورد هم مقدار یا عبارتی است که ارزیابی می‌شود و اگر شرط برابر با falsy باشد برگردانده می‌شود.
در اینجا، مثال سریعی از نحوه استفاده از عملگر سه گانه به عنوان یک میان‌بر برای بیانیه‌های if / else ساده می‌بینید:
// روش ۱: استفاده از بیانیه
if (loggedIn) {
showUserProfile();
} else {
showLoginForm();
}
// روش ۲: استفاده از عملگر سه گانه
loggedIn ? showUserProfile() : showLoginForm();
این عملگرها وقتی جالب‌تر می‌شوند که بدانید می‌توانند به صورت تو در تو نوشته شوند. عملگر سه گانه یک نوع وابستگی از راست به چپ دارد. از این رو، عبارت زیر:
a ? b : c ? d : e ? f : g
به این شکل ارزیابی می‌شود:
(a ? b : (c ? d : (e ? f : g)))
عملگر سه گانه تو در تو می‌تواند به عنوان راه جایگزینی برای بیانیه‌های if / else استفاده شود. در اینجا یک مثال را می‌بینید:
var MIN_VALUE = 1;
var MAX_VALUE = 5;
// روش ۱: استفاده از بیانیه
function boundedValue(val) {
if (val > MAX_VALUE) {
return MAX_VALUE;
} else if (val < MIN_VALUE) {
return MIN_VALUE;
} else {
return val;
}
}
// روش ۲: استفاده از عملگر سه گانه
function boundedValue(val) {
return (val > MAX_VALUE) ? MAX_VALUE : (val < MIN_VALUE) ? MIN_VALUE : val;
}
boundedValue(0); // 1
boundedValue(3); // 3
boundedValue(7); // 5
به مختصر بودن عملگر سه گانه نسبت به چندین بیانیه if / else دقت کنید.
دقت کنید که عملگر سه گانه از آنجایی که یک عبارت JavaScript است، یک مقدار را بر می‌گرداند. از این رو، نتیجه عملگر سه گانه می‌تواند در یک متغیر ذخیره شود یا هر جایی که JavaScript انتظار یک مقدار را دارد، استفاده شود. علت این که عملگر سه گانه می‌تواند از تابع boundedValue() برگردانده شود نیز، همین است.
5. کار با اعداد
اعداد تصادفی
به عنوان یک توسعه دهنده JavaScript، ممکن است که گاهی از Math.random() استفاده کرده باشید. تابع Math.random() یک عدد floating-point و شبه تصادفی در محدوده «۰» تا «۱»، اما نه خود «۱» را بر می‌گرداند.
console.log(Math.random()); // 0.684408535330514
اگر می‌خواهید یک عدد تصادفی floating-point در محدوده «۰» تا بر فرض ۱۰ داشته باشید، به سادگی Math.random() را در ۱۰ ضرب می‌کنید.
console.log(Math.random() * 10); // 8.368613312939646
وقتی که Math.random() با توابع دیگری مانند Math.floor() یا Math.ceil() ترکیب شود، می‌تواند برای تولید اعداد جالبی استفاده شود.
در اینجا، یک تابع ساده را می‌بینید که یک مقدار integer تصادفی از ۱ تا maxvalue (حداکثر مقدار) داده شده را تولید می‌کند.
function randomInteger(maxvalue) {
return 1 + Math.floor(Math.random() * maxvalue);
}
اعداد حداقل / حداکثر
توابع Math.min() و Math.max() نیز هنگام کار با اعداد محدود، پر کاربرد خواهند بود. برای مثال، نمونه boundedValue() قبلی می‌تواند با استفاده از Math.min() و Math.max() به این صورت پیاده‌سازی شود:
var MIN_VALUE = 1;
var MAX_VALUE = 5;
function boundedValue(val) {
return Math.max(MIN_VALUE, Math.min(MAX_VALUE, val));
}
تبدیل مبنای عدد
در JavaScript، شمارنده اعداد بسیار اولیه هستند. گرچه، می‌توانید به هر متدی که بر روی آبجکت‌های عدد در دسترس است، با استفاده از سازنده Number() دسترسی داشته باشید، که یکی از آن‌ها toString() است.
متد Number.prototype.toString() یک آرگومان به نام radix (با نوع integer) را می‌پذیرد، که مبنای عددی که باید تبدیل شود را تعیین می‌کند. اگر این آرگومان مشخص نشده باشد، به طور پیشفرض مقدار ۱۰ را دارد، که یعنی عدد مورد نظر به همان صورت باقی می‌ماند و سپس به یک رشته تبدیل می‌شود.
از این رو، می‌توانید به مانند قطعه کد زیر، یک عدد را به مبناهای مختلفی تبدیل کنید:
(255).toString(); // "255"
(255).toString(2); // "11111111"
(255).toString(8); // "377"
(255).toString(16); // "ff"
قطعه کد زیر، تابعی به نام rgbToHex() را برای تبدیل مقدار رنگ RGB به مقدار hex نشان می‌دهد.
function leftZeroPad(value, maxlength) {
while (value.length < maxlength) {
value = '0' + value;
}
return value;
}
function boundedValue(minvalue, maxvalue) {
return function(value) {
return Math.max(minvalue, Math.min(maxvalue, +value || 0));
}
}
function colorValue(value) {
var hex = boundedValue(0, 255)(value).toString(16);
return leftZeroPad(hex, 2);
}
function rgbToHex(red, green, blue) {
red = colorValue(red);
green = colorValue(green);
blue = colorValue(blue);
return '#' + red + green + blue;
}
console.log(rgbToHex()); // "#000000"
console.log(rgbToHex(255)); // "#ff0000"
console.log(rgbToHex(255, 128)); // "#ff8000"
console.log(rgbToHex(255, 128, 64)); // "#ff8040"
نتیجه گیری
در این مقاله، برخی میان برها که قطعا در نقاطی خاص از JavaSctipt برای شما پرکاربرد خواهند بود را به اشتراک گذاشتیم. امیدوارم بتوانید از این نکات، به خوبی در برنامه‌نویسی‌های آینده خود استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید