نوشته های محمد پیمان راد

یک ترفند جمع و جور و کار راه بنداز جاوااسکریپتی

محمد پیمان راد — Thu, 15 Sep 2022 17:36:57 +0430

این تکنیکی که قرار هست در این مقاله گفته بشه مواقعی کاربرد داره که ما در بک پروژه واقعی و جدی نمخوایم از اون استفاده و برای تست و آزمون خطا داریم کدنویسی کنیم.در هایت بگم استفاده از این ترفند در پروژه های بزرگ مقیاس کار اصولی نیست.با این ترفند دیگه نیازی نیست برای دسترسی به یک عنصر HTML حتما از متد های document استفاده کنید.کافیه در کد HTML به المان مورد نظر یک id بدید:

Some Text...

و در کد جاوااسکریپت برای دسترسی به این المان این آی دی رو می نویسین انگار که یک متغیر از پیش تعریف شده باشه:elem.style.backgroundColor = "red"همین! امیدوارم مفید بوده باشیم.ممنون میشم اگر دوست داشتید من رو دنبال کنیدروزخوش!❤❤

مفاهیم Map و Set در جاوااسکریپت , قسمت دوم

محمد پیمان راد — Mon, 12 Sep 2022 14:12:33 +0430

در قسمت اول این مقاله در مورد Map صحبت کردیم : https://vrgl.ir/BJ6Eu و در این قسمت به Set می پردازیم:تعریف ست:مجموعه ای از مقادیر است که این مقادیر از هر نوع داده ای می توانند باشند. هر مقدار در این مجموعه فقط یک بار می تواند اضافه شود پس بهتر است بگوییم Set مجموعه ای از مقادیر یکتا (unique) است.ایجاد ست:ست می تواند بر اساس هر شی قابل پیمایش (iterable) ایجاد شود که این شی در اکثر اوقات یک آرایه است.البته می توانیم یک ست خالی هم بسازیم و مقادیر دلخواه را در آن درج کنیم.مثال:let array = [1,2,3,4,5]; let set = new Set(array); console.log(set);خروجی:متد ها و پراپرتی های مهم ست:set.add(value)مقداری را در ست درج می کند و سپس ست را بر می گرداند. البته این مقدار در صورتی در ست درج می شود که از قبل در ست موجود نباشد.set.delete(value)مقدار مورد نظر را از ست حذف می کند.اگر این مقدار وجود داشت true و اگر نه false بر می گرداند.set.has(value)اگر مقدار موردنظر در ست وجود داشت true و در غیر این صورت false بر می گرداند.set.clear()ست را کاملا خالی می کند.set.sizeاین پراپرتی تعداد مقادیر موجود در ست را بر می گرداند.پیمایش ست:این داده ساختار در حلقه for of قابل استفاده است:let set = new Set(); set.add("item1"); set.add("item2"); set.add("item3"); for (let item of set) { console.log(item); }خروجی:ست نیز دارای متد forEach است:let set = new Set(["item1","item2","item3"]); set.forEach( (value,valueAgain,set) => { console.log(value); } )خروجی مشابه وقتی خواهد بود که از حلقه for of استفاده کردیم. در کد بالا دو پارامتر اول کال بکی که به forEach می دهیم مقدار یکسانی در هر دور خواهند داشت که آن هم عنصر موردنظر در آن دور هست.در واقع این به دلیل سازگاری (compatibility) با Map است.تبدیل ست به آرایه:روش های زیر امکان پذیر است:let set = new Set(); set.add(1); set.add(2); set.add(3); //Using Spread Syntax let arr = [...set]; //Using Array.from let arr = Array.from(set);مثالی در رابطه با ست:فرض کنیم می خواهیم کاریر هایی که صفحه ای از سایت را مشاهده می کنند را داشته باشیم ولی هر کاریر ممکن است این صفحه را چندین بار مشاهده کند ولی ما می خواهیم کاربر های غیر تکراری را داشته باشیم پس از ست استفاده می کنیم:let set = new Set(); let user1 = {name:"User1"}; let user2 = {name:"User2"}; let user3 = {name:"User3"}; //Users are added to the set when visited this page //One user might visit this page multiple times set.add(user1); set.add(user2); set.add(user1); set.add(user3); set.add(user3); set.add(user2); //But Set Only Stores Unique Values console.log(set.size); //Output: 3 for (let user of set) { console.log(user.name) /*Output : User1 User2 User3 */ }امیدوارم از این سری مقاله لذت برده باشید.روز خوش!منابع و مراجع:javascript.infoMDN

مفاهیم Map و Set در جاوااسکریپت , قسمت اول

محمد پیمان راد — Sat, 10 Sep 2022 21:45:19 +0430

ما آبجکت ها و آرایه ها رو داشتیم اما در اکمااسکریپت6 دو نوع ساختمان داده جدید معرفی شدن به اسم های Map و Set که یه جورایی به آبجکت ها و آرایه قدرت می بخشن اما دو نوع داده کاملا متفاوت هستن.در قسمت اول به Map می پردازیم:تعریف مپ:مپ مجموعه ای از جفت های "کلید-مقدار" است اما تفاوت اصلیش با آبجکت ها این هست که مقادیری که به عنوان کلید استفاده می شوند می توانند از هر نوع داده ای باشند.نحوه ایجاد مپ:شما می توانید در ابتدا یک مپ خالی ایجاد کنید و یا بر اساس یک آبجکت آن را بسازید://Empty Map let map = new Map(); //Map From An Object let obj = { prop1:1, prop2:2, }; let mapFromObj = new Map(Object.entries(obj));متد ها و پراپرتی های مهم مپ:map.set(key,value)جفت کلید مقدار جدیدی اضافه می کند.این متد مپ را بعد از اضافه کردن جفت کلید مقدار بر می گرداند.map.get(key)مقدار نظیر با کلید داده شده را بر می گرداند و اگر همچین کلیدی وجود نداشت undefined بر می گرداند.map.has(key)اگر کلید موردنظر وجود داشت true برمی گرداند و در غیر این صورت false.map.delete(key)مقدار متناظر با کلید مورد نظر را حذف می کند.map.clear()مپ را کاملا خالی می کند.map.sizeاین پراپرتی تعداد جفت های کلید مقدار درون مپ را برمی گرداند.پیمایش مپ:این داده ساختار در حلقه for of قابل استفاده است:let map = new Map(); map.set("prop1",1); map.set("prop2",2); map.set("prop3",3); map.set("prop4",4); for (let pair of map) { console.log(pair); }خروجی:همچنین مپ یک متد forEach مشابه آرایه ها دارد:let map = new Map(); map.set("prop1",1); map.set("prop2",2); map.set("prop3",3); map.set("prop4",4); map.forEach((value,key,map) => { console.log( `${key} : ${value}` ); })خروجی:تبدیل مپ به آبجکت:let map = new Map(); map.set("prop1",1); map.set("prop2",2); map.set("prop3",3); map.set("prop4",4); let obj = Object.fromEntries(map); console.log(obj);خروجی:مثالی در رابطه با مپ:در این مثال می خوایم یک آرایه و دو مپ رو با هم ادغام کنیم و یک مپ جدید بسازیم:const firstMap = new Map(); firstMap.set("prop1",1); firstMap.set("prop2",2); const secondMap = new Map(); secondMap.set("prop3",3); secondMap.set("prop4",4); const thirdMap = new Map([...firstMap,...secondMap,["prop5",5]]); console.log(thirdMap);خروجی:امیدوارم لذت برده باشید. انشاالله در قسمت بعد به Set خواهیم پرداخت.منابع و مراجع:javascript.infoMDN

فوت های کوزه گری در مورد Optional Chaining در جاوااسکریپت

محمد پیمان راد — Mon, 05 Sep 2022 23:01:35 +0430

من قبلا مقاله ای در همین ویرگول منتشر کردم و به صورت کلی در مورد این قابلیت صحبت کردم اگر مایلید از لینک زیر میتونید مطالعه کنید: https://virgool.io/@peymanradmo/%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-optional-chaining-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA%D8%A7%DB%8C%D9%86-%DA%86%D9%87-%D9%81%D8%A7%DB%8C%D8%AF%D9%87-%D8%A7%DB%8C-%D8%AF%D8%A7%D8%B1%D9%87-kt1pjxb0uyw0 اما این ساختار سینتکسی کاربرد های پیشرفته تری هم داره به طور مثال اینکه اگر یک متود از آبجکت وجود داشت (منظور از وجود داشتن اینه که null یا undefined نباشه) صدا زده بشه. بطور مثال ما دو آبجکت داریم به اسم های user1 و user2 که یک پراپرتی به اسم role دارن که نقش اونها رو در سایت مشخص می کنه کاربر اول نقش نویسنده رو داره و دومی یک کاربر عادیه.اونی که نویسنده هست متدی داره به اسم writeArticle:let user1 = { role:"writer", writeArticle() { alert("Writing"); } } let user2 = { role:"user", }و ما اگر بخوایم متود writeArticle را برای یوزری صدا بزنیم که نویسنده نیست بی شک با ارور زیر مواجه می شویم:user2.writeArticle is not a function اما اگر بخوایم به جای ارور هیچ اتفاقی نیفته باز Optional Chaining به کمکون میاد:user2.writeArticle?.()در واقع کد بالا بررسی می کنه اگر user2 متودی به اسم writeArticle داره یا نه.اگر وجود داشت اون رو فراخوانی می کنه و اگر نه هیچ اتفاقی رخ نمی ده و دیگه اروری هم نخواهیم دید!البته این رو هم بگم که استفاده بیش از حد از این قابلیت میتونه مشکل آفرین باشه و فقط وقتی جایز هست که وجود نداشتن چیزی مجاز باشد و وجود نداشتنش اخلالی در روند برنامه ایجاد نکند.استفاده از Optional Chaining در هنگام خواندن پراپرتی با [ ]غیر از نقطه ما می تونیم به پراپرتی های یک آیجکت به کمک براکت هم دسترسی داشته باشیم:let user = { name:"John" } //We can write user.name //Or user["name"]و Optional Chaining با این سینتکس هم قابل استفاده است:let user = { name:"John" } let user2 = null; console.log(user?.["name"]) // Output : John console.log(user2?.["name"]) // Output : undefinedو نکته آخر اینکه از این قابلیت هنگامی که داریم مقدار یک پراپرتی رو تغییر میدیم نمی تونیم استفاده کنیم و فقط در زمان خواندن و حذف کردن یک پراپرتی قابل استفاده است.امیدوارم مفید بوده باشه. روز خوش❤❤

قابلیت Optional Chaining در جاوااسکریپت,این ".?" چه فایده ای داره؟

محمد پیمان راد — Sun, 21 Aug 2022 20:01:06 +0430

خیلی موقع ها شده که یک آبجکت داریم که مقادیر پراپرتی هاش هم آبجکت هستن و همون ها هم مقادیری از نوع آبجکت دارن و الی آخر مثل مثال زیر:let userDetails = { id:1, name:"John", address:{ city:"NY", country:"U.S", street:{ name:"Street Test", ally:"Ally Test", allyNumber:"10", } }}به طور مثال ما می خوایم به نام خیابان کاربر دسترسی داشته باشیم پس می نویسیم:userDetails.street.name اما فرض می کنیم سایت ما خدمات آموزشی ارایه می ده و کاربر ملزم به وارد کردن آدرس دقیق نیست پس پراپرتی street می تونه وجود نداشته باشه و وقتی می خوایم مقدارش رو بخونیم به خطا بر می خوریم:Uncaught TypeError: Cannot read properties of undefined (reading 'name')چون وقتی پراپرتی در آبجکت وجود نداشته باشه هنگام خوندنش به ما undefined بر گردونده میشه و اینجا street مقدارش undefined میشه و مسلما undefined پراپرتی نداره که بشه خوندش و به خطا بر می خوریم.دقیقا همچین زمانی Optional Chaining به نجات ما میاد. گفتیم که در اینجا اگر street نباشه مشکلی نیست ولی ما دوست داریم وقتی پراپرتی از اون می خونیم به جای یه ارور رو مخ ,undefined بگیریم.یه نگاه به کد زیر بندازید:userDetails.street?.name این "?" که ما توی این کد اضافه کردیم این کار رو انجام میده:اگر null,userDetails.street یا undefined نبود پراپرتی name رو ازش می خونه.اگر چنین نبود به ما undefined بر می گردونه.در واقع این یک مثال ساده از این قابلیت بود چون کاربرد های پیشرفته تری هم داره که به امید خدا در مقاله های بعدی راجه بهش صحبت می کنم.اگر هم دوست داشتید یه سر به این لینک بزنید.امیدوارم از این مقاله لذت برده باشید و براتون مفید واقع شده باشه.روز خوش!