جاوااسکریپت را حرفه ای کد بزن!


جاوااسکریپت رو حرفه ای کد بزن! همیشه زمانی که برای اولین بار شروع به کدنویسی می کنید، فرقی نمی کند چه زبان برنامه نویسی چون آشنایی چندانی با جزئیات کلیدی آن ندارید برنامه ای که با آن توسعه میدهید هم به همان نسبت خوانایی لازم را ندارد ممکن است از متودها و ویژگی هایی استفاده کنید که منسوخ شده اند و اینکه به شکل راحت تری هم قابل استفاده هستند.
همیشه تمرکز و پافشاری بر یادگیری مفاهیم کاربردی می تواند نقش مهمی در سطح برنامه نویسی شما شود. زمانی که همه این موارد را در کنار هم برای توسعه یک پروژه قرار می دهید در کنار افزایش رشد فردی و هماهنگی بیشتر با بروزترین متودها و ویژگی های هر زبان برنامه نویسی برنامه هایی خواهید داشت که بهترین عملکرد و کارایی را از خود نشان میدهند زیرا با اصولی دقیق و ویژگی هایی بروز توسعه داده شده اند.
جاوااسکریپت را حرفه ای کد بزن!
در این مقاله راهکارهایی را ارائه میدهیم که که باعث بهبود عملکرد و کارایی شما در روند توسعه پروژه های جاوااسکریپت خواهد شد و در عین حال کدهای شما تمیزتر خواهد بود.
1.Arrow Function
ES6 توابع Arrow را معرفی کرد تا تمیزی بیشتر کد و عملکرد به نسبت بهتر نسبت به گذشته را تجربه کنید.
به جای استفاده از توابع مانند زیر :
1 2 3 |
const multiply = function(x, y) { return x * y; }; |
با کد کمتر همان نتیجه را انتظار داشته باشید
1 2 3 |
const multiply = (x, y) => { return x * y; }; |
همچنین این حالت را به شکل عجیبی میتوانید ساده تر کنید اگر تنها یک عبارت داشته باشید.
1 |
const multiply = (x, y) => x * y; |
2.Spread Operator
Spread ها این امکان را برای ما فرآهم می کنند تا گسترش پذیری بهتری را تجربه کنیم و بیش از یک آرگومان به آرایه ها و یا توابع خود ارسال کنیم.
1 2 3 4 |
const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; console.log(lyrics); // Result: ["head", "shoulders", "knees", "and", "toes"] |
ایجاد آرایه جدید با استفاده از آرایه موجود به عنوان بخشی از آن.
1 2 3 4 5 |
let arr1 = [, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; console.log(arr1) // Result: [0, 1, 2, 3, 4, 5] |
یک روش بهتر و حتی کاربردی تر برای ادغام آرایه ها.
1 2 3 |
const add = (a, b, c) => a + b + c; let array = [1,2,3]; console.log(add(...array)); // Result: 6 |
استفاده از آرایه ها به عنوان آرگومان های یک تابع
3.Rest Operator
در ظاهر Rest کاملا شبیه به spread می باشد اما با عملکردی کاملا متفاوت و عکس. Spread یک المان را اضافه می کند در حالی که Rest چندین المان را جمع و یک واحد متراکم شده را ایجاد می نماید.
1 2 3 4 5 |
const blend = (ice, liquid, ...theRest) => { console.log(theRest); }; blend('ice', 'milk', 'banana', 'strawberry'); // Result: ['banana', 'strawberry'] |
آخرین پارامتر تابع را می توان با پیشوند … قرار داد که باعث می شود تمام آرگومان های باقی مانده در یک آرایه JavaScript قرار بگیرند.
4.Fill Arrays
برای مثال یک آرایه ساده ایجاد کنید.
آرایه ای با 5 رشته خالی
1 |
let array = Array(5).fill(''); // Result: ['', '', '', '', ''] |
آرایه ای متشکل از اعداد 0 تا 4
1 2 3 |
let array = Array.from(Array(5).keys()); // Result: [0, 1, 2, 3, 4] // Using the spread operator let array = [...Array(5).keys()] // Result: [0, 1, 2, 3, 4] |
5.Object property names
ES6 امکان دسترسی به خصوصیات یک شی را فرآهم می کند تنها کافی است از […] استفاده کنید و خصوصیت مورد نظر خود را درون آن قرار دهید تا بر روی object اعمال شود.
1 2 3 4 5 |
let key = 'A_DYNAMIC_KEY'; let obj = { [key]: 'A_VALUE', }; console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' } |
6.ways for console
زمانی که آرایه ای از آبجکت ها دارید می توانید برای log گرفتن از دستور console.table() استفاده کنید.
1 2 3 4 |
const foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.table([foo, bar, baz]); |
با استفاده از % خروجی log های خود را سفارشی سازی کنید و css را در آن ها مورد استفاده قرار دهید.
1 2 |
console.log('%cStyled log', 'color: orange; font-weight: bold;'); console.log('Normal log'); |
برای log گرفتن از چند آبجکت آن ها را ادغام کنید تا در خروجی بهتر بتوانید هر کدام را با جزوئیات بهتر مورد بررسی قرار دهید.
1 2 3 4 |
const foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.log({ foo, bar, baz }); |
7.Object Destructuring
در صورتی که می خواهد تکرار کد کمتری داشته باشید می توانید تنها خصوصیاتی که در یک آبجکت به آن نیاز دارید را مورد استفاده قرار دهید.
1 2 3 4 5 |
const dog = { name: 'Nala', gender: 'female', age: 10 }; |
آرگومان یک تابع را یک آبجکن در نظر بگیرید و هر کدام از خصوصیاتی که به آن نیاز دارید را درون آن قرار دهید.
1 2 3 4 |
const func = ({ name, age }) => { return `${name} is ${age} years old.`; }; console.log(func(dog)); // Result: Nala is 10 years old. |
ممکن است آرایه ای از object ها داشته باشید در چنین شرایطی یه آرگومان در نظر بگیرید و با استفاده از آن آرگومان خصوصیات مورد نظرتان را درون یک آبجکن فرآخوانی کنید.
1 2 3 4 5 |
const func = (animal) => { const { name, age } = animal; return `${name} is ${age} years old.`; }; console.log(func(dog)); // Result: Nala is 10 years old. |
8.map() و reduce() و filter()
از Reduce برای تبدیل یک آرایه به یک مقدار واحد استفاده کنید.
1 2 3 |
let orders = [1, 2, 3, 4, 5]; const total = orders.reduce((acc, cur) => acc + cur); console.log(total); // Result: 15 |
از map برای ایجاد یک آرایه جدید با فرآخوانی یک تابع برای هر المان آرایه استفاده کنید.
1 2 3 |
let orders = [1, 2, 3, 4, 5]; const total = orders.map((item) => item * 2); console.log(total); // Result: [2, 4, 6, 8, 10] |
ایجاد آرایه ای جدید بر اساس المان های آرایه قبلی با استفاده از بررسی شرایطی خاص بر روی آن آرایه که از طریق یک تابع انجام می شود.
1 2 3 |
let orders = [1, 2, 3, 4, 5]; const total = orders.filter((item) => item > 3); console.log(total); // Result: [4, 5] |
9.Conditional Operator
هر دسنور if..else را می توان به یک دستور شرطی مشابه مثال زیر تبدیل کرد.
مثال یک :
1 |
condition ? (expression if true) : (expression if false) |
مثال دو :
1 2 3 4 5 6 7 |
const hour = 5; if (hour < 18) { console.log('Good day'); } else { console.log('Good evening'); } // Result: Good day |
این مورد می تواند به شکل عجیبی با ساختار جدید کوتاه تر شود :
1 2 3 |
const hour = 5; hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’); // Result: Good day |
اگر قصد یادگیری جاوا اسکریپت(javascript) به صورت تخصصی و حرفه ای را دارید، پیشنهاد می کنم آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) را مشاهده کنید
دیدگاهتان را بنویسید