نوشته های Mohammad Ghorayshi

چطور Array یا Object را در JavaScript کپی کنیم ...

Mohammad Ghorayshi — Thu, 09 Jan 2020 22:01:58 +0330

فکر میکنم همه ماها با این مشکل برخورد کردیم، وقتایی که آرایه یا آبجکت را کپی میکنیم و تغییر میدیم، میبینیم که آرایه اصلی هم تغییر کرده و آپدیت شده. خب توی این موارد ما آرایه یا آبجکت را کپی نمیکردیم بلکه بهش رفرنس میدادیم و توی اصول برنامه نویسی وقتی یه رفرنس از یک متغیر به یک متغیر دیگه میدیم، درصورت تغییر هر کدوم، اون یکی هم تغییر میکنه.حالا باید توی JavaScript چیکار کنیم تا بدون رفرنس کپی کنیم؟؟؟ خب راه های زیادی داره که موردی میگم.آرایه هافرض کنیم ما یه آرایه با سه تا متغیر داریمlet array_1 = [ "Dornica", "Mohammad", "Ali"];خب یک آرایه دوم از این آرایه اول کپی میکنیمlet array_2 = array_1; console.log( array _ 2 ); // [ "Dornica", "Mohammad", "Ali"]میبینیم که مقدار آرایه اول در آرایه دوم کپی شد. الان به آرایه دوم یه مقدار دیگه هم اضافه میکنیمarray_2[3] = 'Ahmad'; console.log( array_2 ); // [ "Dornica", "Mohammad", "Ali", "Ahmad"]این همه ماجرا نیست، شاید تا اینجا کار مشکلی ندیده باشیم ولی مشکل اصلی اینه که آرایه اول هم مثل آرایه دوم تغییر کردهconsole.log( array_1); // [ "Dornica", "Mohammad", "Ali", "Ahmad"]با وجود اینکه ما فقط مقدار آرایه دوم را تغییر دادیم ولی آرایه اول هم تغییر کرد، خب باید بگم ما از آرایه اول کپی نگرفتیم بلکه به آرایه دوم یه رفرنس از آرایه اول دادیم، یعنی هر تغییری که توی آرایه دوم انجام بدیم توی ارایه اول هم اعمال میشه. خب باید چیکار کنیم که اینطوری نشه؟استفاده از اکمااسکریپت 6 ( ES6 )let array_2 = [...array_1];خب این دستور داره از ویژگی itterable بودن آرایه استفاده میکنه که این خودش میتونه یه بحث جدا برای پارس کرده آرایه ها باشه که شاید در آینده براتون گفتم. شاید هر کدوم از این تابع هایی که معرفی میکنم خودش یه مطلب جدا باشه ولی برای اینکه از بحص اصلیمون دور نشیم فقط یه توضیح مختصر ازش میدم.let array_1 = [ "Dornica", "Mohammad", "Ali"]; let array_2 = [...array_1]; array_2[3] = 'Ahmad'; console.log( array_2 ); // [ "Dornica", "Mohammad", "Ali", "Ahmad"] console.log( array_1); // [ "Dornica", "Mohammad", "Ali"]استفاده از array.slicelet array_2 = array_1.slice( );با این خط کد یک کپی از آرایه اول توی آرایه دوم میریزهlet array_1 = [ "Dornica", "Mohammad", "Ali"]; let array_2 = array_1.slice( ); array_2[3] = 'Ahmad'; console.log( array_2 ); // [ "Dornica", "Mohammad", "Ali", "Ahmad"] console.log( array_1); // [ "Dornica", "Mohammad", "Ali"]این تابع کار ما را راه میندازه ولی اصلا کار این تابع چیه؟ یه برش از آرایه اول میگیره و توی آرایه دوم میریزه، این تابع دو تا متغیر میگیره و متغیر اول میگه "از خونه چندم آرایه" و متغیر دوم میگه "تا خونه چندم آرایه"، یعنی اگر (1,4) بدیم بهمون از خونه اول تا خونه چهارم کپی میکنه و توی آرایه دوم میریزه. خب توی این مثال که ما اصلا ورودی وارد نکردیم؟متغیر توی این تابع اختیاری، یعنی بصورت دیفالت متغیر اول خونه صفر آرایه و متغیر دوم اندازه طول آرایه منهای یکه، یعنی کل آرایه را برامون کپی میکنهاستفاده از concatlet array_2 = [ ].concat( array_1 );تابع concat آرایه دوم را به آرایه اول نسبت میده و توی متغیری که میخوایم میریزه، توی مثال ما array_1 را به یک آرایه خالی اضافه میکنه و توی array_2 میریزه ( دقت کنین قبل کانکت یه آرایه خالی گذاشتم، عملا دو تا ارایه را ادغام میکنه ).let array_1 = [ "Dornica", "Mohammad", "Ali"]; let array_2 = array_1.slice( ); array_2[3] = 'Ahmad'; console.log( array_2 ); // [ "Dornica", "Mohammad", "Ali", "Ahmad"] console.log( array_1); // [ "Dornica", "Mohammad", "Ali"]با این روش ها میتونیم یه کپی بدون رفرنس از آرایه بگیریم.خب درباره کپی ابجکت ها هم بگیمآبجکتفرض کنین یه object داریمlet object_1 = { name: 'Dornica', work: 'Web Developer' };خب مثل آرایه ها یک کپی از object اول توی یک object جدید بریزیمlet object_2 = object_1; console.log( object_2 ); // { name: 'Dornica', work: 'Web Developer' };اگر object_2 تغییر بدیم اون تغییر توی object_1 هم اعمال میشهobject_2.work = c console.log( object_2 ); // { name: 'Dornica', work: ''Web & Mobile Developer';}; console.log( object_1 ); // { name: 'Dornica', work: ''Web & Mobile Developer';};یعنی همون رفرنس میشه، خب برای فقط کپی باید چیکار کنیم؟استفاده از assignlet object_2 = Object.assign( {}, object_1 );این تابع تقریبا مثل کانکت عمل میکنه و متغیر دوم را به متغیر اول اضافه میکنه و اگر فیلد مشترکی داشته باشن از متغیر دوم استفاده میکنه، توی این مثال هم ما object_1 را با یک object خالی ادغام میکنیم و توی object_2 میریزیم. این مثال برای توضیحات بیشتر این تابع اوردم.const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }البته با این روش اگر object تو در تو یا چند سطحی داشته باشیم دوباره مثل رفرنس عمل میکنه و فقط برای object های یک سطحی استفاده میشه، پس الان باید چیکار کنیم؟ میتونیم از راه زیر استفاده کنیم که هر نوع object را کپی کنیم.استفاده از JSONlet object_2 = JSON.parse ( JSON.stringify( object_1 ) ) ;این تابع حتما باهاش آشنایی دارین ( منظورم اینه با این دو تا تابع که با هم داریم استفاده میکنیم )، اینجا اول میایم object را به یه رشته تبدیل میکنیم و دوباره اون رشته را به object تبدیل میکنیم.با این روش object کپی بدون رفرنس میشه.****************************************یکی از دوستان توی کامنت مطلبی گفت بعد از بررسی گفتم به مطلب اضافه کنماستفاده از Spreadlet object_2 = {...object_1};این حالت هم مثل assign فقط در یک سطح ویرایش کار میکنه و توی آبجکت های تو در تو جواب نمیده.****************************************امیدوارم این مطلب بدردتون خورده باشه، شاید راه های دیگه ای هم باشه که بشه اینکارو انجام داد ولی من بیشتر از این ها استفاده کردم اگر شما موردی استفاده میکنین به استراک بزارین تا استفاده کنیم. اگر سوال یا مطلبی بود خوشحال میشم بتونم کمک کوچیکی کنم یا اشکالات منو بهم یادآوری کنین.با تشکرhttp://dornica.net/

معرفی ۵ دستور Git که شاید بدردتون بخوره ...

Mohammad Ghorayshi — Tue, 31 Dec 2019 15:20:44 +0330

خب Git یه ابزار مناسب و جالب برای کارهای تیمی یا کنترل ورژن های نرم افزاره که خیلی از شرکت های بزرگ باهاش کار میکنن و بیشتر پروژه های open source دنیا با گیت کار میکنن و کارهای توسعه نرم افزار را انجام میدن. به نظرم بیشتر مردم میتونن از گیت استفاده کنن، مخصوصا اوناییکه کارهای پژوهشی یا پروژه ای انجام میدن یا میخوان مطلبیو با کمک همدیگه نشر بدن و کامل کنن.یه سری command ها مثل push و pull و clone و شبیه اینا جزو کامندهای پایه هستن که هرکسی با گیت کار میکنه باهاش آشنایی داره، اگر کسی خواست اعلام کنه درمورد اصل گیت هم مطلب میزارم ولی الان فرض میکنیم شما اون کامندهای پایه را میدونین.git reset --hard [commit hash]این کامند برای زمانی استفاده میشه که برای مثال برنامه شما یه حالت نرمالی داره و بدون مشکل داره کار میکنه، بعدش شما یه ایده ی خاصی به ذهنتون میرسه که فکر میکنین درسته و میتونه برنامه شما را قوی تر یا یوزرفرندلی تر کنه، شروع میکنین به نوشتن کد و تست گرفتن، بعد از مدتی متوجه میشین که نه تنها این ایده خوب نبود بلکه ساختار کلی نرم افزار را با خطا مواجه کرد، اینجا راحت ترین راه اینه از این دستور استفاده کنین تا به حالت قبل برسین، البته دقت کنین این دستور به push کردن قبل برمیگرده یعنی فقط اوناییکه commit کردین یا تغییر دادین برمیگردونه.یا جوره دیگه بگم، برای ریست کردن همه کارهایی که کردین به حالت قبلش. با فرض اینکه شما چند تا کامیت زدین ولی به ریپو push نکردین، خب اگر از این دستور استفاده کنین همه اون کامیت و تغییرات پاک میشه.git checkout --filenameاگر شما توی شرایطی هستین که یه سری تغییرات توی فایل هاتون دادین ولی میخواین اون تغییرات پاک کنین، از این کامند باید استفاده کنین. دقت کنین که با این کامند شما به commit قبل برمیگردین، یعنی فایل هایی که commit نشدن را براتون ریست میکنه. دستور قبل هرچی تغییر دادین (اون تغییراتی که هنوز برای گیت نفرستادین) چه اوناییکه commit کرده بودین و چه اوناییکه فقط فایلشو تغییر دادین ریست میکرد ولی این دستور فقط فایل هایی که commit نکردین را ریست میکنه. git rm [file name]خب این دستور برای حذف فایل یا دایرکتوری از فایل های گیت. با این دستور فایل مورد نظرتون میتونین پاک کنین.git config --global alias [aliase name][command] اگر شما نمیخواین زیاد تایپ‌کنین، این دستور مناسب شماست. خب گیت یه ویژگی داره که میتونین برای خودتون دستورات را کوتاه کنین و هرجور که خودتون راحتین دستور صدا بزنین.برای مثال دستور ریست را میخوام شخصی سازی کنم‌و براش کلمه اختصاری درست کنمgit config --global aliase.unstage 'reset HEAD--'خب با این دستور جای اینکه هربار از دستور ریست استفاده کنم از unstage استفاده میکنم، یعنی دو تا دستور زیر یک کار را انجام میدنgit unstage fileA git resexxt HEAD -- fileAخب command بعدی میتونه جالب باشه ولی من ازش استفاده نکردم git revertاین دستور شما را به commit قبلی برمیگردونه و فرقش با دو تا دستور اول که گفتم در اینه که، اون دو تا دستور فقط با فایل هایی که هنوز با فایل های همکاراتون یا همون گیت ادغام نشده بود کار داشت (یعنی کارهایی که روی سیستمتون انجام دادین و هنوز برای گیت نفرستادین) ولی این دستور شما و هم تیمی هاتونو را به commit قبلی میبره و بقیه فایل ها را پاک میکنه. *ویرایش : فکر کنم اینجا را خوب توضیح ندادم، این دستور شما را به کامیت قبلی نمیبره، شما را به کامیتی که انتخاب کردین میبره و تغییرات اون کامیت برمیگردونه یه کامیت جدید براتون میسازه ( برای اینکه لاگ پاک نشه )*revertاز این دستور استفاده نکردم ولی میتونه برای بعضی مواقع دستور خوبی باشه.خب این از دستوراتی که ممکن بود براتون کارایی داشته باشه، اگر مطلب بیشتری درباره گیت خواستین، بگین مطلبشو براتون مینویسم

همه ی آنچه که باید درباره Function در JavaScript بدانید ...

Mohammad Ghorayshi — Sat, 28 Dec 2019 15:03:34 +0330

خب Function ها یا توابع، جز جدایی ناپذیر و اصلی برنامه نویسی هستن که توی بیشتر زبان های برنامه نویسی داریم. که تعریف های زیادی ازش شنیدیم.توابع اصولا برای جلوگیری از تکرار کدها استفاده میشه و خوانایی اسکریپتو بالا میبره و همونطور هم‌که قبلا گفتم توی بیشتر زبان های برنامه نویسی وجود داره و اصولا یکی از جنبه های مهم جاواسکریپت هم تشکیل میده.نمیخوام توابع را تعریف کنم و اصول برنامه نویسی را بهتون یاداوری کنم، توی این مطلب فقط میخوام انواع روش های تعریف توابع توی JavaScript را جمع بندی کنم.توی این مطلب این مواردو میخونیم:- تعریف توابعفراخوانی توابعمقدار بازگشتی توابعپارامترها و متغیرهاتابع arrow functionتوابع self-invoking( برای اینکه تست هاتونو بگیرین نیاز نیست یه صفحه درست کنین و اجرا کنین، کافیه توی مرورگر راست کلیک کنین و inspect element بزنین و روی تب console برین، اینطوری کارتونو سریع تر انجام میدین)تعریف توابعتوی جاوا اسکدیپت به دو صورت توابع را تعریف میکنیم۱- تعریف تابع بصورت تابع۲- تعریف تابع بصورت متغیرتعریف تابع بصورت تابع : توی این حالت اول کلمه کلیدی function مینویسیم، بعد نام تابع مینویسیم و بعد پرانتز باز میکنیم و اگر تابع ما ورودی داره، متعیرهای ورودی مینویسیم و بعد پرانتز میبندیم، بعدش اکولاد باز میکنیم و کدهای تابع مینویسیم و بعد هم اکولاد میبندیم. اینطوری یه تابع نوشته میشه، البته از مرحله باز کردن اکولاد تا بستن توی تعریف های متفاوت توابع شبیه هم هستن.function showName( name ) { return 'Hello ' + name; } توی مثال بالا یه تابع به نام showName داریم که یک متغیر ورودی داره و توی خروجی مقدار ثابت name و مقدار ورودی برمیگردونه.تعریف تابع بصورت متغیر: توی این حالت ما یک تابع بدون نام را به یک متغیر نسبت میدیم بصورت زیر:var showName = function( name ) { return 'Hello ' + name; }بیشتر توابع جاوا اسکریمت از این روش استفاده میکنن، توی این روش عملا یک تابع بی نام را به یک متغیر نسبت میدیم‌و با صدا زدن اون متغیر، داریم‌تابع را صدا میزنیم و اجرا میکنیم.فراخوانی توابعتا الان تونستیم توی جاوا اسکریپت یک تابع را با دو روش درست کنیم، خب حالا چطوری باید از این تابع استفاده کنیم؟؟؟ البته که کار سختی نیست کافیه اسم تابع را بنویسیم و پرانتز باز کنیم و اگر تابع مقدار ورودی داره، مقدار ورودی بنویسیم و بعدش پرانتز ببندیم.var showName = function( name ) { return 'Hello ' + name; } showName( 'Dornica' );خب الان این تابع اجرا میشه و یه رشته به عنوان خروجی برمیگردونه.مقدار بازگشتی توابعتوی مثال بالا، تابع تعریف شده، یک رشته را به عنوان خروجی یا مقدار بازگشتی بهمون میده. دقت کنین هر تابعی که تعریف میکنین باید یه مقدار خروجی داشته باشه که اگر تعریف نکنین براتون ubdefined برمیگردونه، البته بعضی مواقع نیاز ندارین که تابع مقدار برگردونه و میخواین یه سری عملیات انجام بده، از لحاظ جاوا اسکریپت مشکلی نداره تابعی مقدار برگشتی نداشته باشه.function sum1( a, b){ return a + b; } sum1( 1, 4 ) // return 5function sum2( a, b){ a + b; } sum2( 1, 4 ) // return undefinedتوی مثال بالا تابع اولی مقدار بازگشتی داره ولی تابع دوم نداره که این مشکلی بوجود نمیاره، استفاده از توابع به برنامه نویس و اسکریپتی که میخواد بنویسه بستگی داره.پارامترها و متغیرهااز پارامترها و متغیرها جاهای دیگه هم استفاده میکنیم، ولی بین این دو تفاوتی وجود داره. پارامترها در توابع همون نام هایی ست که توی پرانتز (موقع تعریف تابع) مینویسیم. برای مثال function showName( p1, p2, p3 ){ // do something }در مثال بالا مقدار p1 و p2 و p3، پارامترهای ما هستند و متغیری در اینجا وجود نداره.متغیرها مقادیری هستند که به عنوان ورودی توابع میفرستیم، برای مثالshowName( 'Dornica', 'Mohammad', 'Ali');در مثال بالا p1=Dornica و p2=Mohammad و p3=Ali به عنوان متغیرها هستندبعصی وقتا ما نمیدونیم که باید چند تا متغیر برای یه تابع بفرستیم، باید قبلش چک کنیم که تعداد پارامترهای یک تابع چندتاستfunction mul2( num ) { return 2 * num; } mul2( 10, 5, 2 ); // return 20 فقط عدد اول میگیرهدر مثال بالا ما یک پارامتر برای تابع تعریف کردیم ولی سه تا متعیر برای تابع فرستادیم. توی این حالت توی بعضی از زبان های برنامه نویسی بهمون ارور نشون میده ولی اینجا فقط از متغیر اول استفاده میکنه و به بقیه متغیرها کاری ندارهتوابع arrowتوی اکما اسکریپت ۶ ( ES6 ) این تابع معرفی شده، توابع فلش یا arrow function ها (<=) سینتکس کوتاه تری برای تعریف توابع دارند.var showName = ( name ) => { return 'Hello ' + name; }توی مثال بالا ما یک arrow function با نام showName نوشتیم که یک پارامتر داره، همونطور که میبینین کلمه کلیدی function توی تعریف این توابع حذف میشه البته چون یک پارامتر داریم میتونیم پرانتز هم حذف کنیم ولی برای بیشتر از یک پارامتر، حتما باید پرانتز بزاریمتوابع self-invokingاین توابع خودشون، خودشونو فراخوانی میکنن یا به اصطلاح توابع خودفراخوان هستند. برای تعریف این توابع کافیه یک پرانتز باز کنیم و تابع را بدون نام تعریف کنیم و یه پرانتز دیگه هم بعدش باز کنیم. این توابع همون موقع اجرا، تعریف میشن و بیشتر برای زمانی استفاده میشن که شاید کال بک یا مقدار بازگشتی داشته باشین.(function (num1, num2){ return num1 + num2; })()خب توی این مطلب سعی کردم انواع توابع توی جاوا اسکریپت را براتون یاداوری کنم. من خودم بیشتر از arrow function ها استفاده میکنم. امیدوارم این مطلب براتون مفید بوده باشه.با تشکرhttp://dornica.net/

کنسول هایی که هر برنامه نویس JavaScript باید بداند ...

Mohammad Ghorayshi — Wed, 25 Dec 2019 15:44:00 +0330

اینکه JS کار کرده باشین و با Console آشنا نباشین کمی عجیبه ولی الان میخوام Consoleهایی که میتونه خیلی بیشتر بهمون کمک کنه را یادآوری کنم. در همه مرورگر قابلیتی با نام Console وجود داره که برای دیباگ کردن کدهای JS بدردمون میخوره.console.log(); خب این کنسول توابعی را در اختیارمون قرار داده که میتونه توی مدیریتِ دیباگ کردن کدها بیشتر بهمون کمک کنه مثلا :console.log(); console.info(); console.warn(); console.error();console.log() | info() | debug() | warn() | error()خب هر کدوم از این موارد رنگ های مربوط به خودش را داره و توی هر خط بهتون نمایش میدهconsole.log('log'); console.info('info'); console.debug('debug'); console.warn('warn'); console.error('error');console.log()/info()/debug()/warn()/error()استفاده از placeholderکلمات مختصری وجود داره که اگر توی console بزاریم بعد میتونیم براش مقدار درنظر بگیریم o% : آبجکت s% : رشته d% : اعداد صحیحvar test = { 'number':10, 'name': 'Dornika', 'work': 'Web & Mobile Developer'}; console.log('your name are %s, your number are %d and your account detial is %o', test.name, test.number, test );مثالی برای استفاده از placeholder در کنسول اضافه کردن CSS به consoleاگر یکنواختی رنگ ها توی console براتون خسته کننده باشه یا اینکه نمیخواین از استایل پیش فرضی که کنسول بهتون داده استفاده کنین، میتونین خودتون استایل شخصی به هر کنسول بدین و هر پیام را با استایل خاصی مشخص کنین.console.log('%cThis example for add CSS to console', 'color: green; font-size: x-large');مثالی برای افزودن css به کنسول، به c% دقت کنیننمایش فایل های JSON با console.dirبرای نمایش فایل های json میتونین از این کنسول هم استفاده کنیننمایش جدولی فایل ها JSONبا استفاده از دستور زیر میتونین فایل های json را قابل فهم تر و آسون تر نمایش بدین.console.table();var json_var = [{id: '1', name:'dornica'},{id: '2', name: 'Mohammad'}, {id: '3', name: 'Ali'}]; console.table(json_var)console.table()گروه بندی کنسول ها برای مدیریت کنسول ها برای زمانیکه تعداد کنسول زیاد داشته باشیم، شاید بعضی جاها نیاز باشه که چند تا کنسول را توی هم نمایش بدیم.console.group() & console.groupEnd();console.group(); //group 1 started console.log('group 1'); console.group(); // group 2 started console.log( 'group 2'); console.groupEnd(); // group 2 ended console.groupEnd(); // group 1 endedمثالی برای گروه بندی consoleشمارنده کنسول هاconsole.count( optional: 'label' );برای اینکه بدونیم برای مثال یک حلقه چند بار تکرار شده یا در کل بخوایم بدونیم تابع count چند بار صدا زده شده میتونیم از این متد استفاده کنیم. خب شاید بپرسین اگر توی برنامه دو یا چند حلقه داشته باشیم باید چیکار کنیم؟ این تابع مقدار ورودی به عنوان لیبل میگیره که میتونه هر حلقه را جداگانه بشماره.for(let i=0; i<5; i++){ console.count('loop 1'); }for(let i=0; i<5; i++){ console.count('loop 1 '); for( let j=0; j<4; j++) console.count('loop 2 '); }مثالی برای شمارنده کنسولاین مورد حتما بدردتون میخورهconsole.assert();خب این تابع بهتون کمک میکنه یه سری شرایط خاص را نمایش بده برای مثال اگر میخواین ببینین جایی از برنامه اگر عدد زوج نبود بهتون ارور بده که مشکلشو برطرف کنین از کد زیر استفاده کنین.for( let number=2; number<5; number+=1 ){ console.assert( number % 2 === 0 , 'is not even', number) }console.assert()برای مسیریابی توابع از این کنسول استفاده کنینconsole.trace();function parentFunction(){ childFunction(); } function childFunction(){ console.trace(); } parentFunction() ;cاین نشون میده از تابع childFunction به تابع parentFunction میریم، حالا مثال زیادی داره که توی اسکریپت میشه استفاده کردمدیریت زمانconsole.time();برای اینکه بتونین زمان را توی اسکریپت مدیریت کنین و بدونین در چه زمانی کارهایی که گفتین انجام میشه میتونین از این تابع استفاده کنین. این تابع هم مثل count لیبل میگیره.console.time( 'time test'); for(let j=0; j<100; j++){ // do anything } console.timeEnd('time test');console.time()خب همه این مواردی که یادآوری کردم را میتونین با یه دستور پاک کنین و از ابتدا خودتون تست بگیرین.console.clear();مواردی که فکر میکردم شاید بدردتون بخوره و برای خودم هم یادآوری یشه را گفتم، البته توابع دیگه ای هم داره ولی من خودم بیشتر از این ها برای پیدا کردن باگ یا پارس کردن برنامه استفاده میکنم، خوشحال میشم شما هم تجربیاتتون را با من به اشتراک بزارین.با تشکرhttp://dornica.net