نوشته های Nima Mohamadian

آمار فعالیت من در ویرگولِ سال ۹۸

Nima Mohamadian — Mon, 13 Apr 2020 20:28:56 +0430

همیشه گزارش هایی که ویرگول ارائه میده جذاب و دوست داشتنی است، مخصوصا زمانی که در مورد خودمون باشه.آمار فعالیت نیما محمدیان در سال ۱۳۹۸ در ویرگولمی‌خواستم به همین بهونه از همه شما عزیزان که نوشته های من رو خوندین تشکر کنم. قطعا نوشته هام خالی از عیب و نقص نیست اما تلاشم رو می‌کنم که این روند رو بهتر و مفیدتر کنم. https://virgool.io/@novonimo/share/annual-report/1398/ccd5S خوشحالم که تونستم سرانه مطالعه کشور رو افزایش بدم و این امر جز با یاری شما امکان پذیر نبود.راستی مدتی هم هست که به خاطر مشغله زیاد مطلبی رو منتشر نکردم ولی به زودی با نوشته های جذاب و بهتر از گذشته برمی‌گردم.مثل همیشه از نظرات شما استقبال می‌کنم و همین نظرات باعث بهتر شدن کیفیت نوشته هام میشه پس حتما با نظراتتون به من کمک کنید.راه های ارتباطی با من هم در شبکه های اجتماعی:Follow me on social mediaTelegram Facebook Twitter Linkedin Virgoolمطالبی که به نظر خودم خوب بوده و از طرف شما هم استقبال شده رو اینجا می‌تونید پیدا کنید: https://vrgl.ir/Udhdo https://vrgl.ir/u1wC0 https://vrgl.ir/hm4VA https://vrgl.ir/fxVu0 https://vrgl.ir/taKkg https://vrgl.ir/YhkrX https://vrgl.ir/ksYFn https://vrgl.ir/4ip6V https://vrgl.ir/WczLL https://vrgl.ir/j6dgK https://vrgl.ir/q0LnK https://virgool.io/@novonimo/آپدیت-بد-بینانه-و-خوش-بینانه-thzeoe7zmjmr https://vrgl.ir/w935z https://vrgl.ir/aE7sU https://vrgl.ir/YP2CT https://vrgl.ir/eV3aB https://vrgl.ir/DHpHg https://vrgl.ir/JgETy

پشته یا استک در جاواسکریپت

Nima Mohamadian — Thu, 20 Feb 2020 12:14:43 +0330

یکی از تئوری های بنیادی ساختار داده، Stack هست. پشته یا استک رو خیلی ساده میشه به یه سری کتاب که روی میز چیده شده تعبیر کرد. مسأله‌ای که توی صف و استک و ... مهم هست، نحوه ورود و خروج و مدیریت اعضا هست. تو این نوشته می‌خواهم یک پشته رو با جاواسکریپت پیاده سازی کنم.پشته یا استکتابع زیر رو در نظر بگیرید:تابع Stack و مقدار دهی count و storage برای پشتهدو مقدار count و storage رو برای این تابع در نظر گرفتیم. count تعداد اعضا و storage هم محل قرارگیری اعضاست.به این تصویر دقت کنید:اولین عضو خروجی ، آخرین عضو ورودی در استک استدر یک استک، آخرین عضو ورودی - اولین عضو خروجی هست.نحوه قرار گرفتن و خارج شدن اعضا در استک این شکل نحوه قرار گرفتن آیتم یا عضو در استک رو نشون میده. متد push برای قرار دادن عضو و متد pop برای خارج کردن عضو از استک به کار میره. می‌خواهیم متدهای مورد نیازمون رو توی Stack که ساختیم پیاده سازی کنیم. اول از همه متدهای push و pop :پیاده سازی متدهای push و pop در استکمتد push : تابعی که مقداری رو در ورودی می‌گیره و اون رو توی storage ذخیره می‌کنه. مقدار count یک عدد افزایش پیدا می‌کنه.متد pop : اول چک می‌کنه استک ما عضوی داره یا نه؟ اگر عضوی نداشت، مقدار undefined رو برگردونه و در غیر این صورت، از count یکی کم میکنه و آخرین عضو storage رو می‌گیره و ازش حذف میکنه.در انتها اون عضو حذف شده رو return می‌کنه ( از خصوصیات pop همین هست که عضو حذف شده رو بر می‌گردونه)به دوتا متد دیگه هم نیاز داریم، بریم پیاده سازی کنیم:پیاده سازی متدهای size & peek در استکمتد size‌ : مقدار count رو برمی‌گردونه و تعداد اعضای پشته رو نشون میده.متد peek : آخرین عضو پشته رو برمی‌گردونه ( بر خلاف pop تاثیری توی اعضای storage و پشته نداره)خوب استک ما کامل شد و متدهای لازم رو پیاده کردیم:پیاده سازی استک به همراه ۴ تا متد push , pop , size, peek⚠️ اگه حس می‌کنید با این کدها راحت نیستید کافیه اون هارو خودتون پیاده سازی کنید. هر چند که این پیاده سازی الزاما بهترین پیاده سازی نیست و شما می‌‌تونید اون رو بهتر کنید.یکبار دیگه به این تصویر دقت کنید. می‌خواهیم همین کار رو با کدی که زدیم پیاده کنیم.مراحلی که می‌خواهیم انجام بدیم کارهایی که می‌خواهیم انجام بدیم :اول یک پشته می‌سازیمعدد ۱ رو توش push می‌کنیمعدد ۲ رو push می‌کنیمآخرین عضو رو pop ‌می کنیمساختن یک نمونه از استک و قرار دادن اضا و کار با متد های push & pop & peekسایر نوشته های من در ویرگول: http://vrgl.ir/MAllp http://vrgl.ir/lpDIw http://vrgl.ir/BwPRq Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

فرق expression و statement

Nima Mohamadian — Wed, 19 Feb 2020 12:57:29 +0330

خیلی وقت ها فرق expression و statement برای ما مهم نیست و معمولا توی محاوره به جای همدیگه ازشون استفاده می‌کنیم( مثل آرگومان و پارامتر ) اما اگر بخواهیم دقیق تر به این موضوع نگاه کنیم می‌بینیم که بین این دو گذاره تفاوت زیادی وجود داره. توی این نوشته با کمک جاواسکریپت در مورد تفاوت مفهومی این دو گذاره صحبت می‌کنیم. فرق expression و statement به لحاظ معنی و مفهوم در جاواسکریپتوقتی داریم از بک تیک به عنوان template literal استفاده می‌کنیم فقط مجاز به استفاده از expression هستیم و اگر statement استفاده کنیم با خطا مواجه می‌شیم. (یکی از راه هایی که میشه باهاش وضعیت statement و expression رو چک کرد)نمایش چند expression با استفاده از template literalهمه عبارت های بالا expression هستند. حالا بیایم یک statement رو توی template literal استفاده کنیم و نتیجه رو ببینم:قرار دادن یک statement در template literal که منجر به خطا شدههمون طور که انتظار داشتیم خطا رخ داده و دلیلش هم این هست که تعریف متغیرها statement هست. بررسی تعریف تابع ‌قرار دادن یک تابع در template literal که چون expression هست مشکلی پیش نمیادتعریف تابع هم expression هست. چرا ؟ چون تابع هم مثل آبجکت first citizen جاواسکریپت هست. arrow function هم همین طور. پس میشه نتیجه گرفت که تعریف array و ‌object هم expression هستند.⚠️ دقت کنید ⚠️ تعریف تابع از نوع expression هست و در صورتی که خروجی یک تابع رو بخواهید استفاده کنید و یا از immediate invoke function expression استفاده کنید دیگه expression نیست.خوب احتمالا تا اینجا حدودی متوجه شده باشید که چه چیزایی statement هستند. راستی if و for هم statement هستند. ? نکته ری اکتی : توی render کامپوننت های ری اکت باید از expression استفاده کرد. برای همین نمیشه if نوشت و به جاش از ternary operator استفاده میشه. همین نکته به ظاهر ساده باعث دردسر خیلی از توسعه دهندگان می‌شه.یادم میاد خودم که ری اکت رو شروع کرده بودم، همین موضوع برام سوال بود که چرا if نمیتونیم استفاده کنیم؟ و یادم میاد از چند نفری که استاد بودند پرسیدم گفتند که نمیشه دیگه باید ternary استفاده کنی ?تعریف کلاس چه طور ؟‌میدونیم که جاواسکریپت چیزی به اسم کلاس نداره و under the hood یه سری function هستند که دارند تعریف کلمه کلاس رو میسر میکنن. پس تعریف کلاس هم expression هست (تابع هستند).جمع بندیاین که چه عبارتی statement هست و یا expression دغدغه نیست که روزانه باهاش درگیر باشیم اما مثل نکته ری اکتی که گفتم ، اگه یه جا با همچین خطایی روبرو شدید که گفته expression توقع داشته و شما بهش statement دادین، میدونید که مشکل از کجاست و سریع اون رو حل می‌کنید.سایر نوشته های من در ویرگول: http://vrgl.ir/lpDIw http://vrgl.ir/3IckT http://vrgl.ir/hm4VA Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

با bind و this آشتی کنیم

Nima Mohamadian — Thu, 13 Feb 2020 15:14:23 +0330

چرا اسم این نوشته رو با bind و this آشتی کنیم گذاشتم؟‌ چون این قسمت از جاواسکریپت برای مبتدی ها پیچیده به نظر می‌رسه و معمولا سراغش نمیرن. با این نوشته کوتاه و مثال های ساده که استفاده کردم امیدوارم که دید خوبی به bind و this پیدا کنید.با bind و this آشتی کنیمبه این تابع دقت کنید:تابع ساده f با یک مقدار this.fullNameاما چرا undefined رو میده؟تابع f مقدار this.fullName رو برمیگردونه و this به شی window اشاره می‌کنه و چون fullName رو پیدا نمیکنه (مقدار fullName رو جایی تعریف نکردیم)، undefined برمیگردونه. چاره اش چیه ؟‌ باید مقدار fullName رو به تابع گره بزنیم ( به تابع بگیم که fullName چی هست):گره زدن آبجکت به تابع f و صدا زدن تابع gحالا مقدار fullName رو به تابع f دادیم و بهش گفتیم که this.fullName چی هست. پس وقتی تابع g رو صدا میزنیم و از خروجیش لاگ می‌گیریم، توقع داریم که Nima Mohamadian در کنسول چاپ شده باشه.دو بار گرده زدن، چه تاثیری داره؟ نکته: اگه دوباره مقداری رو به تابع g گره بزنیم چی میشه؟دوباره بایند کردن مقدار fullName به تابع g و صدا زدن تابع hمی‌بینیم که مقدار اسم جدید name اعمال نشد چون قبلا عمل بایند کردن رو انجام داده بودیم.رفتار this رو بیشتر بررسی کنیمیک آبجکت به اسم o تعریف کردیم. این آبجکت fullName و تابع f و g رو همراه خودش داره.تعریف آبجکت o که دو تابع f و g و همچنین مقدار fullName رو همراه خودش دارهکنسول لاگ اولی چرا Ali رو چاپ می‌کنه ؟‌خوب بریم ببینیم این this چیکار می‌کنه؟این this عزیز میاد توی آبجکتی که صداش زدیم میگرده ببینه چیزی به اسم fullName هست یا نهو میبینه که بعله آبجکت o مقدار fullName رو و ازش استفاده می‌کنه.اما در مورد کنسول لاگ دوم چی؟توی آبجکت o دنبال تابع g میگرده و پیداش میکنه. حالا دنبال fullName توی o میگرده ؟ نه دیگه الان دیگه کاری به o نداره و توی g دنبالش می‌گرده که چون قبلا بهش بایند کردیم همون مقدار Nima رو برمیگردونه.این this توی arrow function چه طوری کار میکنه؟یک آبجکت به اسم o می‌سازیم که دوتا عضو داره، اولی تابع معمولی و دومی arrow function:آبجکت o با دو تابع معمولی و تابع arrow که می‌خواهیم رفتار this رو بررسی کنیمتابع معمولی رو قبلا هم باهاش کار کردیم و دیدیم که وقتی توی اسکوپش از this استفاده می‌کنیم ، اون this به خود شی سازنده اش اشاره می‌کنه پس طبیعی هست که لاگ اولی true باشه و دومی false باشه.اما این موضوع توی arrow function متفاوت هست. this اینجا دیگه به خود آبجکت سازنده اشاره نمی‌کنه و به اسکوپ global که همون شی window در محیط browser و global در محیط node هست اشاره می‌کنه.بد نیست که این نکته رو به زبان اصلی هم بشنوید:With arrow function "this" is bound to enclosing scope at creation time and can not be changed by bind, apply or call methods. The arrow function attached to "o" was created in the scope of "window" and run in the scope of "o"امیدوارم که با این مثال با this و bind بیشتر آشنا شده باشید. البته این نکات به همین جا ختم نمیشه اما با همین نکات دید خوبی به این دو موضوع پیدا می‌کنید. نکات تکمیلی رو هم تو نوشته های بعدی ارائه می‌کنم.سایر نوشته های من در ویرگول: http://vrgl.ir/BwPRq http://vrgl.ir/kAHpj http://vrgl.ir/u1wC0 Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

بایند کردن آبجکت در جاواسکریپت

Nima Mohamadian — Tue, 11 Feb 2020 15:46:19 +0330

یکی از قسمت های گیج کننده جاواسکریپت bind و this هست. بایند کردن آبجکت در جاواسکریپت رو با یک مثال ساده توضیح میدم و در آخر یک مثال از دنیای واقعی براتون میزنم.بایند کردن آبجکت در جاواسکریپتآبجکت ساده زیر رو در نظر بگیرید:تعریف آبجکت person با دو مشخصه fullName و welcomeاین آبجکت دوتا مشخصه fullName و welcome داره که welcome به صورت تابع هست. this توی این تابع به صورت خیلی مشخص داره به fullName که خودش توی همین آبجکت هست اشاره میکنه ( ظاهرا اینجوریه !)می‌خواهیم با روش های مختلف این تابع داخلی رو صدا بزنیم تا مقدار خروجی رو ببینیم:انواع روش های صدا زدن fullName و تابع welcomeخط اول که هیچی خیلی ساده است، مقدار fullName رو چاپ می‌کنه.خط دوم، تابع welcome صدا زده میشه پس لازم هست که مقدار this رو داشته باشه ، مقدار this اینجا به person object اشاره می‌کنه و مقدار fullName هم توی این آبجکت تعریف شده .خط سوم اما نکته داره : ما اومدیم یک مقدار ثابت ساختیم و همون کد خط دوم رو بهش اختصاص دادیم و در خط بعدی اونو صدا زدیم. اما نتیجه این دفعه کاملا با چیزی که انتظار داشتیم تفاوت داشت. چرا ؟برای اینکه دلیل undefined شدنش رو بدونید، مقدار تابع welcome رو جایگزین کنید:جایگزین کردن مقدار person.welcome با مقدارش الان this داره به چی اشاره می‌کنه ؟‌اینجا دیگه نه آبجکتی هست نه fullName پس کاملا طبیعی هست که undefined باشه.اینجا this داره به global object اشاره می‌کنه و global object چیزی به اسم fullName توی خودش نداره پس مقدارش undefined میشه. global object توی محیط مرورگر window هست و توی محیط node مقدار global هست.اما راه حلش چیه؟ اگه بخواهیم بهش بگیم که this بجای global object، مقداری دلخواه رو بگیره باید چیکار کنیم؟‌ بایند کردن آبجکت در جاواسکریپت!بایند کردن آبجکت person به welcomeFunction بهش گفتیم وقتی داری دنبال this.fullName می‌گردی برو به آبجکت person و اونجا دنبالش بگرد! به اصطلاح آبجکت person رو به تابع welcomeFunction گره زدیم و متغیر boundWelcomeFunction رو ساختیم. می‌تونیم همین کارو با مقدار دلخواه fullName انجام بدیم:بایند کردن مقدار دلخواه به تابع welcomeFunctionمثال از دنیای واقعیوقتی که می‌خواهیم با DOM (مرورگر) کار کنیم this به آبجکت window اشاره می‌کنه ( توی Node به global و توی محیط browser به window) و ما برای اینکه بتونیم از آبجکت خودمون استفاده کنیم عمل بایند کردن رو انجام میدیم.بایند کردن آبجکت ، دستکاری DOM با استفاده از جاواسکریپتنکته کنکوری :) یک نکته جالب که ممکنه تو مصاحبه های جاواسکریپتی اونو بپرسند رو میخواهم اینجا بگم. همین آبجکت person رو اگه یه تغییر کوچیک بهش بدیم و fullName رو به name تغییر بدیم چه مقداری بعد از صدا زدن welcomeFunction چاپ میشه؟تعریف شی person این بار با یک مشخصه name که نکته دارهاگر فکر می‌کنید که همچنان Hi undefined چاپ میشه باید بگم که یه نکته ریز رو دقت نکردین. شی عمومی window که this به اون اشاره داره یک مقدار name داره که یک string خالی هست پس خروجی کنوسول مقدار Hi میشه!برای دیدن مقدار شی window کافیه که توی کنسول مرورگر خودتون بنویسد this و enter رو فشار بدید.سایر مقاله های من در ویرگول : http://vrgl.ir/yy9ZN http://vrgl.ir/zkV80 http://vrgl.ir/GaRXJ Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

الگوهای ری اکت - ۴

Nima Mohamadian — Wed, 01 Jan 2020 11:20:21 +0330

تو این مقاله که آخرین قسمت از سری الگوهای ری اکت هست، میخوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.برای مطالعه قسمت های قبلی: http://vrgl.ir/u1wC0 http://vrgl.ir/3hD8V http://vrgl.ir/Ahf19 سرفصل های این قسمت:Container component , Higher-order component, State hoisting, Controlled inputالگوهای ری اکتاستفاده از Container componentقبل از هر چیز، نگاهی به تعریف کانتینر داشته باشیم:کانتینر ، وظیفه گرفتن دیتا و رندر کردن کامپوننت های مربوطه رو داره.کامپوننت CommentList زیر رو در نظر بگیرید که با مپ زدن روی لیستی از کامنت ها، اسم نویسنده و متن نوشته شده رو نمایش میده:const CommentList = ({ comments }) => (

{comment.body}-{comment.author}

);می‌تونیم کانتینر جدیدی بنویسیم که وظیفه گرفتن اطلاعات و همچنین رندر کردن اونها رو داشته باشه. تو تکه کد زیر از ajax برای درخواست زدن به سرور استفاده شده. (البته می‌تونید از fetch و axios استفاده کنید)class CommentListContainer extends React.Component { state = { comments: [] } componentDidMount() { $.ajax({ // اینکه اینجا چه اتفاقی داره می‌افته مهم نیست url: "/my-comments.json", dataType: 'json', success: comments => this.setState({comments: comments}); }) } render() { return } } با لود شدن این کامپننت، درخواست Ajax زده می‌شه و داده ها به استیت کامپوننت CommentListContainer فرستاده میشه .داده های این state به کامپوننت CommentList داده میشه تا اونجا رندر بشه.استفاده از Higher-order component قبل از هر چیز،‌ نگاهی به تعریف تابع مرتبه بالا داشته باشیم:تابعی که تابع دیگری در ورودی می‌گیره و یا تابعی رو برمی‌گردونهکامپوننت مرتبه بالا چیه؟کامپوننت Greeting رو در نظر بگیرید:const Greeting = ({ name }) => { if (!name) { return

Connecting...

; } return

Hi {name}!

; }; اگر این کامپونننت، پراپسی به اسم name بگیره، اون اسم رو همراه با کلمه "سلام" به نمایش میزاره در غیر این صورت عبارت Connecting... رندر میشه.حالا چه جوری کامپوننت مرتبه بالا رو پیاده سازی کنیم؟const Connect = ComposedComponent => class extends React.Component { constructor() { super(); this.state = { name: "" }; } componentDidMount() { // this would fetch or connect to a store this.setState({ name: "Michael" }); } render() { return ; } }; تابع Connect کامپوننت ComposedComponent رو برمی‌گردونه. این کامپوننت، Name که به عنوان آرگومان بهش پاس می‌دیم رو می‌گیره (که اینجا Michael هست) و رندر می‌کنه. آخرین قدم، قرار دادن کامپوننت Greeting در تابع Connect که قبلا نوشتیم ( به این کار می‌گیم رپ کردن). در نتیجه قبل از لود شدن کامپوننت، رو صفحه عبارت Connecting... و بعد از لود شدن صفحه عبارت Hi Michael نمایش داده می‌شود.const ConnectedMyComponent = Connect(Greeting);این یکی از قدرتمندترین الگوها برای گرفتن اطلاعات و پاس دادنش به کامپوننت های تابعی هست.استفاده از State hoistingکامپوننت های تابعی بر خلاف کلاس کامپوننت ها نمی‌تونن state داشته باشند ( تا قبل از اومدن ری اکت هوک این شکلی بود اما الان دیگه این جوری نیست)‌. به کامپوننت Name دقت کنید. تابع به صورت پراپس به این کامپوننت پاس داده می‌شه. توی کامپوننت پدر هم این مقدار رو به پاس میدیم. به این کار state hoisting گفته می‌شه.class NameContainer extends React.Component { render() { return alert(newName)} />; } } // کامپوننت اسم که به صورت فانکشنال نوشته شده const Name = ({ }) => ( (e.target.value)} /> );مثال پایین که در واقع همون مثال کامل شده بالا هست به ما نشون میده که به چه سادگی می‌تونیم تغییرات استیت رو با کامپوننت Name که داشتیم همراه کنیم:class NameContainer extends React.Component { constructor() { super(); this.state = { name: "" }; } render() { return this.setState({ name: newName })} />; } }در واقع state بجای اینکه توی کامپوننت Name باشه، به کانتینرش رسید. اینجوری به راحتی کامپوننت فانکشنالی نوشتیم که استیت نداره (ولی از طریق کانتینر بهش استیت دادیم) و بدون در نظر گرفتن مقدار همه جا کار می‌کنه !در آخر توضیح این نکته ضروری هست که این الگو ، محدود به فانکشال کامپوننت نیست و به راحتی با کلاس کامپوننت ها قابلیت پیاده سازی داره.استفاده از Controlled inputکامپوننت ساده و uncontrolled زیر رو در نظر بگیرید:می‌خواهیم این کامپوننت رو به کامپوننت Controlled تبدیل کنیم. با نوشتن state این کارو شروع می‌کنیم:class ControlledNameInput extends React.Component { constructor() { super(); this.state = { name: "" }; // قرار دادن یک اسم خالی برای نمایش مقدار اولیه } render() { return ; } }خوب تنها کاری که باید انجام بدیم، قرار دادن تابع هست که وظیفه تغییر state رو داره:return ( this.setState({ name: e.target.value })} /> );این ۴ نوشته با اسم الگوی ری اکت همین جا به پایان می‌رسه، سعی کردم با بیانی ساده بنویسم. با گفتن نظراتون به بهتر شدن نوشته هام کمک کنید. ممنونسایر مقاله های من در ویرگول: http://vrgl.ir/YhkrX http://vrgl.ir/JgETy http://vrgl.ir/aE7sU Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

الگو‌های ری اکت - ۳

Nima Mohamadian — Sun, 22 Dec 2019 11:11:18 +0330

تو این مقاله می‌خوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.برای مطالعه قسمت های قبلی: http://vrgl.ir/u1wC0 http://vrgl.ir/3hD8V سرفصل های این قسمت:Proxy components, Style component, Event switch, Layout componentالگوهای ری کتاستفاده از Proxy componentدکمه ها همه جا توی وب اپلیکیشن ها هستند. معمولا برای نوشتن یک دکمه از کد زیر استفاده می‌کنیم: // استفاده از Style componentمثل پروکسی کامپوننت ، اما این بار با طعم استایل!یک دکمه داریم که می‌خواهیم با کلاس primary اون رو نمایش بدیم:'درنهایت این ۳ تا کامپوننت که می‌بینید یکی هستند:

بایند کردن آبجکت به تابع در جاواسکریپت

Nima Mohamadian — Sat, 21 Dec 2019 15:30:07 +0330

تو این نوشته کوتاه قصد دارم بایند کردن آبجکت به تابع در جاواسکریپت رو با یک مثال خیلی ساده نشون بدم.بایند کردن آبجکت به تابع در جاواسکریپتآبجکت زیر رو در نظر بگیرید:آبجکت ساده با ۳ مشخصه برند و نوع و رنگ ماشینبه نظرتون اجرای کد زیر چه نتیجه ای داره ؟‌لاگ گرفتن از مشخصه برند خب قاعدتا باید جواب درست رو داده باشید، چون آبجکت this هنوز هیچ صفتی به اسم brand نداره !بریم یه چندتا تابع کمکی برای خودمون بنویسیم که بتونیم ازش استفاده کنیم:توابع کمکی برای صدا زدن مشخصه های آبجکت ماشینکاری که این توابع انجام میدن خیلی ساده است. حالا اگه اونارو صدا کنیم چه اتفاقی می‌افته ؟‌صدا زدن توابع کمکی برای رسیدن به مشخصه های شی ماشین تو هر دوتا خط کد بالا ، نتیجه undefined هست!بریم عمل بایند کردن (گره زدن / چسباندن) رو انجام بدیم:بایند کردن با روش ساده بالاخره می‌بینیم که نتیجه دلخواه ما به دست اومد. بایند کردن رو می‌تونستیم با یک روش دیگه هم انجام بدیم:روش جایگزین برای بایند کردن آبجکت به تابعتو این روش، اول یک تابع کمکی دیگه نوشتیم و بعد از اینکه عملیات bind رو انجام دادیم، تابع کمکی رو فراخوندیم و نتیجه مورد نظر ما چاپ شد.امیدوارم مفید بوده باشه.سایر نوشته های من در ویرگول: http://vrgl.ir/yy9ZN http://vrgl.ir/zkV80 https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff Follow me on social media Telegram Facebook Twitter Linkedin Virgool

مقایسه سطحی و عمیق در جاواسکریپت

Nima Mohamadian — Sat, 14 Dec 2019 11:00:23 +0330

یکی از دلایل عجیب بودن جاواسکریپت، رفتار متفاوت این زبان تو جاهای مختلف هست. تو زبان جاواسکریپت، رفتار عملگر مقایسه سطحی (( == )) و مقایسه عمیق (( === ))‌ در جاهای مختلف می‌تونه متفاوت باشه. بریم ببینیم که مقایسه سطحی و عمیق تو جاواسکریپت چی هست؟تو این نوشته قصد دارم مقایسه سطحی و عمیق در جاواسکرپیت رو بررسی کنم (البته به صورت خیلی ساده) و با استفاده از ( )Object.is راهکار بهتری برای مقایسه ارائه بدم.مقایسه سطحی و عمیق در جاواسکریپت اگر درمورد داینامیک تایپ بودن جاواسکریپت اطلاعات بیشتری می‌خواهید، به این مقاله مراجعه کنید: https://virgool.io/JavaScript8/استاتیک-تایپ-و-داینامیک-تایپ-c8eopdnug3xt ازونجایی که جاواسکریپت برای متغیرهاش تایپ در نظر نمی‌گیره، موقع چک کردن شرط مساوی و برابری، می‌تونه به ۲ شکل برخورد کنه. مقایسه کم عمق و مقایسه عمیق.مقایسه عمیق، علاوه بر مقایسه مقدار، نوع متغیر رو هم مقایسه می‌کنه.مقایسه کم عمق کاری به نوع متغیر نداره و همین موضوع باعث می‌شه تبدیل خودکار یک نوع به نوعی دیگر (coercion) به وجود بیاد. رفتار جاواسکریپت با عملگر مساویبرای مثال به این مقایسه های زیر دقت کنید:مقایسه در جاواسکریپتاین مواقع که جاواسکریپت رفتاری گیج کننده داره استفاده از متد Object.is می‌تونه کمک کنه!استفاده از Object.isبهترین و مطمئن ترین روش برای مقایسه دو چیز تو جاواسکریپت استفاده از متد Object.is هستبرای اینکه همه حالت های مقایسه سطحی، مقایسه عمیق و Object.is رو ببینید به شکل زیر دقت کنید:جدول مقایسه عملگر تساوی در جاواسکریپتدر مورد عملگر تساوی جاواسکریپت و نحوه مقایسه اش بحث های عمیقی وجود داره که امیدوارم در آینده بتونم در مورد اونها هم بنویسم.سایر نوشته های من در ویرگول: https://virgool.io/@novonimo/کلوژر-جاواسکرپیت-در-۱-دقیقه-um6jmr9unnyk https://virgool.io/JavaScript8/معرفی-flow-برای-جاواسکرپیت-ogssae9iaif4 https://virgool.io/JavaScript8/معرفی-storybookjs-ub1k1h88bda6 https://virgool.io/JavaScript8/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-اول-gs7mlxwoxu57 Follow me on social mediaTelegramFacebookTwitterLinkedinVirgool

الگو‌های ری اکت - ۲

Nima Mohamadian — Fri, 13 Dec 2019 12:25:28 +0330

معرفی ۱۰ فریمورک برتر node.js در سال ۲۰۱۹

Nima Mohamadian — Mon, 09 Dec 2019 10:41:16 +0330

تو این نوشته می‌خوام ۱۰ تا از فریمورک های برتر node.js رو معرفی کنم. با گسترش جاواسکرپیت و متولد شدن node.js ، شاهد ظهور فریمورک های جاواسکریپتی سمت بک اند هستیم. از اونجایی که این زبان ساده است و خیلی ها مشغول توسعه اون هستند، تو مدت کوتاه فریمورک ها و لایبرری های زیادی براش ساخته شده.این پست نوشته ، ترجمه آزادی از این مقاله است.معرفی ۱۰ فریمورک برتر node.js در سال ۲۰۱۹برای انتخاب از بین فریمورک های نود، فاکتور های زیادی وجود داره. اما ۲ نکته کلی وجود داره:۱- توانایی های فریمورک و مقیاس پذیری (scalability)۲- راحتی توسعه دهنده در زمان توسعههمه فریمورک های نود بر روی ماژول http ساخته شده اند. بعضی از فریمورک های نود تاثیر چشمگیری روی کارکرد سرور میزارن (باعث افزایش فشار به سرور و یا کاهش فشار میشن) فریمورک هایی مثل Express.js و Fastify.js زمانی بهترین انتخاب هستند که سرویس در حال توسعه شما کوچیک باشه و در آینده نیاز به مقیاس پذیری (scalability) بزرگی باشه اما اگر روی پروژه ای با ابعاد متوسط کار می‌کنید بهتره که دنبال فریمورک هایی باشید که به شما کمک کنند کدهایی با ساختارر بهتر و تمیز تر بنویسید.بریم سراغ معرفی این ۱۰ فریمورک۱۰ - فریمورک Adonisیک فریمورک بر بستر MVC است که قابلیت ساختن Rest API توسط JWT و دسترسی به دیتابیس رو داره.از مزیت های آدونیس از رابط CLI برای سرعت بخشیدن استفاده می‌کنه.$ npm i -g @adonisjs/cli $ adonis new adonis-tasks $ adonis serve --devساختار MVC باعث میشه که زمان پیکربندی وب سرور و ... کاهش پیدا کنه.همچنین سایر نوشته های من در ویرگول: https://virgool.io/@novonimo/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D8%AA%D9%84%D8%AE-%D9%85%D9%86-%D8%A7%D8%B2-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C-rkjs2uasy7ao https://virgool.io/@novonimo/%DA%AF%DB%8C%D8%AA-%DA%AF%DB%8C%D8%AA%D9%87%D8%A7%D8%A8-%D9%88-%DA%AF%DB%8C%D8%AA-%D9%84%D8%A8-umq6qkstrfwi ۹- فریمورک Feathersیک فریمورک سبک برای نود هست که برای اپلیکشن های realtime بسیار مناسب هست. در ادامه مثالی از یک تکه کد با Feathers.js آورده شده که به صورت realtime و WebSockets نوشته شده:const feathers = require('@feathersjs/feathers'); const express = require('@feathersjs/express'); const socketio = require('@feathersjs/socketio'); const memory = require('feathers-memory'); // Creates an Express compatible Feathers application const app = express(feathers()); // Parse HTTP JSON bodies app.use(express.json()); // Parse URL-encoded params app.use(express.urlencoded({ extended: true })); // Add REST API support app.configure(express.rest()); // Configure Socket.io real-time APIs app.configure(socketio()); // Register a messages service with pagination app.use('/messages', memory({ paginate: { default: 10, max: 25 } })); // Register a nicer error handler than the default Express one app.use(express.errorHandler()); // Add any new real-time connection to the `everybody` channel app.on('connection', connection => app.channel('everybody').join(connection)); // Publish all events to the `everybody` channel app.publish(data => app.channel('everybody')); // Start the server app.listen(3030).on('listening', () => console.log('Feathers server listening on localhost:3030') );۸- فریمورک Sailsیکی از قدیمی ترین های این عرصه هست که آزمایش خودش رو تو این سال ها پس داده. نصب و راه اندازی این فریمورک در ۴ مرحله ساده و با استفاده از ابزار CLI به راحتی امکان پذیر هست.$ npm install sails -g $ sails new test-project $ cd test-project $ sails lift۷- فریمورک Loopbackاین فریمورک توسط شرکت مطرح IBM توسعه داده شده و توسط کمپانی های مطرحی مثل GoDaddy و Symantec و همچنین خود IBM استفاده می‌شه. نسخه های منتشر شده این فریمورک به صورت ۱۸ ماهه پشتیبانی می‌شه (Long-Term Support)این فریمورک هم از CLI استفاده می‌کنه :$ npm i -g @loopback/cliحالا برای ساختن یک پروژه :$ lb4 appمسیر API و سایر کنترلر ها این شکلی هستند:import {get} from '@loopback/rest'; export class HelloController { @get('/hello') hello(): string { return 'Hello world!'; } }۶- فریمورک Fastifyاین فریمورک طراحی شد تا با ۶۵٪ افزایش راندمان، جای Express.js رو بگیره.// Require the framework and instantiate it const fastify = require('fastify')({ logger: true }) // Declare a route fastify.get('/', (request, reply) => { reply.send({ hello: 'world' }) }) // Run the server! fastify.listen(3000, (err, address) => { if (err) throw err fastify.log.info(`server listening on ${address}`) })سادگی و راحتی استفاده از Fastify و همچنین شباهت خیلی زیاد به ٍExpress.js باعث می‌شه زمانی که مشکل کارایی روی سرور داریم ، گزینه ای بهتر از Fastify نداشته باشیم.۵- فریمورک Restifyاین فریمورک با هدف دستیابی به فریمورک آینده Node.js در زمینه وب پا به عرصه گذاشت. NPM که معرف همه دولوپرهای جاواسکریپتی هست از Restify استفاده می‌کنه. همچنین کمپانی های مطرحی مثل Netflix , Pinterest و Napster از این فریمورک استفاده میکنن.استفاده از این فریمورک به سادگی آب خوردن هست:const restify = require('restify'); function respond(req, res, next) { res.send('hello ' + req.params.name); next(); } const server = restify.createServer(); server.get('/hello/:name', respond); server.head('/hello/:name', respond); server.listen(8080, function() { console.log('%s listening at %s', server.name, server.url); });۴- فریمورک Nestمعماری این فریمورک مثل Angular.js هست پس برای توسعه دهنده های فرانت اند آشنا به نظر می‌رسه و توسعه اش کار سختی نیست.import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.setViewEngine('hbs'); await app.listen(3000); } bootstrap();۳- فریمورک Hapiهپی یکی از ۳ فریمورک بزرگ نود هست. هپی با داشتن اکوسیستمی از کتابخونه ها و پلاگین های مختلف یکی از بهترین فریمورک های برای سفارشی سازی است.مثالی ساده از یک وب سرور هپی :const Hapi = require('@hapi/hapi'); const init = async () => { const server = Hapi.server({ port: 3000, host: 'localhost' }); await server.start(); console.log('Server running on %s', server.info.uri); }; init();۲- فریمورک Koa این فریمورک توسط تیم پشتیبان Express با هدف سادگی ، قدرت و کم حجمی برای وب طراحی شده.کوآ با استفاده از توابع جنراتور و دسترسی به کالبک ها، کنترل خطاها رو راحت تر می‌کنه. کوآ از هیچ MiddleWare استفاده نمیکنه و این لذت کد زدن سمت سرور رو بیشتر می‌کنه.const Koa = require('koa'); const app = new Koa(); app.use(async ctx => { ctx.body = 'Hello World'; }); app.listen(3000);۱- فریمورک Expressقطعا پادشاه فریمورک های نود همین فریمورک Express هست. پیش بینی ها خبر از رسیدن به رکورد ۲ میلیون دانلود در روز (تا انتهای سال ۲۰۱۹) رو میدن.برای نصب اکسپرس:$ npm install expressراه اندازی یک API ساده:const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port ${port}!`)) سایر مقاله های من در ویرگول: https://virgool.io/@novonimo/%DA%A9%D9%84%D9%88%DA%98%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%B3%DA%A9%D8%B1%D9%BE%DB%8C%D8%AA-%D8%AF%D8%B1-%DB%B1-%D8%AF%D9%82%DB%8C%D9%82%D9%87-um6jmr9unnyk https://virgool.io/JavaScript8/%D8%A7%D9%86%D9%88%D8%A7%D8%B9-%D8%AD%D9%84%D9%82%D9%87-%D8%B1%D9%88%DB%8C-%D9%84%DB%8C%D8%B3%D8%AA-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-vhrmccawyf89 https://virgool.io/JavaScript8/%D9%88%DB%8C%DA%98%DA%AF%DB%8C-%D9%87%D8%A7%DB%8C-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%A7%DA%A9%D9%85%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DB%B2%DB%B0%DB%B1%DB%B9-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-gs7mlxwoxu57 https://virgool.io/JavaScript8/%D8%A2%D8%A8%D8%AC%DA%A9%D8%AA-%D8%A8%D8%AF%D9%88%D9%86-%D8%A7%D8%AB%D8%B1-%D8%AC%D8%A7%D9%86%D8%A8%DB%8C-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-wswtjtwpguuq Follow me on social mediaTelegram Facebook Twitter Linkedin Virgool

الگوهای ری اکت - قسمت ۱

Nima Mohamadian — Thu, 05 Dec 2019 09:54:58 +0330

تو این مقاله میخوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.سر فصل های بیان شده در قسمت اول :Functional component, Destructuring drops, JSX spread attributes, Merge desctructured props with other values, Conditional renderingالگوهای ری اکت استفاده از Function component استفاده از کامپوننت های تابعی در ری اکت بسیار متداول است. کلاس کامپوننت ها مزیت استفاده از state و همچنین life cycle methods مثل componentDidMount رو دارند . هرچند که از ری اکت ۱۶.۸ به لطف اضافه شدن Hook ها میشه از state و life cycle methods در فانکشنال کامپوننت ها استفاده کرد.functional component simple exampleاستفاده از فانکشنال کامپوننت ها در ری اکت باعث میشه که کدها به شدت کاهش پیدا کنه. در ضمن دیباگ کردن فانکشنال کامپوننت ها هم کار ساده تری است.توجه کنید که هر فانکشنال کامپوننت باید در انتها یک return داشته باشه! یعنی چیزی رو برگردونه.استفاده از Destructuring propsاز اکماسکریپت ۲۰۱۵ به بعد این ویژگی به جواسکریپت اضافه شد. برای objectobject destruction برای arrayarray destructionخوب بعضی وقتا هم پیش میاد که ما فقط یک مقدار رو از تو یک شی یا یک لیست می‌خواهیم و بقیشو احتیاجی نداریم:object destruction with restPropsاینجا ما از پراپس name استفاده کردیم و بقیه پراپس های موجود رو با سه نقطه توی rest operator ریختیم. در صورتی که در مورد این ویژگی چیزی نمی‌دونید جای نگرانی نیست، نکته بعدی رو بخونید.استفاده از JSX spread attributesاین از ویژگی های JSX است و خیلی خیلی کاربردی!با گذاشتن ۳ تا نقطه پشت سر یک شی یا لیست می‌تونیم اون رو باز کنیم و همه پراپس هاشو بیرون بکشیم.مثال قبلی رو یادتونه ؟‌ما از پراپس name استفاده کردیم و بقیه پراپس هارو بدون اینکه بدونیم چیا هستن و حتی چند تا هستن به مقدار restProps دادیم. حالا میخواهیم این پراپس هارو به المان div خودمون بدیم .برای مثال این پراپس ها میتونن سایر ویژگی های مورد نیاز یک المان باشند.spread operatorبرای مثال سایر پراپس ها که به div دادیم میتونه این شکلی باشه:spread operator in div tagاستفاده از Merge destructured props with other valuesیکی از ویژگی های خوب ری اکت اینه که می‌تونیم چندین ویژگی رو باهم ترکیب کنیم. از این ویژگی معمولا برای ترکیب css ها به کار میره! برای مثال این کامپوننت رو در نظر بگیرید:custom buttonیک دکمه نوشتیم و براش یک کلاس به اسم btn در نظر گرفتیم. حالا میخواهیم از این دکمه تو جاهای دیگه هم استفاده کنیم:merge custom button's classNameاینجا یک کلاس جدید بهش دادم. اسم این کلاس جدید detele-btn هست. اما چه اتفاقی برای btn افتاددر واقع کلاس جدیدی که استفاده کردیم کلاس قبلی رو override کرد.ولی اگه بخواهیم هر دوتا کلاس رو داشته باشیم چی ؟‌ یعنی ویژگی های مشترکشون override شه و ویژگی های غیر تکراری همشون باشه!راهش اینه که از join استفاده کنیم و همه کلاس هایی که میخواهیم رو باهم ترکیب کنیم:merging classNamesمقدار className="" هم برای اینه که اگه این کلاس تعریف نشده بود و توی پراپس ها وجود نداشت ، مقدار undefiend نگیره. به این شکل کلاس btn با همه ویژگی هایی که از طریق پراپس className اومدن ترکیب میشه!استفاده از Conditional renderingخیلی وقتا بعد از بررسی یک شرط و در صورت صحیح بودنش نیاز داریم که چیزی رو نمایش بدیم و در غیر این صورت نیازی به نمایشش نداریم. برای این کار از رندر شرطی استفاده می‌کنیم:conditional operator with ternary operator مقدار condition بررسی میشه و در صورتی که صحیح باشه ، مقدار Rendered when truthy روی صفحه نمایش داده میشه و در غیر این صورت عبارت Rendered when falsy نمایش داده میشه.برای نمایش شرطی، من از ternary operator استفاده کردم. در صورتی که با این سینتکس آشنایی ندارین باید بگم که ساده شده عبارت if-else است.بعضی مواقع هم هست که نیاز داریم تا درصورت صحیح بودن شرطمون مقداری نمایش داده بشه و در غیر این صورت هیچ اتفاقی نیوفته . برای این منظور از short circuit استفاده میکنیم. به این شکل:conditional rendering with short circuitبرای اینکه خیلی طولانی نشه این مقاله رو همینجا تمومش میکنم و ادامه مقاله رو در قسمت های بعدی منتشر می‌کنم. سایر مقاله های من در ویرگول: https://virgool.io/iran-react-community/آشنایی-با-الگوریتم-reconciliation-ری-اکت-nnmzcqkj4idr https://virgool.io/iran-react-community/فانکشنال-کامپوننت-در-مقابل-کلاس-کامپوننت-b8bhzvut2zp1 https://virgool.io/iran-react-community/ریداکس-به-زبان-ساده-emxqh7w4gnpk Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

کلوژر جاواسکرپیت در ۱ دقیقه

Nima Mohamadian — Thu, 05 Dec 2019 09:24:05 +0330

یکی از قسمت های گیج کننده جاواسکریپت، بحث کلوژر هاست. قبل از هرچیز نگاهی به تعریف کلوژر بندازیم:تابعی که از یک متغیر خارجی (‌که تو اسکوپ خود تابع نیست و از یک اسکوپ بالاتر می‌آید) استفاده می‌کنه.کلوژر جاواسکرپیت در ۱ دقیقهخوب بریم همین تعریف رو توی کد ببینیم:تعریف تابع addTwoاین تابع یک ورودی می‌گیره و با عدد ۲ جمع می‌‌کنه و نتیجه رو برمی‌گردونه. اگر همین تکه کد رو توی کنسول مرورگر اجرا کنید می‌بینید که خروجی برابر ۵ می‌شه. خیلی ساده بود، نه ؟اگه بخواهیم همین تابع رو با کلوژر تعریف کنیم کافیه که:تبدیل تابع addTwo به closureتنها کاری که کردیم مقدار پارامتری که به تابع addTwo پاس داده بودیم رو از بیرون اسکوپ تابع تعریف کردیم و بهش دادیم. در خط آخر کد هم بدون اینکه پارامتری به تابع بدیم مقدار خروجی قبلی رو مشاهده می‌کنیم.در آینده مقاله های بیشتری از کلوژر و موارد استفاده اش می‌نویسم.سایر مقاله های من در ویرگول: https://virgool.io/JavaScript8/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-اول-gs7mlxwoxu57 https://virgool.io/@novonimo/احترام-stackoverflow-به-مخاطبان-yj67ejnpvime https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

احترام Stackoverflow به مخاطبان

Nima Mohamadian — Fri, 15 Nov 2019 09:03:21 +0330

همه ما برنامه نویس ها و حتی خیلی از غیر برنامه نویس ها سایت مطرح stackoverflow رو می‌شناسیم. خود من به صورت روزانه بهش سر میزنم، خیلی وقتا از سرچ گوگل بهش می‌رسم و معمولا کارم رو باهاش پیش می‌برم. امروز رویکردی جالبی ازشون دیدم که باعث شد در موردش بنویسم.احترام StackOverflow به مخاطبان در هنگام در دسترس نبودن سایتامروز که طبق معمول همیشه به استک سر زدم دیدم که سایت از دسترس خارج شده!برای مخاطب این توضیحات رو گذاشته بودند:خطای استک اور فلو برای مختل بودن سایتشونتوضیح جالبی بود ، با یک کار طنز خلاقانه هم یه سری خطاهای معروف رو نشون دادند. توضیحات رو که خوندم دیدم راه دسترسی گذاشتن و گفتن که بعد از درست شدن سایت ، از طریق توئیتر این خبر رو منتشر می‌کنن.یاد خیلی از سایت های خودمون افتادم که هیچ احترامی برای مخاطبشون قائل نیستند و زمانی که مشکلی پیش میاد نهایتا با یک خط توضیح که سایت مشکل داره از کنارش رد می شن. خوب ما هم متوجه می‌شیم که وقتی سایتی نمیاد یعنی مشکلی داره اما سوالم اینه که این مشکل کی حل می‌شه ؟‌ و وقتی که حل شد ما چه جوری باید با خبر بشیم ‌؟‌خیلی از سایت ها هم در اوج خلاقیت می‌نویسند:‌ یکی پاش رفته رو سیم !!مثلا فرق فیلیمو و آپارات تو این زمینه اینه که یه پاپ کرن هم اضافه شده:رویکرد فیلیمورویکرد آپاراتمن به عنوان مخاطب دوست دارم بدونم چه موقع پاش رو از رو سیم بر می‌داره ؟!‌ این که کی الان پاش رو سیم هست و چرا رفته رو سیم برای من مهم نیست.یک کسب کار بر بستر اینترنت، یک سایت خبری و یا یک سایت پر بازدید و معروف به خاطر بازدید مخاطبان پیشرفت می‌کنه. مخاطب حق داره بدونه کی میتونه به کاری که داره می‌رسه و براش برنامه ریزی کنه.معمولا تو ایران این کار هارو نیمه شب انجام میدن تا کاربر کمتری آنلاین باشه و به خدماتی که می‌خواد نرسه. برای مثال چند وقت پیش می‌خواستم بلیط اتوبوس رزرو کنم و سایت پایانه مشکل داشت. من نمی‌دونستم که این مشکل کی حل می‌شه ؟‌ برم سراغ قطار ؟ ‌صبر کنم؟‌ stackoverflowبه عنوان کسی که چند سالی وبگردی می‌کنه دوست دارم یه همچین فرهنگی هم بین سایت های ایرانی رواج پیدا کنه.به امید این که سایت های ایرانی ما هم به مرور از این دست نکته های کوچیک و تاثیر گذار استفاده کنند. برای فردایی بهتر هر جایی هستیم، از خودمون شروع کنیم.اگر شما هم شرایط مشابهی رو تجربه کردید می‌تونید تو نظرات برام بنویسید. ممنون که وقت گذاشتید.سایر مقاله های من در ویرگول: https://virgool.io/JavaScript8/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-اول-gs7mlxwoxu57 https://virgool.io/@novonimo/اسم-انواع-symbole-های-کیبرد-کامپیوتر-n5hu49ukjnke https://virgool.io/@novonimo/چرا-ریداکس-qlhmkcxf6dzv Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

ویژگی‌ های جدید اکماسکریپت ۲۰۱۹ - قسمت دوم

Nima Mohamadian — Sat, 31 Aug 2019 15:41:41 +0430

ویژگی‌ های جدید اکماسکریپت ۲۰۱۹ - قسمت اول

Nima Mohamadian — Sat, 31 Aug 2019 15:39:42 +0430

هر سال با ارائه استانداردهای جدید اکماسکریپت، ویژگی های جدیدی هم به جاواسکریپت اضافه می‌شه. با انتشار ویژگی های جدید اکماسکریپت (در تابستان ۲۰۱۹) تصمیم گرفتم این مقاله رو بنویسم. ویژگی های نسخه جدید اکماسکریپت در نود ، و همچنین مرورگرهای کروم، فایرفاکس و سافاری قابل دسترس هستند و برای استفاده از این ویژگی ها تو نسخه های قدیمی تر می‌تونیم از Babel استفاده کنیم.خوب بریم ببینیم ویژگی های جدید اکماسکریپت ۲۰۱۹ چی هست. برای درک بهتر هر بخش، یک مثال ساده هم ارائه شده. این مقاله قسمت دوم هم داره و تو هر قسمت ۳ تا از ویژگی های جدید رو معرفی می‌کنم. قسمت دوم این مقاله: https://virgool.io/@novonimo/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-دوم-z2pwlav7ibtt سایر ویژگی های که توی این دو مقاله نیاوردم رو می‌تونید مطالعه کنید: Symbol description ، Sort stability ، ECMAScript as JSON superset ، JSON.stringifyویژگی‌ های جدید اکماسکریپت ۲۰۱۹ویژگی جدید Object.fromEntriesبا معرفی ES2017 ویژگی Object.entries معرفی شد. این ویژگی در واقع یک تابع هست که آبجکت رو به لیست تبدیل می‌کنه. به مثال زیر دقت کنید. آبجکت سن دانش‌ آموزان رو در نظر بگیرید:ویژگی Object.entries و تبدیل یک آبجکت به لیستخوب این ویژگی کاربردی به ما اجازه میده تا بر روی آبجکت از ویژگی های یک لیست استفاده کنیم. مثلا از توابع مرتبه بالا map & reducer & filter استفاده کنیم.فرض کنید می‌خواهیم دانشجوهایی که بزرگتر از ۲۱ سال هستند رو فیلتر کنیم. چون داده هامون رو به لیست تبدیل کردیم، با یک فیلتر ساده این کار رو انجام میدیم:تبدیل یک آبجکت به لیست و انجام فیلتر بر روی لیستحالا اگه بخواهیم نتیجه رو دوباره به صورت آبجکت داشته باشیم باید یک حلقه for بنویسیم:تبدیل یک لیست دو بعدی به یک آبجکتاینجاست که ویژگی جدید جاواسکریپت به ما اجازه میده به راحتی این کار رو انجام بدیم و مارو از نوشتن حلقه بی نیاز می‌کنه:ویژگی جدید Object.fromEntries و تبدیل لیست به آبجکتخیلی ساده بود، نه ؟نکته مهم دقت کنید که لیست و آبجکت ، ساختار داده ای جدا دارند. له لیست زیر دقت کنید که دوتا کلید با اسم تکراری داریم. وقتی این لیست به آبجکت تبدیل می‌شه ، این مقدار تکراری حذف میشه ( همونطور که می‌دونید، آبجکت نمی‌تونه دوتا کلید یکسان داشته باشه)آبجکت کلید تکراری رو قبول نمی‌کنه وضعیت پشتیبانی از این ویژگی جدید: وضعیت پشتیبانی از ویژگی fromEntries در محیط های مختلفویژگی‌ های جدید اکماسکریپت ۲۰۱۹ویژگی Array.prototype.flatزمانی که با داده ها کار می‌کنیم، ساختار های چند بعدی و تو در تو زیادی رو می‌بینیم. تبدیل داده های تو در تو به شکل یک داده غیر تو در تو رو flat کردن می‌گیم. در مورد مزایای مسطح کردن داده ها تو این مقاله صحبتی نمی‌کنم اما بدونید که خیلی از جاها به این کار نیاز داریم. برای فلت کردن داده ها همیشه راه‌های مختلفی وجود داشته.مثال زیر رو در نظر بگیرید. ابتدا با یک map به داده های دانش آموزان می‌رسیم. استفاده از map برای ساختن لیستی از دانش آموزانخروجی، یک لیست چند بعدی است. برای این که این لیست رو مسطح کنیم باید از حلقه و ... استفاده کنیم اما به لطف ویژگی جدید جاواسکریپت، با یک متد می‌تونیم این کارو به راحتی انجام بدیم:استفاده از Array.prototype.flat برای مسطح سازی لیست های تو در توویژگی جدید flat به ما این اجازه رو میده که با قرار دادن یک عدد، عمق این مسطح سازی رو هم تعیین کنیم. از این بهتر چی می‌خواستیم ؟‌ بدون نیاز به حلقه های تو در تو تونستیم داده هامون رو مسطح و یک بعدی کنیم. اونم با یک خط کد !نکته مهم: مقدار آرگومان پیش فرض این متد، ۱ هست و در صورتی که مقداری براش قرار ندیم با عمق ۱ شروع به مسطح سازی داده ها می کنه!خوب ممکنه این سوال پیش بیاد که اگه ندونیم ساختار داده ای چند بعدی هست ( بعضی مواقع ممکنه پیش بیاد) و بخواهیم از این متد استفاده کنیم چاره چیه‌؟عمق نامحدود در استفاده از متد مسطح سازیبه سادگی و با قرار دادن یک Infinity در آرگومان این متد، اجازه می‌دیم که تا حداکثر عمق ممکن عملیات مسطح سازی داده هارو انجام بده. وضعیت پشتیبانی از این ویژگی جدید: وضعیت پشتیبانی از اویژگی Array.prototype.flat در مرورگرهای مختلفویژگی‌ های جدید اکماسکریپت ۲۰۱۹ویژگی Optional catch bindingیکی دیگه از ویژگی های خیلی خوب استاندارد ES2019 همین استفاده دلخواه از آرگومان خطا در بدنه try-catch هست. قبلا هر بلاک catch که می‌نوشتیم باید یک آرگومان خطا هم بهش پاس می‌دادیم. خیلی وقت ها این آرگومان اصلا توی بدنه catch استفاده نمی‌شد، اما قرار دادنش اجباری بود. ویژگی جدید به ما این اجازه رو میده تا در صورتی که نخواستیم، از این آرگومان استفاده نکنیم. بلاک اول رو با بلاک دوم مقایسه کنید:قراردادن اختیاری آرگومان خطا در استاندارد جدید ES2019وضعیت پشتیبانی از این ویژگی جدید :‌Optional catch binding وضعیت پشتیبانی از برای طولانی نشدن این مقاله، ۳ ویژگی باقی مونده رو تو قسمت دوم دنبال کنید. https://virgool.io/@novonimo/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-دوم-z2pwlav7ibtt سایر مقاله های من در ویرگول: https://virgool.io/JavaScript8/انواع-حلقه-روی-لیست-در-جاواسکریپت-vhrmccawyf89 https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff https://virgool.io/iran-react-community/آشنایی-با-الگوریتم-reconciliation-ری-اکت-nnmzcqkj4idr Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

اسم انواع symbol های کیبرد کامپیوتر

Nima Mohamadian — Wed, 28 Aug 2019 22:27:39 +0430

تا حالا برای هممون پیش اومده که اسم کلیدهای مهم صفحه کلید مثل Shift و control رو بدونیم و در مورد اسم بقیه کلیدهای کیبرد اطلاعی نداشته باشیم. تو این نوشته اسم تمام سیمبل های صفحه کلید رو به همراه علامتشون آوردم.اسم انواع symbole های کیبرد کامپیوترامیدوارم براتون مفید باشه!سایر مقاله های من در ویرگول: https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff https://virgool.io/JavaScript8/استاتیک-تایپ-و-داینامیک-تایپ-c8eopdnug3xt https://virgool.io/@novonimo/تجربه-تلخ-من-از-هوش-مصنوعی-rkjs2uasy7ao Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

چرا ریداکس ؟‌

Nima Mohamadian — Sun, 25 Aug 2019 17:27:02 +0430

تو مقاله‌های قبلی استفاده از ریداکس رو با یک مثال خیلی ساده آموزش دادم. اما تو این مقاله می‌خوام در مورد ویژگی های ریداکس صحبت کنم. ویژگی های مثبتی که باعث شده ریداکس بیش از پیش محبوب بشه. تو این مقاله می‌خوام به این سوال جواب بدم که چرا ریداکس ؟ریداکسخوب قبل از اینکه بریم سراغ ریداکس باید در مورد state management ها تو اپلیکیشن هامون اطلاعاتی داشته باشیم. دیتایی از سمت سرور میاد و ما سمت کاربر ( کلاینت)‌ اونها رو می‌گیریم و به شکل مناسب نمایش میدیم. اکثر کامپوننت ها و المان هایی که تو صفحه نمایش وجود دارند صرفا وظیفه نمایش داده های دریافتی رو دارند و برخی کامپوننت ها هم هستند که وظیفه دریافت اطلاعات از کاربر رو دارن. مثال ساده ای که باهاش ریداکس رو آموزش دادم در نظر بگیرید. تو اون مثال یک شمارنده خیلی ساده رو نوشتیم و بعد با استفاده از ریداکس اون رو reformat کردیم. برای مطالعه مقاله آموزش ریداکس با مثال ساده : https://virgool.io/iran-react-community/ریداکس-به-زبان-ساده-emxqh7w4gnpk خوب شمارنده ما state داخلی داره که باهاش مقدار شمارنده رو کنترل می‌کنه!در ابتدا مقدار شمارنده صفر هست و بعد از هر عملی که انجام می‌گیره این مقدار کم یا زیاد میشه. خوب این کامپوننت داره کار می‌کنه (با استیت داخلی) ، پس بازم نیاز هست که از ریداکس استفاده کنیم ؟‌این سوال رو در ادامه جواب میدم. البته مثل همیشه با طرح یک سری سوال ها و جواب هاخوب اگه لازم داشته باشیم مقدار این شمارنده رو تو یه کامپوننت دیگه استفاده کنیم چی ؟‌اگه این دوتا کامپوننت فرزند یک والد باشند باز یه مقداری کار ساده تر میشه و نهایتا با پاس دادن یه فانکشن و یک پراپس میشه مقدار شمارنده رو تو کامپوننت دیگه دید و ازش استفاده کرد.خوب بعضی وقتا نمیشه به این شکل کامپوننت ها رو از طریق ارث بری از والد در کنار هم قرار داد و از این روش استفاده کرد. در این صورت چی ؟یکی از کارایی که میشه کرد اینه هر دفعه که کاربر مقدار شمارنده رو کم یا زیاد می‌کنه درخواستی به سمت سرور فرستاده و مقدار شمارنده ارسال می‌شه. در این صورت اگر در صفحه دیگه‌ای مقدار این شمارنده رو لازم داشته باشیم، با ریکوئست زدن به سرور این مقدار رو به دست می‌آریم و استفاده می‌کنیم.خوب ظاهرا مشکل حل شد پس دیگه نیازی به ریداکس نیست؟‌درواقع مشکلی حل نشد بلکه مشکل چند برابر شد. اگر مقاله آپیدت بدبینانه و خوش بینانه رو خونده باشید می‌دونید که این سناریو فقط روی کاغذ قشنگه و همه چی درست کار می‌کنه. تو دنیای واقعی به هر دلیلی ممکنه مشکلی برای سرور ، کلاینت ، اینترنت و ... پیش بیاد و کنترل اوضاع از دست ما خارج باشه. https://virgool.io/@novonimo/آپدیت-بد-بینانه-و-خوش-بینانه-thzeoe7zmjmr به این شکل دقت کنید:ریداکس و بدون ریداکستو شکل سمت چپ ،‌ کامپوننت با رنگ متفاوت می‌خواد مقداری رو به یک کامپوننت دیگه ارسال کنه . بدون ریداکس این کار واقعا سخت هست. مشکلاتی مثل کثیف کد نوشتن ، داینامیک نبودن کدهامون ، کاهش reusability کامپوننت هایی که نوشتیم و مهمتر از همه دیباگ کردن و کاهش شدید پرفورمنس برنامه ای که نوشتیم.حالا شکل سمت راست رو در نظر بگیرید. یک جای واحدی به اسم استور وجود داره و همه کامپوننت ها با اون ارتباط دارن . دیگه لازم نیست props drilling انجام بدیم و هی پراپس هامون رو از یک کامپوننت به کامپوننت دیگه پاس بدیم. افزایش کارایی ؟بعله ، وقتی ارتباط بین کامپوننت ها به این شکل باشه قطعا performance برنامه بالاتر میره . دیگه کامپوننت های واسطه این بین مسئول عبور دادن پراپس ها نیستند و هر کامپوننت می‌تونه به شکل مجزا به store دسترسی داشته باشه. این یعنی افزایش کارایی برنامه.فراموش نکنید که state داخلی یه کامپوننت می‌تونه وجود داشته باشه. وقتی که به مقدار یک کامپوننت در جای دیگه احتیاجی نداریم ( مثلا با کلیلک کردن روی یک دکمه رنگش عوض شه) می‌تونیم از state داخلی استفاده کنیم.برای مدیریت state فقط از ریداکس استفاده می‌کنیم ‌؟خیر، قطعا ریداکس دوستان دیگه هم داره ، context Api که تو خود react وجود داره یکی دیگه از روش های context management توی ری اکت هست.هرچند گفتن کلمه رقیب در اینجا درست نیست. ریداکس کارایی مشخصی داره و در مقابل، context api هم برای منظور مشخصی ساخته شده. حتی در برخی موارد میشه از جفتش توی یک پروژه استفاده کرد.نتیجه گیریریداکس فوق العاده قدرتمند هست. کارایی فوق العاده بالا در کنار سادگی! دفه اولی که می‌خواستم ریداکس رو یاد بگیرم دوستم بهم گفت ریداکس هیچی نیست جز ۶ خط کد ساده. تا اینکه شروع کردم یه مثال ساده ازش پیاده سازی کردم. همون مثالی که تو مقاله آموزش ریداکس برای شما هم زدم. بعد از اون تو چند تا پروژه کوچیک ازش استفاده کردم و به مرور دانشم رو بیشتر کردم. الان طوری شده که حتی برای پروژه های کوچیک هم از ریداکس استفاده می‌کنم. سایر مقاله های من در ویرگول: https://virgool.io/iran-react-community/آشنایی-با-الگوریتم-reconciliation-ری-اکت-nnmzcqkj4idr https://virgool.io/iran-react-community/فانکشنال-کامپوننت-در-مقابل-کلاس-کامپوننت-b8bhzvut2zp1 https://virgool.io/iran-react-community/ریداکس-ساگا-xyhromdbwxzm Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

آشنایی با الگوریتم Reconciliation ری اکت

Nima Mohamadian — Tue, 20 Aug 2019 16:59:25 +0430

تو این مقاله می‌خوام با یک مثال ساده، در مورد الگوریتم Reconciliation ری اکت صحبت کنم. ری اکت از الگوریتم پیشرفته Reconciliation برای افزایش پرفورمنس موقع آپدیت کردن DOM استفاده می‌کنه. مکانیسم Reconciliation به صورت بازگشتی (recursively) درخت DOM رو برای تغییرات جدید بررسی می‌کنه.آشنایی با الگوریتم Reconciliation ری اکتاین مکانیسم با مقایسه همه نودهای DOM ، تغییرات جدید رو متوجه میشه و اون هارو توی DOM اصلی تغییر میده. برای مثال این تکه رو در نظر بگیرید، یک لیست ساده HTML که دو مقدار First & Second رو می‌خواهد نمایش بده:خوب اگه بخواهیم یک مقدار جدید مثلا Third رو به این لیست اضافه کنیم چه اتفاقی می افته ؟البته منظورم اضافه کردن با متد insert هست که آیتم جدید در ابتدای آیتم های قبلی قرار می‌گیرهری اکت مقایسه بین درخت DOM جدید و قدیمی رو شروع می‌کنه.محتوای المان

می‌رسیم. تو درخت قدیمی این مقدار First بود ولی اینجا Third پس این خط از کد رو به عنوان یه تغییر جدید فلگ میذاره ( که توی ‌DOM اصلی تغییرش بده). دومین
رو بررسی می‌کنه. این مقدار تو DOM قبلی Second بود ولی اینجا First شده. پس این رو هم به عنوان تغییر جدید می‌بینه.می‌رسه به آخرین
و مقدار قدیمیش رو با مقدار فعلیش مقایسه می‌کنه. مقدار قبلیش وجود نداشته (خالی بوده) و مقدار جدیدش Second شده. پس این هم یک تغییر دیگه.الگوریتم reconciliation ری اکت ، سه تا تغییر توی مقایسه DOM قبلی و جدید پیدا کرد. پس اونهار به منزله تغییر جدید ارزیابی می‌کنه و DOM جدید رو متناسب با تغییرات جدید ، تغییر میده. ( کامپوننت‌های لازم رو re-render می‌کنه)اگه دقت کرده باشید ما مقدار جدید Third که اضافه کردیم رو به آیتم هامون insert کردیم. برای همین مقدار Third بالاتر از First قرار گرفت. و همین موضوع باعث شد که ری اکت،‌ سه تا تغییر جدید تو این قسمت مشاهده کنه.اگر از append استفاده می‌کردیم چی؟در صورتی که از append استفاده می‌کردیم، مقدار جدید، در انتهای لیست ما قرار می‌گرفت و الگوریتم ری اکت فقط یک تغییر توی DOM جدید به نسبت DOM قبلی پیدا می‌کرد و در نتیجه فقط یک نود نیاز به آپدیت شدن داشت در صورتی که با متد insert سه تا نود رو آپدیت کردیم.ما که نمی‌تونیم همیشه از متدهای append & insert برای ایجاد تغییرات جدید استفاده کنیم. اما دیدیم که استفاده از append به جای insert کمک زیادی به افزایش performance الگوریتم ری اکت داشت.یکی دیگه از امکانات خوب ری اکت ویژگی key توی المنت هاست . کدی که با insert بود رو یادتونه ؟خوب اگه ما یک کلید به همه اعضای لیستمون داده بودیم چه اتفاقی می افتاد‌؟قبل از تغییرات:به نسبت قبل ما یک کلید اختصاصی به هر آیتم دادیم.بعد از تغییرات:بعد از اضافه کردن آیتم جدید ( حتی به روش insert) الگوریتم هوشمند ری اکت با بررسی کلیدها کارو شروع می‌کنه،‌ و چون کلید های ۱ و ۲ همچنان موجود هستند (‌و فقط جاشون عوض شده) تشخصی میده که نیازی به آپدیت آیتم های قبلی نیست و فقط آیتم جدید با کلید ۳ رو به عنوان تغییر در نظر می‌گیره. به این شکل دیگه مشکل تغییر مجدد آیتم های قبلی حل می‌شه.استفاده از کلیدها در ری اکت بسیار مهم هست مخصوصا زمانی که روی یک آرایه متدهای map و ... استفاده می‌کنید. برای آشنایی با قواعد استفاده از کلیدها، به مقاله زیر سر بزنید و نکته ۲ رو مطالعه کنید: https://virgool.io/iran-react-community/ری-اکت-رو-قورت-بده-۱-u8t5ysweyxyj سایر نوشته های من در ویرگول: https://virgool.io/iran-react-community/فانکشنال-کامپوننت-در-مقابل-کلاس-کامپوننت-b8bhzvut2zp1 https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123

انواع حلقه روی لیست در جاواسکریپت

Nima Mohamadian — Mon, 19 Aug 2019 10:55:13 +0430

تو زبان جاواسکریپت برای اینکه بتونیم روی یک لیست جاواسکریپت iterate کنیم و به همه آرایه های اون لیست دسترسی داشته باشیم، چندین متد وجود داره . بریم انواع حلقه روی لیست در جاواسکریپت رو با مثال های ساده بررسی کنیم. از متدهای کلاسیک و معروف شروع کنیم (for & while ) و بعد با forEach map , reducer , filter, every, some, for...of بیشتر آشنا شیم.انواع حلقه روی لیست در جاواسکریپتwhileاستفاده از while بر روی یک لیستخوب انتظار داریم که در خروجی مقادیر ۱ و ۲ و ۳ و ۴ و ۵ و ۶ رو داشته باشیم. حلقه از جنس while تا زمانی که شرط ورودی ( در مقابل while نوشته شده) مقدار true داشته باشه، اجرا میشه و با رسیدن به اولین مقدار false ، حلقه شکسته میشه و کدهای بعد از بلاک while اجرا می‌شه. در صورتی که شرط حلقه همیشه true باشه، این حلقه برای همیشه اجرا میشه و در واقع یک حلقه بی‌نهایت ساختیم. (تو کدهامون همیشه از این حالت اجتناب می‌کنیم)forاستفاده از for بر روی یک لیستخوب حلقه for هم با یک دستور ساده بر روی لیست اجرا می‌شه! همون طور که نگران بینهایت شدن حلقه while هستیم، برای حلقه for هم طوری شرط میذاریم که همیشه حلقه به پایان برسه.forEachاستفاده از forEach بر روی یک لیستخوب این متد با دوتا متد قبلی فرق میکنه. این متد بر روی یک لیست اعمال می‌شه ( پس نگران بی‌نهایت شدنش نیستیم). این متد در ورودی یک تابع می‌گیره و اون تابع رو روی تک تک اعضای اون لیست به کار میبره! نکته مهم اینه که این متد ، یک لیست جدید نمی‌سازه و تغییرات رو روی همون لیستی که داشتیم اعمال میکنه. for...ofمتد بعدی که تو جاواسکریپت وجود داره for...in هست. این متد برای پیشمایش آبجکت به کار میره ولی میشه ازش برای لیست هم استفاده کرد. توصیه میشه که از این متد برای لیست استفاده نکنید چون ممکنه با ترتیب دلخواه یک لیست رو پیمایش کنه و نتیجه اون چیزی که شما می‌خواهید نباشه. در عوض ES6 یک متد جدید به اسم for...of معرفی کرد که برای لیست کاربرد داره:استفاده از for of بر روی یک لیستmapاستفاده از map بر روی یک لیستاین متد مثل متد قبلی ، یک تابع رو به عنوان ورودی میگیره و اون رو روی تک تک اعضای اون لیست اعمال میکنه. این متد بر خلاف forEach یک لیست جدید می‌سازه و کاری به لیست قبلی نداره!reduceاستفاده از reduce بر روی یک لیستفرقی که reduce با سایر متد ها داره اینه که نه لیست ورودی رو تغییر میده و نه لیست جدید می‌سازه، بلکه همه لیست ورودی رو تبدیل به یک شی می‌کنه (‌در مثال بالا همه اعداد رو باهم جمع میکنه و به صورت مجموع یک عدد نشون میده)filterاستفاده از filter بر روی یک لیستاین متد هم یک تابع به عنوان ورودی می‌گیره و یک لیست به عنوان خروجی برمی‌گردونه. هر آیتمی از لیست ورودی که بتونه شرط تابع رو true کنه، توی لیست خروجی قرار می‌گیره. لیست خروجی کد بالا، عدد های زوج لیست ورودی هستند.everyاستفاده از every بر روی یک لیستخوب بر خلاف متد های قبلی که خروجی لیست و ...داشتند، این متد خروجی شرطی true یا false داره. در واقع این متد یک شرط رو با تک تک آرایه های اون لیست چک می‌کنه و در صورتی که همه آرایه ها اون شرط رو داشته باشند ( در مثال بالا ، همه آرایه های لیست، از عدد ۷ کوچکتر هستند) در انتها مقدار true رو برمی گردونه و در غیر این صورت مقدار false رو برمی‌گردونه.someاستفاده از some بر روی یک لیستاین متد هم مثل every عمل میکنه البته با این تفاوت که مقدار خروجی every در صورتی true میشه که اون شرط برای تک تک اعضای لیست صادق باشه ولی توی some فقط کافیه یکی از آرایه های لیست، اون شرط رو داشته باشن. در این صورت مقدار some برابر با true می‌شه.و در آخر یه توصیه به دوستانی که تازه کار هستندبرای اینکه با متدهای بالا بیشتر آشناشین و احساس راحتی داشته باشین، پیشنهاد می‌کنم خودتون دست به کار شید و شروع کنید به کد زدن. مثال های بالا، مثال های خوبی هستند که می‌‌تونید ازشون استفاده کنید . یکی از دلایلی هم که خروجی کدهای بالا رو توی متن قرار ندادم همین موضوع هست. اگر هم نمی‌خواهید کد بزنید، بهتره که کدهارو ذهنی حل کنید و به جواب برسید. هرچند که آلوده کردن دست ها به کیبرد، بهترین تمرین برای یک برنامه نویس محسوب می‌شه!سایر مقاله های من در ویرگول: https://virgool.io/JavaScript8/آبجکت-بدون-اثر-جانبی-در-جاواسکریپت-wswtjtwpguuq https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff https://virgool.io/iran-react-community/%D9%81%D8%A7%D9%86%DA%A9%D8%B4%D9%86%D8%A7%D9%84-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D8%AF%D8%B1-%D9%85%D9%82%D8%A7%D8%A8%D9%84-%DA%A9%D9%84%D8%A7%D8%B3-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-b8bhzvut2zp1 Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123