هدف این مقاله معرفی مختصری از برخی مفاهیم اساسی برای توسعه دهندگان علاقه مند به جاوااسکریپت است. این ایده خوبی است که همیشه با مفاهیم اصلی یک زبان یا یک فریمورک برای نوشتن کد به طور موثر و کارآمد آشنا شوید. با این حال اگر می‌خواهید به سرعت چیز جدیدی یاد بگیرید، خواندن توضیحات طولانی دردسر ساز خواهد شد. بنابراین این مقاله به شرح ساده ترین مفاهیم اصلی با موارد زیر می‌پردازد.
- شرح مختصری از این مفهوم
- چرا مرتبط است
- یک کاربرد عملی (مثال همراه با کد)
یک فنجان قهوه آماده کرده و با دقت مطالب را دنبال کنید! این مفاهیم نحوه کدنویسی شما را تغییر می‌دهد و به شما کمک می‌کند تا با نوشتن کد با کیفیت به یک توسعه دهنده کارآمد تبدیل شوید.
مفاهیمی که بررسی خواهیم کرد:
مفاهیم فوق براساس محبوبیت در جامعه انتخاب شده است. بیایید با جزئیات به هر یک از اینها بپردازیم.
1. تخریب
چند روش برای استخراج خصوصیات از یک شی وجود دارد. تخریب (Destructuring) یکی از آنهاست. این امر به استخراج تمیز ویژگی‌های یک شی، اختصاص مقادیر از یک آرایه و اختصاص دادن خصوصیات از یک شی به متغیرها کمک می‌کند. اما چرا این از روش‌های دیگر بهتر است؟ تخریب امکان استخراج چندین ویژگی در یک عبارت را فراهم می‌کند که می‌تواند به ویژگی‌های اشیا تو در تو دسترسی پیدا کرده و همچنین در صورت عدم وجود مقادیر پیش فرض را به خصوصیات آنها اختصاص دهد.
شی زیر را در نظر بگیرید.
const profile = {
name: "Harry",
age: 15,
country: "UK"
};با استفاده از تخریب می‌توانید یک یا چند ویژگی از این شی را در یک عبارت استخراج کنید.
const { name, age } = profile;
console.log(name, age);
// Harry 15اختصاص مقدار پیش فرض به یک ویژگی یکی دیگر از کاربردهای تخریب است. ویژگی غیر موجود مقدار پیش فرض اختصاص داده شده را برمی‌گرداند.
const { name, age, school = "Hogwarts" } = profile;
console.log(school);
// Hogwartsعلاوه بر این تخریب آرایه نیز برای اختصاص مقادیر پیش فرض به متغیرها، مبادله مقادیر بین متغیرها و موارد دیگر نیز بسیار محبوب است. بنابراین تخریب ساختار مفهومی اساسی برای کد تمیزتر است.
نکته: کامپوننت‌های قابل استفاده مجدد خود را با استفاده از Bit (Github) بین پروژه‌ها به اشتراک بگذارید. Bit اشتراک گذاری، مستند سازی و سازماندهی کامپوننت‌های مستقل در هر پروژه را ساده می‌کند.
همچنین می‌توانید از آن برای حداکثر استفاده مجدد از کد، همکاری در کامپوننت‌های مستقل و ساخت برنامه‌هایی با مقیاس بالا استفاده کنید.
بیت از Node ، TypeScript ، React ، Vue ، Angular و موارد دیگر پشتیبانی می‌کند.
بررسی کامپوننت‌های ری‌اکت قابل استفاده مجدد که در Bit.dev به اشتراک گذاشته شده است
2. سینتکس Spread
به زبان ساده عملگر spread در یک قابلیت تکرار شونده (به عنوان مثال: آرایه‌ها و رشته‌ها) استفاده می‌شود و به گسترش قابلیت تکرار پذیری به عناصر منفرد کمک می‌کند. سینتکس عملگر spread سه نقطه است (...).
به عنوان مثال بیایید تابعی را در نظر بگیریم که سه آرگومان را می‌پذیرد و ما یک آرایه از سه عنصر داریم. با استفاده از این سینتکس می‌توانیم آرایه را به این تابع منتقل کنیم، در آنجا آرایه را تکرار می‌کند و عناصر را به آرگومان‌های مربوط به تابع اختصاص می‌دهد.
function sum (a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// 6قبل از اینکه عملگر spread در ES6 معرفی شود، انتقال آرگومان‌ها به یک تابع با استفاده از یک آرایه بسیار پیچیده‌تر بود.
کاربرد دیگر سینتکس spread آرایه‌های الحاقی است. فرض کنید ما دو آرایه به شرح زیر داریم.
const vegetables = ["carrot", "pumpkin"];
const fruits = ["apple", "pear"];قبل از معرفی سینتکس spread مجبور بودیم از متد array.concat برای ترکیب این آرایه‌ها استفاده کنیم. اما اکنون با استفاده از آرایه سینتکس spread، ترکیب بسیار آسان شده است.
const newArray = [ ...vegetables, ...fruits ];
console.log(newArray);
// ["carrot", "pumpkin", "apple", "pear"]به علاوه می‌توانید از عملگر spread برای ایجاد کپی از اشیا با محتوای یکسان اما با رفرنس متفاوت استفاده کنید. در مورد این موضوع جزئیات بیشتری را در بخش مقداردهی و انتساب متغیر مرجع در ادامه مقاله ارائه خواهیم داد.
3. سینتکس Rest
سینتکس rest از همان دستورالعمل سینتکس spread استفاده می‌کند. اما تفاوت آنها در این است که spread همه چیز را کپی می‌کند و هنگامی که بخواهیم همه عناصر باقی مانده را بازیابی کنیم از rest استفاده می‌شود.
const numbers = [1, 3, 2, 6, 8];
const [1, 3, ...rest] = numbers;
console.log(rest);
// [2, 6, 8]4. متدهای آرایه
متدهای آرایه جاوااسکریپت یک راه حل زیبا و تمیز برای تبدیل داده‌ها در آرایه‌ها ارائه می‌دهد. از میان بسیاری از متدهای آرایه موجود، ما در مورد 4 متد مهم map، filter، reduce و some صحبت خواهیم کرد.
Map
این متد آرایه‌ای را برمی‌گرداند که در آن هر عنصر در آرایه مطابق با تابع مشخص شده تبدیل می‌شود.
به عنوان مثال اگر لازم است هر عنصر از یک آرایه را در 2 ضرب کنید، می‌توانیم از متد map برای انجام کار در یک دستورالعمل بدون هیچ حلقه پیچیده استفاده کنیم. به علاوه این متد داده‌های اصلی را تغییر نمی‌دهد.
const array = [1, 2, 3];
const mapped = array.map(element => element * 2);
console.log(mapped);
// [2, 4, 6]Filter
این متد آرایه‌ای از عناصر را که در آن تابع نتیجه true داشته باشند، برمی‌گرداند.
به عنوان مثال اگر می‌خواهید اعداد زوج را از یک آرایه بازیابی کنید، می توانید آرایه را به صورت زیر فیلتر کنید.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(element => element % 2 === 0);
console.log(evenNumbers);
// [2, 4, 6]Reduce
این متد مقادیری را که توسط یک تابع مشخص شده جمع آوری می‌کند.
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21این سه متد از متدهای تبدیل داده قدرتمند در آرایه‌ها هستند و منجر به ایجاد کدی بسیار تمیز و قابل خواندن می‌شوند. بدون نگرانی از حلقه‌ها یا انشعاب زدن می‌توانید کد ساده‌تر و کوتاه‌تری با اینها بنویسید.
بهره گیری از این متدهای آرایه برای یک توسعه دهنده جاوااسکریپت بسیار مهم است، زیرا اجازه می‌دهد تا کمیت و کیفیت کد بهبود یابد.
Some
اگر برخی از عناصر آرایه از تست مشخص شده توسط تابع عبور کنند، این متد مقدار true را برمی‌گرداند. اگر هیچ یک از عناصر با تابع مطابقت نداشته باشد، نتیجه false برمی‌گردد.
const array = [1, 2, 3, 4, 5];
const isEven = (element) => element % 2 === 0;
console.log(array.some(isEven));
// trueاین متد همچنین در یافتن عناصری در یک آرایه که مطابق با شرایط خاص باشند، برخلاف متد سنتی تکرار از طریق آرایه برای یافتن نتیجه بسیار مفید است.
5. مقداردهی و انتساب متغیر مرجع
اینکه جاوااسکریپت چگونه مقادیر را به متغیرها اختصاص می‌دهد، یکی از مهمترین مفاهیمی است که هر توسعه دهنده جاوااسکریپت باید بداند. اگر این موضوع را نمی‌دانید، ممکن است مقادیری را به متغیرها اختصاص دهید و به طور تصادفی آن را تغییر دهید که منجر به مشکلات غیر منتظره در کد می‌شود.
جاوااسکریپت همیشه متغیرها را با توجه به مقدار خود اختصاص می‌دهد. با این حال دو دسته بندی عمده وجود دارد. اگر مقدار تخصیص یافته از نوع primitive باشد (boolean، null، undefined، string، number، bigint و symbol)، مقدار واقعی به متغیر اختصاص می‌یابد. اما اگر مقدار اختصاص داده شده یک آرایه، تابع یا شی باشد به جای مقدار واقعی ارجاع به شی موجود در حافظه اختصاص می‌یابد.
بیایید نگاهی به چند مثال بیندازیم تا این مفهوم را بهتر درک کنید.
متغیرهای name1 و name2 را در نظر بگیرید.
let name1 = "John";
let name2 = name1;به متغیر name2 متغیر name1 اختصاص داده شده است. از آنجا که این متغیرها از نوع primitive هستند، مقدار واقعی ("John") به هر دو متغیر اختصاص می‌یابد. بنابراین می‌توان این دو متغیر را به عنوان دو متغیر جداگانه با مقدار یکسان در نظر گرفت. به همین دلیل اختصاص مجدد متغیر دوم تاثیری بر متغیر اول ندارد.
name2 = "Peter";
console.log(name1, name2);
// "John", "Peter"به این کار اختصاص متغیر بر اساس مقدار می‌گویند.
متد بعدی اختصاص یک متغیر از طریق مرجع است. اگر نوع متغیر یا آرایه شی یا تابع باشد، به متغیر به جای مقدار واقعی، یک مرجع در حافظه اختصاص می‌یابد.
بیایید انتساب شی زیر را در نظر بگیریم.
let obj1 = { name: "Lucy" }
let obj2 = obj1;متغیر obj2 با این انتساب همان مرجع حافظه obj1 را دریافت می‌کند. بنابراین تغییر دادن obj2 نیز بر روی obj1 تأثیر خواهد گذاشت، زیرا دیگر به عنوان متغیرهای جداگانه در نظر گرفته نمی‌شوند. هر دوی این متغیرها در حافظه مرجع یکسانی دارند.
obj2.name = "Mary";
console.log(obj1);
// { name: "Mary" }
console.log(obj2);
// { name: "Mary" }اگر شما نیاز به ایجاد کپی از یک شی با ارجاع متفاوت در حافظه دارید، می‌توانید از عملگر spread استفاده کنید. تغییر شکل شی تازه ایجاد شده به این روش بر روی اولین شی تأثیر نخواهد گذاشت، زیرا ارجاعات مختلفی در حافظه دارند.
let object1 = { name: "Lucy" };
let object3 = {...object1}
object3.name = "Anne";
console.log(object1);
// { name: "Lucy" }
console.log(object3);
// { name: "Anne" }جمع بندی
تسلط بر این مفاهیم به شما در نوشتن کد بهتر و تمیزتر کمک می‌کند. امیدوارم در مورد مفاهیم مورد بحث و اهمیت آنها اطلاعات مفیدی کسب کرده باشید. در آینده مقالات بیشتری در مورد مفاهیم مهم جاوااسکریپت و نحوه استفاده از آنها منتشر خواهیم کرد. اگر لازم است در مورد هر مفهوم یا تکنیکی خاص که مهارت کدنویسی و برنامه نویسی شما را بهبود می‌بخشد صحبت کنیم، در بخش نظرات به ما اطلاع دهید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید