هنگامی که نوشتن برنامه های پایه جاوا اسکریپت راحت بودید، زمان آن فرا رسیده است که برای پاکسازی کد و سرعت بخشیدن به کدنویسی، چند نحو پیشرفته یاد بگیرید.
جاوا اسکریپت و تایپ اسکریپت زبان های برنامه نویسی بسیار محبوب در زمینه توسعه وب هستند. هر دو دارای مجموعه ویژگی های گسترده و میانبرهای نحوی بسیاری هستند که به طور قابل توجهی به بهبود کارایی کدنویسی کمک می کند.
یاد بگیرید که چگونه کد خود را محکم کنید و با چند میانبر مفید از این زبان ها نهایت استفاده را ببرید.
1. اپراتور سه تایی
عملگر سه تایی یک نحو مختصر و کارآمد برای بیان عبارات شرطی ارائه می دهد. دارای سه بخش است: یک شرط، یک عبارت برای اجرا اگر شرط به درستی ارزیابی شود، و یک عبارت برای اجرا اگر نادرست است.
این عملگر به ویژه هنگام تصمیم گیری بر اساس شرایط و تخصیص مقادیر مختلف بر این اساس مفید است.
مثال زیر را در نظر بگیرید:
const age = 20;
const ageType = age >= 18 ? "Adult" : "Child";
console.log(ageType); // Output: "Adult"
این مثال از عملگر سه تایی برای بررسی اینکه آیا متغیر سن بزرگتر یا مساوی 18 است استفاده می کند.
2. Literals الگو
لفظ قالب یک روش قدرتمند و کارآمد برای قالب بندی رشته های جاوا اسکریپت و ترکیب متغیرها یا عبارات درون آنها ارائه می دهد. بر خلاف الحاق رشته‌های سنتی با استفاده از نقل‌قول‌های تک یا دوتایی، الگوها از بکتیک (`) استفاده می‌کنند.
این نحو منحصر به فرد مزایای متعددی را هنگام کار با رشته ها فراهم می کند. مثال زیر را در نظر بگیرید که استفاده از الفبای الگو را نشان می دهد:
const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: "Hello, Alice!"
این مثال شامل متغیر نام در الگو با استفاده از ${} است. این به شما امکان می دهد به راحتی رشته های پویا بسازید.
3. اپراتور ادغام باطل
عملگر ادغام تهی (??) روشی مناسب برای تخصیص مقادیر پیش فرض زمانی که یک متغیر تهی یا تعریف نشده است، ارائه می دهد. اگر عملوند سمت چپ تهی یا تعریف نشده باشد، عملوند سمت راست را برمی گرداند.
مثال زیر را در نظر بگیرید:
const username = null;
const displayName = username ?? "Guest";
console.log(displayName); // Output: "Guest"
در این مثال، از آنجایی که نام کاربری متغیر null است، عملگر ادغام nullish مقدار پیش‌فرض Guest را به متغیر displayName اختصاص می‌دهد.
4. ارزیابی اتصال کوتاه
ارزیابی اتصال کوتاه به شما امکان می دهد عبارات شرطی مختصر را با استفاده از عملگرهای منطقی مانند && و || بنویسید. از این واقعیت استفاده می کند که یک عملگر منطقی به محض اینکه بتواند نتیجه را تعیین کند، ارزیابی عبارات را متوقف می کند.
مثال زیر را در نظر بگیرید:
const name = "John";
const greeting = name && `Hello, ${name}`;
console.log(greeting); // Output: "Hello, John"
این مثال فقط در صورتی عبارت “Hello, ${name}” را ارزیابی می کند که نام متغیر دارای مقدار واقعی باشد. در غیر این صورت، اتصال کوتاه می کند و مقدار نام خود را به متغیر تبریک می دهد.
5. مخفف انتساب ویژگی شی
هنگام ایجاد اشیاء، می توانید از یک نماد کوتاه استفاده کنید که متغیرها را به عنوان خصوصیات با همان نام اختصاص می دهد.
این علامت مختصر نیاز به ذکر اضافی نام ویژگی و نام متغیر را از بین می‌برد و در نتیجه کدهای واضح‌تر و مختصرتر ایجاد می‌شود.
مثال زیر را در نظر بگیرید:
const firstName = "John";
const lastName = "Doe";
const person = { firstName, lastName };
console.log(person); // Output: { firstName: "John", lastName: "Doe" }
این مثال ویژگی های firstName و lastName را با استفاده از علامت گذاری مختصر اختصاص می دهد.
6. زنجیربندی اختیاری
زنجیره اختیاری (?.) به شما امکان می دهد بدون نگرانی در مورد مقادیر تهی یا تعریف نشده میانی به ویژگی های تو در تو یک شی دسترسی داشته باشید. اگر یک ویژگی در زنجیره صفر یا تعریف نشده باشد، عبارت اتصال کوتاه می کند و تعریف نشده برمی گردد.
مثال زیر را در نظر بگیرید:
const user = { name: "Alice", address: { city: "New York", country: "USA" }};
const country = user.address?.country;
console.log(country); // Output: "USA"
در مثال بالا، اپراتور زنجیره‌ای اختیاری تضمین می‌کند که اگر ویژگی آدرس یا ویژگی کشور وجود نداشته باشد، کد خطایی ایجاد نمی‌کند.
7. تخریب شی
تخریب شیء یک ویژگی قدرتمند در جاوا اسکریپت و تایپ اسکریپت است که به شما امکان می دهد خواص را از اشیا استخراج کنید و با استفاده از یک نحو مختصر به متغیرها اختصاص دهید.
این رویکرد فرآیند دسترسی و دستکاری ویژگی های شی را ساده می کند. بیایید با یک مثال نگاه دقیق‌تری به نحوه عملکرد تخریب شی بیندازیم:
const user = { name: "John", age: 30 };
const { name, age } = user;
console.log(name, age); // Output: "John" 30
این مثال نام و سن متغیرها را از طریق تخریب شیء از شی کاربر استخراج می کند.
8. اپراتور گسترش
عملگر spread (…) شما را قادر می سازد تا عناصر یک تکرار شونده، مانند یک آرایه یا شی، را به عناصر جداگانه گسترش دهید. برای ترکیب آرایه ها یا ایجاد کپی های کم عمق از آنها مفید است.
مثال زیر را در نظر بگیرید:
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5]
در مثال بالا، عملگر spread آرایه اعداد را به عناصر جداگانه گسترش می‌دهد، که سپس با 4 و 5 ترکیب می‌شوند تا یک آرایه جدید به نام newNumbers ایجاد کنند.
9. مخفف حلقه شی
هنگام تکرار بر روی اشیاء، می توانید از حلقه for…in در ترکیب با تخریب شی استفاده کنید تا به راحتی روی ویژگی های شی تکرار شود.
این مثال را در نظر بگیرید:
const user = { name: "John", age: 30 };
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// Output:
// name: John
// age: 30
در مثال بالا، Object.entries(user) آرایه‌ای از جفت‌های کلید-مقدار را برمی‌گرداند که هر تکرار آنها را به متغیرهای کلید و مقدار تخریب می‌کند.
10. Array.indexOf Shorthand با استفاده از عملگر Bitwise
می‌توانید با استفاده از عملگر بیتی ~، فراخوانی‌های متد Array.indexOf را با کوتاه‌نویسی جایگزین کنید تا بررسی کنید که آیا عنصری در یک آرایه وجود دارد یا خیر. خلاصه نویسی شاخص عنصر را در صورت یافتن یا -1 را در صورت یافت نشدن برمی گرداند.
مثال زیر را در نظر بگیرید:
const numbers = [1, 2, 3];
const index = ~numbers.indexOf(2);
console.log(index); // Output: -2
در مثال بالا، ~numbers.indexOf(2) -2 را برمی گرداند زیرا 2 در اندیس 1 است و عملگر بیتی ایندکس را نفی می کند.
11. ارزش گذاری به Boolean با!!
برای تبدیل صریح یک مقدار به یک بولی، می توانید از عملگر دو نفی (!!) استفاده کنید. این به طور موثر یک مقدار حقیقت را به درست و یک مقدار نادرست را به نادرست تبدیل می کند.
مثال زیر را در نظر بگیرید:
const value1 = "Hello";
const value2 = "";
console.log(!!value1); // Output: true
console.log(!!value2); // Output: false
در مثال بالا، !!value1 true را برمی گرداند زیرا رشته Hello true است، در حالی که !!value2 false را به دلیل غلط بودن رشته خالی برمی گرداند.
باز کردن کارایی و خوانایی کد
با استفاده از این کوتاه‌نویسی در جاوا اسکریپت و تایپ اسکریپت، می‌توانید کارایی کدنویسی خود را افزایش دهید و کدهای مختصر و خواناتری تولید کنید. خواه استفاده از عملگر سه تایی، ارزیابی اتصال کوتاه، یا استفاده از قدرت لفظی قالب، این کوتاه‌نویسی ابزار ارزشمندی برای کدنویسی کارآمد ارائه می‌کند.
علاوه بر این، کوتاه نویسی انتساب ویژگی شی، زنجیره اختیاری، و ساختارشکنی شی کار با اشیاء را ساده می کند، در حالی که عملگر گسترش و اختصار آرایه دستکاری کارآمد آرایه را امکان پذیر می کند. تسلط بر این خلاصه ها شما را به یک توسعه دهنده جاوا اسکریپت و تایپ اسکریپت سازنده تر و موثرتر تبدیل می کند.