💎 کلون کردن دو #آرایه
برای کلون کردن دو آرایه از Spread operator استفاده کنید
const myArray = [2,3,5]
const clonedArray = [...myArray]
در صورتی که به صورت ساده بنویسید
clonedArray = myArray
آدرس خانه حافظه دو آرایه same خواهد بود و با هر تغییر در آرایه اصلی یا کلون شده، تغییر در هر دو آرایه اعمال خواهد شد
@pieceJs
برای کلون کردن دو آرایه از Spread operator استفاده کنید
const myArray = [2,3,5]
const clonedArray = [...myArray]
در صورتی که به صورت ساده بنویسید
clonedArray = myArray
آدرس خانه حافظه دو آرایه same خواهد بود و با هر تغییر در آرایه اصلی یا کلون شده، تغییر در هر دو آرایه اعمال خواهد شد
@pieceJs
🔥5
💎 کلون کردن دو #آبجکت
برای کلون کردن دو آبجکت، نمیتوان به صورت مستقیم بنویسید obj1=obj2 چون این عمل شمارا با خطا روبرو میکند همچنین نمیتوانید از Spread Operator نیز استفاده کنید چون ادرس خانه های حافظه ان ها نیز same خواهد شد
برای کلون کردن یک آبجکت، بهتر است ابتدا آبجکت را به رشته و سپس مجددا رشته را به آبجکت تبدیل کنید این موضوع باعث ایجاد آبجکت جدید خواهد شد
const myObj = {name:"milad"}
const clonedObj = JSON.parse(JSON.stringify(myObj))
نکته: اگر یک ارایه داشته باشید که فقط یکی از اون خونه هاش ابجکت هست هم باز از قانون بالا تبعیت میکند
@pieceJs
برای کلون کردن دو آبجکت، نمیتوان به صورت مستقیم بنویسید obj1=obj2 چون این عمل شمارا با خطا روبرو میکند همچنین نمیتوانید از Spread Operator نیز استفاده کنید چون ادرس خانه های حافظه ان ها نیز same خواهد شد
برای کلون کردن یک آبجکت، بهتر است ابتدا آبجکت را به رشته و سپس مجددا رشته را به آبجکت تبدیل کنید این موضوع باعث ایجاد آبجکت جدید خواهد شد
const myObj = {name:"milad"}
const clonedObj = JSON.parse(JSON.stringify(myObj))
نکته: اگر یک ارایه داشته باشید که فقط یکی از اون خونه هاش ابجکت هست هم باز از قانون بالا تبعیت میکند
@pieceJs
🔥4👍1
💎 مفهوم Deep Copy و Shallow Copy
Deep Copy :
یعنی کلون/کپی کردن یک آبجکت، با رفرنس متفاوت در حافظه
Shallow Copy :
یعنی کلون/کپی کردن یک آبجکت با خانه یکسان در حافظه
@pieceJS
Deep Copy :
یعنی کلون/کپی کردن یک آبجکت، با رفرنس متفاوت در حافظه
Shallow Copy :
یعنی کلون/کپی کردن یک آبجکت با خانه یکسان در حافظه
@pieceJS
👍2
💎 سینتکس ساخت متد در یک #آبجکت
برای ساخت متد در یک آبجکت، دو روش وجود دارد،
اولین روش استفاده از فانکشن های معمولی است که به صورت زیر استفاده می شود
let myFunc = {
showArgs(){
console.log(arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);
روش دوم، استفاده از arrow function هاست
let myFunc = {
showArgs : () => {
console.log(...arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);
@pieceJS
برای ساخت متد در یک آبجکت، دو روش وجود دارد،
اولین روش استفاده از فانکشن های معمولی است که به صورت زیر استفاده می شود
let myFunc = {
showArgs(){
console.log(arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);
روش دوم، استفاده از arrow function هاست
let myFunc = {
showArgs : () => {
console.log(...arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);
@pieceJS
👍1
💎 مختصری از arguments در #فانکشن ها
تمامی آرگومان های یک تابع، علاوه بر صدا زدن مستقیم آن ها، میتوان به عنوان آرایه به نام arguments نیز دریافت کرد
به عنوان مثال، تابع زیر را در نظر بگیرید
fucntion myFunc(x,y,z){
}
آرگومان های این تابع را علاوه بر اینکه میتوان مستقیما صدا زد، میتوان به عنوان عضو هایی از ارایه arguments نیز قابل دست یابی بود
arguments[0] === x
arguments[1] === z
arguments[2] === y
اکنون میتوان گفت سه شرط بالا هر سه true خواهند بود
اگر هنگام تعریف تابع هیچ آرگومانی برایش تعریف نکنید، به هنگام استفاده می توان بی نهایت مقدار به عنوان آرگومان به آن تابع بدهید و در بدنه تابع نیز به عنوان آرایه ای به نام arguments آن ها را دریافت کنید.
@pieceJS
تمامی آرگومان های یک تابع، علاوه بر صدا زدن مستقیم آن ها، میتوان به عنوان آرایه به نام arguments نیز دریافت کرد
به عنوان مثال، تابع زیر را در نظر بگیرید
fucntion myFunc(x,y,z){
}
آرگومان های این تابع را علاوه بر اینکه میتوان مستقیما صدا زد، میتوان به عنوان عضو هایی از ارایه arguments نیز قابل دست یابی بود
arguments[0] === x
arguments[1] === z
arguments[2] === y
اکنون میتوان گفت سه شرط بالا هر سه true خواهند بود
اگر هنگام تعریف تابع هیچ آرگومانی برایش تعریف نکنید، به هنگام استفاده می توان بی نهایت مقدار به عنوان آرگومان به آن تابع بدهید و در بدنه تابع نیز به عنوان آرایه ای به نام arguments آن ها را دریافت کنید.
@pieceJS
🔥4
💎 تفاوت حلقه های for..in و for..of
حلقه for..in : این حلقه بر روی property های یک آرایه یا آبجکت حقله میزند و ایندکس یا نام پراپرتی ها را به عنوان key (که در تصویر بالا این key را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.
حلقه for..of : این حلقه بر روی مقادیر یک آرایه یا آبجکت حقله میزند و مقدار هر پراپرتی را به عنوان یک Object (که در تصویر بالا این آبجکت را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.
@pieceJS
حلقه for..in : این حلقه بر روی property های یک آرایه یا آبجکت حقله میزند و ایندکس یا نام پراپرتی ها را به عنوان key (که در تصویر بالا این key را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.
حلقه for..of : این حلقه بر روی مقادیر یک آرایه یا آبجکت حقله میزند و مقدار هر پراپرتی را به عنوان یک Object (که در تصویر بالا این آبجکت را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.
@pieceJS
👍2
💎 تفاوت کوتیشن(')، دابل کوتیشن (") و بک تیک (`)
در جاوا اسکریپت، کوتیشن و دابل کوتیشن یک کاربرد داره و هر دو برای نوشتن یک رشته بکار میروند
در کنار این دو، بک تیک نیز داریم که این هم برای نوشتن رشته به کار میرود با این تفاوت که میتوانید در لابلای رشته خود از متغیر ها هم استفاده کنید (این ویژگی از ES6 به جاوا اسکریپت اضافه شد) به عنوان مثال :
const age = 26;
console.log(`
// my age is 26
نکته قابل توجه اینکه، زمانی که از بک تیک استفاده میکنید، میتوانید به صورت با اینتر به صورت چند سطری بنویسید این ویژگی برای زمانی مناسب است که قصد دارید یک قالب اچ تی ام ال رو به صورت استرینگ در یک متغیر ذخیره کنید و آن را در پروژه قرار دهید مانند زیر:
const MyTemplate = `<div>
<h1> Hey World... </h1>
</div>
`;
کد بالا دقیقا شبیه زمانی است که نوشته باشید
const MyTemplate =`
این قابلیت برای کوتیشن و دابل کوتیشن فعال نیست
@pieceJS
در جاوا اسکریپت، کوتیشن و دابل کوتیشن یک کاربرد داره و هر دو برای نوشتن یک رشته بکار میروند
در کنار این دو، بک تیک نیز داریم که این هم برای نوشتن رشته به کار میرود با این تفاوت که میتوانید در لابلای رشته خود از متغیر ها هم استفاده کنید (این ویژگی از ES6 به جاوا اسکریپت اضافه شد) به عنوان مثال :
const age = 26;
console.log(`
my age is ${age}`) // my age is 26
نکته قابل توجه اینکه، زمانی که از بک تیک استفاده میکنید، میتوانید به صورت با اینتر به صورت چند سطری بنویسید این ویژگی برای زمانی مناسب است که قصد دارید یک قالب اچ تی ام ال رو به صورت استرینگ در یک متغیر ذخیره کنید و آن را در پروژه قرار دهید مانند زیر:
const MyTemplate = `<div>
<h1> Hey World... </h1>
</div>
`;
کد بالا دقیقا شبیه زمانی است که نوشته باشید
const MyTemplate =`
<div><h1> Hey World... </h1></div>`;این قابلیت برای کوتیشن و دابل کوتیشن فعال نیست
@pieceJS
👍2
💎 مختصری در مورد دام مجازی (Virtual DOM)
تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد.
فریم ورک ریکت، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما ریکت، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس).
فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت :
- با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند.
- فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود.
- ریکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند.
- پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد.
- حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند.
- در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود.
@pieceJS
تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد.
فریم ورک ریکت، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما ریکت، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس).
فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت :
- با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند.
- فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود.
- ریکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند.
- پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد.
- حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند.
- در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود.
@pieceJS
👍12
💎 تفاوت متد ()setTimeout و setInterval()
متد setTimeout
با استفاده از این متد، میتوانید یک تابع را بعد از مدت زمان مشخص، یک بار و فقط یک بار صدا بزنید.
setTimeout(myFunction,time)
متد setInterval
با استفاده این متد، برخلاف متد setTimeout قادر خواهید بود یک تابع را به صورت مکرر در مدت زمانی مشخص صدا بزنید. به عنوان مثال، یک تابع بعد از هر 3 ثانیه یک بار مجدداً صدا زده شود.
setInterval(myFunction,time)
نکته1: این متد توسط، متد clearInterval متوقف خواهد شد.
نکته2: زمان تعیین شده (time)، باید به میلی ثانیه وارد شود و هر 1000 میلی ثانیه برابر 1 ثانیه خواهد بود.
نکته3: بر اساس استاندارد های HTML5، حداقل زمان برای صدا زدن یک تابع 4 میلی ثانیه می باشد، در نتیجه اگر زمان مورد نیاز برای صدا زدن تابع مورد نظرتان را کمتر از 4 میلی ثانیه وارد کردید یا اصلا زمان را مشخص نکردید به طور خودکار، زمان 4 میلی ثانیه در نظر گرفته می شود.
نکته4: Time تعیین شده، فقط زمانی محاسبه میشود که شما در صفحه یا تب فعلی از مرورگر خود قرار دارید، و اگر تب مرورگر را تغییر دهید این زمان متوقف خواهد شد تا مجدداً به تب فعلی برگردید. به عنوان مثال از 1000 میلی ثانیه ای که تعیین کردید 425 میلی ثانیه محاسبه شده باشد و شما وارد تب دیگری از مرورگر خود شوید زمان محاسبه روی 425 میلی ثانیه متوقف خواهد شد تا موقعی که مجددا به این تب برگردید و این زمان مجدداً ادامه پیدا کند تا به 1000 میلی ثانیه برسد.
نکته5: زمان تعیین شده، ممکن است اندکی با زمان واقعی تفاوت داشته باشد دلیل آن هم این است که پردازش زمان در سیستم شما صورت میگیرد و در صورتی که درصد بالایی از سی پی یو درگیر باشد، تب مرورگر را تغییر داده باشید، مصرف شارژ لپ تاپ مستقیماً روی باتری قرار گرفته باشد میتواند در سرعت شمارش زمان تاثیر داشته باشید و اندکی با زمان واقعی اختلاف پیدا کند.
@pieceJS
متد setTimeout
با استفاده از این متد، میتوانید یک تابع را بعد از مدت زمان مشخص، یک بار و فقط یک بار صدا بزنید.
setTimeout(myFunction,time)
متد setInterval
با استفاده این متد، برخلاف متد setTimeout قادر خواهید بود یک تابع را به صورت مکرر در مدت زمانی مشخص صدا بزنید. به عنوان مثال، یک تابع بعد از هر 3 ثانیه یک بار مجدداً صدا زده شود.
setInterval(myFunction,time)
نکته1: این متد توسط، متد clearInterval متوقف خواهد شد.
نکته2: زمان تعیین شده (time)، باید به میلی ثانیه وارد شود و هر 1000 میلی ثانیه برابر 1 ثانیه خواهد بود.
نکته3: بر اساس استاندارد های HTML5، حداقل زمان برای صدا زدن یک تابع 4 میلی ثانیه می باشد، در نتیجه اگر زمان مورد نیاز برای صدا زدن تابع مورد نظرتان را کمتر از 4 میلی ثانیه وارد کردید یا اصلا زمان را مشخص نکردید به طور خودکار، زمان 4 میلی ثانیه در نظر گرفته می شود.
نکته4: Time تعیین شده، فقط زمانی محاسبه میشود که شما در صفحه یا تب فعلی از مرورگر خود قرار دارید، و اگر تب مرورگر را تغییر دهید این زمان متوقف خواهد شد تا مجدداً به تب فعلی برگردید. به عنوان مثال از 1000 میلی ثانیه ای که تعیین کردید 425 میلی ثانیه محاسبه شده باشد و شما وارد تب دیگری از مرورگر خود شوید زمان محاسبه روی 425 میلی ثانیه متوقف خواهد شد تا موقعی که مجددا به این تب برگردید و این زمان مجدداً ادامه پیدا کند تا به 1000 میلی ثانیه برسد.
نکته5: زمان تعیین شده، ممکن است اندکی با زمان واقعی تفاوت داشته باشد دلیل آن هم این است که پردازش زمان در سیستم شما صورت میگیرد و در صورتی که درصد بالایی از سی پی یو درگیر باشد، تب مرورگر را تغییر داده باشید، مصرف شارژ لپ تاپ مستقیماً روی باتری قرار گرفته باشد میتواند در سرعت شمارش زمان تاثیر داشته باشید و اندکی با زمان واقعی اختلاف پیدا کند.
@pieceJS
👍4🔥2
💎 تفاوت Query Parameter با URL Parameter
از نظر فنی این دو با هم هیچ تفاوتی ندارند و هر دو برای ارسال اطلاعات از طریق متد GET استفاده می شود.
ساختار این دو به صورت زیر است
Query Parameter:
domain.com/products?search=tomato
URL Parameter:
domain.com/products/tomato
نتیجتاً میتوان گفت بستگی به ساختار API دارد که قصد استفاده از آن را دارید میتوانید از یکی از این ساختار ها استفاده کنید.
از نظر کاربرد می توان گفت، زمانی از URL پارامتر استفاده میشود که قصد دسترسی به یک سری دیتای استاتیک را داریم اما زمانی از کوئری پارامتر استفاده میشود که قصد دستیابی به دیتا های داینامیک را داریم مانند موتور جستجو. (در سرچ سایت هم از کوئری استرینگ(پارامتر) استفاده میشود)
🌐 @pieceJS
از نظر فنی این دو با هم هیچ تفاوتی ندارند و هر دو برای ارسال اطلاعات از طریق متد GET استفاده می شود.
ساختار این دو به صورت زیر است
Query Parameter:
domain.com/products?search=tomato
URL Parameter:
domain.com/products/tomato
نتیجتاً میتوان گفت بستگی به ساختار API دارد که قصد استفاده از آن را دارید میتوانید از یکی از این ساختار ها استفاده کنید.
از نظر کاربرد می توان گفت، زمانی از URL پارامتر استفاده میشود که قصد دسترسی به یک سری دیتای استاتیک را داریم اما زمانی از کوئری پارامتر استفاده میشود که قصد دستیابی به دیتا های داینامیک را داریم مانند موتور جستجو. (در سرچ سایت هم از کوئری استرینگ(پارامتر) استفاده میشود)
🌐 @pieceJS
👍3🔥2
💎 نحوه تعریف Query Parameter و URL Parameter با استفاده از اکسپرس
نوع URL Parameter
نوع متد GET می باشد. پارامتر هایی که قصد دستیابی به آن ها داریم را باید به وسله :/ از هم جدا کنیم به عنوان مثال در آدرس زیر قصد دستیابی به پارامتر username را داریم لذا باید بعد از / بنویسیم :username به همین صورت میتوان پارامتر های دیگر را نیز دریافت کرد.
سپس مقدار این پارامتر ها از طریق دستور req.params به صورت آبجکت قابل دسترسی میباشد
نوع متد GET می باشد. برای تعریف این پارامتر ها نیازی به استفاده از ساختار خاصی نیست.
اما جهت دسترسی به مقدار کوئری پارامتر ها میتوان به صورت آبجکت از req.query دریافت کرد. تعریف این پارامتر ها از جایی شروع میشود که در URL از (Questrion Mark) یا همان علامت سوال استفاده میشود. و پس از علامت سوال هر متغیر به وسیله امپرسن یا یا همان علامت & از هم جدا میشود.
نوع URL Parameter
نوع متد GET می باشد. پارامتر هایی که قصد دستیابی به آن ها داریم را باید به وسله :/ از هم جدا کنیم به عنوان مثال در آدرس زیر قصد دستیابی به پارامتر username را داریم لذا باید بعد از / بنویسیم :username به همین صورت میتوان پارامتر های دیگر را نیز دریافت کرد.
سپس مقدار این پارامتر ها از طریق دستور req.params به صورت آبجکت قابل دسترسی میباشد
// localhost/max => output: max
app.get(“/:username”, (req, res) => {
res.send(req.params.username)
})
نوع Query Parameterنوع متد GET می باشد. برای تعریف این پارامتر ها نیازی به استفاده از ساختار خاصی نیست.
اما جهت دسترسی به مقدار کوئری پارامتر ها میتوان به صورت آبجکت از req.query دریافت کرد. تعریف این پارامتر ها از جایی شروع میشود که در URL از (Questrion Mark) یا همان علامت سوال استفاده میشود. و پس از علامت سوال هر متغیر به وسیله امپرسن یا یا همان علامت & از هم جدا میشود.
// localhost/user?name=max&age=23 output: max 23
app.get(“/user”, (req, res) => {
res.send(req.query.name + “ “ + req.query.age)
})
🌐 @pieceJS👍7
💎 انواع دیتا در جاوااسکریپت از نگاه دیگر
به طور کلی دیتا در جاوااسکریپت به دو دسته Refrence type یا Object Type و Primitive type تقسیم میشود.
⭕️ دسته Primitive type به متغیر هایی گفته می شود که مقدارشان در خودشان ذخیره می شود و در حافظه جایی ندارند. در نتیجه وقتی آن ها را به متغیر دیگه نسبت میدیم (Assign میکنیم) باعث میشه آن متغییر هم مقدار مستقل پیدا کند. از انواع متغیر های این دسته میتوان به String, Null, Number, Undefined, Boolean و Symbol اشاره کرد.
مثال زیر می تونه مفهوم بالا رو به خوبی منتقل کند :
⭕️ دسته Refrence type یا Object Type متغیر هایی گفته میشود که مقدار آن ها در حافظه ذخیره می شود در واقع هر کدام از این متغیر ها خانه ای مستقل در حافظه دارند و آن ها را نمیتوان مانند متغیر های دسته ی Primitive type با نسبت دادنشون به متغیر دیگه، متغیر جدید را ایجاد کرد بلکه در مورد این دسته از متغیر ها، از نظر جاوا اسکریپت، هر دو متغیر به یک خانه از حافظه اشاره دارند و مقدار آن ها از یکدیگر مستقل نیست در نتیجه با تغییر مقدار هرکدام از این متغیر ها، متغیر دیگر نیز تغییر پیدا میکند. از انواع متغیر های این دسته میتوان به Object، Function، Array، Date و Collection اشاره کرد
مثال :
این دسته از متغیر ها، از نظر رفرنس آن ها با هم مقایسه می شوند نه مقدار آن ها.
#سوال_مصاحبه #متغیر_ها
🌐 @pieceJS
به طور کلی دیتا در جاوااسکریپت به دو دسته Refrence type یا Object Type و Primitive type تقسیم میشود.
⭕️ دسته Primitive type به متغیر هایی گفته می شود که مقدارشان در خودشان ذخیره می شود و در حافظه جایی ندارند. در نتیجه وقتی آن ها را به متغیر دیگه نسبت میدیم (Assign میکنیم) باعث میشه آن متغییر هم مقدار مستقل پیدا کند. از انواع متغیر های این دسته میتوان به String, Null, Number, Undefined, Boolean و Symbol اشاره کرد.
مثال زیر می تونه مفهوم بالا رو به خوبی منتقل کند :
let numOne = 50;و نکته مهم اینکه این دسته از متغیر ها با مقدارشان با هم مقایسه می شوند.
let numTwo = numOne; //numTwo=numOne=50
numOne = 100;
console.log(numOne); //outputs 100
console.log(numTwo); //outputs 50
⭕️ دسته Refrence type یا Object Type متغیر هایی گفته میشود که مقدار آن ها در حافظه ذخیره می شود در واقع هر کدام از این متغیر ها خانه ای مستقل در حافظه دارند و آن ها را نمیتوان مانند متغیر های دسته ی Primitive type با نسبت دادنشون به متغیر دیگه، متغیر جدید را ایجاد کرد بلکه در مورد این دسته از متغیر ها، از نظر جاوا اسکریپت، هر دو متغیر به یک خانه از حافظه اشاره دارند و مقدار آن ها از یکدیگر مستقل نیست در نتیجه با تغییر مقدار هرکدام از این متغیر ها، متغیر دیگر نیز تغییر پیدا میکند. از انواع متغیر های این دسته میتوان به Object، Function، Array، Date و Collection اشاره کرد
مثال :
let object1 = {
name:'Bingeh',
age:18
};
let object2 = object1;
//updating object1,
object1.age = 20;
console.log(object2); //we see that object2 also updates the age attribute
اگر کد بالا را تست کنید متوجه خواهید شد که با وجود تغییر پراپرتی age در آبجکت object1؛ مقدار پراپرتی age در object2 نیز تغییر پیدا کرده است دلیل آن، یکسان بودن خانه این دو متغیر در حافظه است.این دسته از متغیر ها، از نظر رفرنس آن ها با هم مقایسه می شوند نه مقدار آن ها.
#سوال_مصاحبه #متغیر_ها
🌐 @pieceJS
👍11👏1
💎 تفاوت های var، const و let و یک نکته مهم
👈 متغیر های تعریف شده توسط var، سطح تابعی یا Function Level هستند یعنی در تمام اسکوپ های تعریف شده درون تابعی که از آن استفاده شده، قابل دسترس می باشد.
اما
👈 متغیر هایی که توسط let یا const تعریف شده اند، Block Level هستند یعنی فقط در اسکوپی که تعریف شده اند قابل دسترسی هستند و بیرون اون اسکوپ غیر قابل دسترس است.
✳️ نکته: منظور از اسکوپ، محدوده ای هست که توسط آکولاد باز و بسته یعنی { } مشخص میشود و متغیر ما در آن قابل دسترس می باشد.
✳️ نکته مهم: در صورتی که از هیچ کدام از واژه های const و let و var جهت تعریف کردن متغیر ها استفاده نکنید متغیر تعریف شده دارای اسکوپ گلوبال بوده و در تمام اسکوپ ها و فانکشن ها قابل دسترسی است.
✳️ از نگاه Hoisting : در زمان اجرای برنامه، تنها متغیر های تعریف شده از نوع var و فانکشن ها به طور کامل Hoist میشوند و متغیر های تعریف شده از نوع let و const و همچنین class ها در مرحله Hoisting فقط کامپایل میشوند و به هنگام استفاده مقدار دهی نمیشود ( به هنگام استفاده قبل از Declare و Initialization خطای ReferenceError برگشت داده میشود ).
🌐 @pieceJS
👈 متغیر های تعریف شده توسط var، سطح تابعی یا Function Level هستند یعنی در تمام اسکوپ های تعریف شده درون تابعی که از آن استفاده شده، قابل دسترس می باشد.
اما
👈 متغیر هایی که توسط let یا const تعریف شده اند، Block Level هستند یعنی فقط در اسکوپی که تعریف شده اند قابل دسترسی هستند و بیرون اون اسکوپ غیر قابل دسترس است.
✳️ نکته: منظور از اسکوپ، محدوده ای هست که توسط آکولاد باز و بسته یعنی { } مشخص میشود و متغیر ما در آن قابل دسترس می باشد.
✳️ نکته مهم: در صورتی که از هیچ کدام از واژه های const و let و var جهت تعریف کردن متغیر ها استفاده نکنید متغیر تعریف شده دارای اسکوپ گلوبال بوده و در تمام اسکوپ ها و فانکشن ها قابل دسترسی است.
✳️ از نگاه Hoisting : در زمان اجرای برنامه، تنها متغیر های تعریف شده از نوع var و فانکشن ها به طور کامل Hoist میشوند و متغیر های تعریف شده از نوع let و const و همچنین class ها در مرحله Hoisting فقط کامپایل میشوند و به هنگام استفاده مقدار دهی نمیشود ( به هنگام استفاده قبل از Declare و Initialization خطای ReferenceError برگشت داده میشود ).
🌐 @pieceJS
👍8🔥3
#آبجکت
💎 نکات کاربردی درمورد آبجکت ها
👈 برای حذف پراپرتی های درون یک آبجکت می توانید از دستور Delete obj.property استفاده کنید که در این دستور obj نام آبجکت و property نام پراپرتی مورد نظر می باشد.
👈نام پراپرتی چند کلمه ای را باید درون دابل کوتیشن قرار داد مانند مثال زیر :
نکته: نام متغیر fruit را می بایست درون کروشه [ ] قرار دهید.
👈 در صورتی که نام پراپرتی و متغیر حامل مقدار آن پراپرتی، با هم یکسان باشد می توانید به صورت زیر خلاصه بنویسید.
👈 در انتخاب نام پراپرتی، میتوانید از اعداد نیز استفاده کنید. جاوااسکریپت اعداد استفاده شده در نام پراپرتی را به طور خودکار به رشته تبدیل می کند.
👈 برای بررسی وجود یا عدم وجود یک پراپرتی در یک آبجکت میتوانید از دستور in استفاده کنید
👈 برای حلقه زدن در یک آبجکت میتوانید از حلقه ی for ... in استفاده کنید به سینتکس زیر :
🌐 @pieceJS
💎 نکات کاربردی درمورد آبجکت ها
👈 برای حذف پراپرتی های درون یک آبجکت می توانید از دستور Delete obj.property استفاده کنید که در این دستور obj نام آبجکت و property نام پراپرتی مورد نظر می باشد.
👈نام پراپرتی چند کلمه ای را باید درون دابل کوتیشن قرار داد مانند مثال زیر :
const myObj = {
"first Name" : "milad",
age:30,
country: "IRAN"
}
👈 نام ویژگی/پراپرتی های چند کلمه ای را نمی توان به نقطه نوشت.myObj.first Name = "milad" // SyntaxError👈 برای دریافت نام یک ویژگی از کاربر به وسیله تابع prompt می توانید به شکل زیر عمل کنید
myObj["first Name"] ="milad" // --> milad
let fruit = prompt("Which fruit to buy?", "apple");
let bag = {
[fruit]: 5
};
alert( bag.apple );
در مثال بالا اگر نام ویژگی توسط کاربر apple وارد شود دستور آلرت مقدار 5 را نمایش می دهد در غیر این undefined را برگشت می دهد.نکته: نام متغیر fruit را می بایست درون کروشه [ ] قرار دهید.
👈 در صورتی که نام پراپرتی و متغیر حامل مقدار آن پراپرتی، با هم یکسان باشد می توانید به صورت زیر خلاصه بنویسید.
let age = 30;دستور بالا با دستور زیر عملکرد یکسانی خواهد داشت
let name = "milad"
const person = {
age,
name
}
let age = 30;👈 برخلاف متغیر ها که نمی توان از اسامی رزرو شده نظیر for , return و نظیر آن استفاده کرد، در انتخاب اسم پراپرتی ها بدون این محدودیت میتوانید از اسامی رزرو شده استفاده کنید.
let name = "milad"
const person = {
age:age,
name:name
}
👈 در انتخاب نام پراپرتی، میتوانید از اعداد نیز استفاده کنید. جاوااسکریپت اعداد استفاده شده در نام پراپرتی را به طور خودکار به رشته تبدیل می کند.
const obj = {
0: "milad"
}
console.log(obj[0]===obj["0"]) // true
👈 در انتخاب نام پراپرتی نمیتوانید از عبارت __proto__ استفاده کنید.👈 برای بررسی وجود یا عدم وجود یک پراپرتی در یک آبجکت میتوانید از دستور in استفاده کنید
"key" in myObjدستور بالا، پراپرتی ای به نام key را در آبجکت myObj جستجو می کند و خروجی آن به صورت بولین خواهد بود.
👈 برای حلقه زدن در یک آبجکت میتوانید از حلقه ی for ... in استفاده کنید به سینتکس زیر :
for (key in object) {
....
}
کد بالا، در هر بار حله زدن، نام پراپرتی ها به ترتیب در متغیر key قابل دسترس خواهد بود.🌐 @pieceJS
👍6👏2
💎 مروری بر انواع واحد های اندازه گیری
به طور کلی، واحد های اندازه گیری به دو دسته مطلق و نسبی تقسیم می شوند. واحد های مطلق، واحد هایی هستند که خود به تنهایی تعیین کننده سایز آن المان هستند اما واحد های نسبی، با توجه به شرایط سایر المان ها یا صفحه، و نسبت تعیین شده، تعیین سایز می کنند.
👈 از دسته واحد های مطلق می توان به واحد های زیر اشاره کرد:
cm : سانتی متر
mm : میلی متر
in : اینچ
px: پیکسل
pt: نقطه
pc: پیکا
نکته 1: هر اینچ برابر96 پیکسل و 2.54 سانتی متر است
نکته 2: هر pt برابر 1/72 اینچ و 1/12 pc است
👈 از سری واحد های نسبی نیز می توان به واحد های زیر اشاره کرد:
em: این واحد جهت تنظیم سایز فونت ها به کار میرود و به واحد المنت والد وابسته است و هر em برابر است با سایز فونت المنت والد. به عنوان مثال اگر فونت المنت واحد 10 پیکسل باشد و المنت فرزند دارای فونت با سایز 2em باشد میتوان گفت سایز فونت این المنت 20 پیکسل محاسبه می شود.
rem: سایز فونت را نسبت به سایز تعیین شده برای روت تعیین می کند. این روت می تواند استایل تگ html باشد. اگر برای این تگ سایزی مشخص نشده باشد، نسبت به سایز پیشفرض فونت بروزر تعیین می شود (که عموماً 16 پیکسل می باشد)
vw: تعیین سایز المنت نسبت به 1 درصد سایز عرض صفحه انجام میگیرد. به عنوان مثال اگر عرض صفحه (width) برابر 900 پیکسل باشد، 1vw برابر 9 پیکسل خواهد بود.
vh: تعیین سایز المنت نسبت به 1 درصد سایز طول صفحه انجام میگیرد. به عنوان مثال اگر طول صفحه (hight) برابر 900 پیکسل باشد، 1vh برابر 9 پیکسل خواهد بود.
%: تعیین سایز المنت به نسبت سایز المنت والد. به عنوان مثال اگر طول المنت والد 100 پیکسل باشد و طول المنت فرزند 35% در نظر بگیریم، بروزر به طور خودکار آن را 35 پیکسل در نظر می گیرد.
نکته: از واحد های نسبی، عموماً برای رسپانسیو کردن سایت بکار می رود.
🌐 @pieceJS
به طور کلی، واحد های اندازه گیری به دو دسته مطلق و نسبی تقسیم می شوند. واحد های مطلق، واحد هایی هستند که خود به تنهایی تعیین کننده سایز آن المان هستند اما واحد های نسبی، با توجه به شرایط سایر المان ها یا صفحه، و نسبت تعیین شده، تعیین سایز می کنند.
👈 از دسته واحد های مطلق می توان به واحد های زیر اشاره کرد:
cm : سانتی متر
mm : میلی متر
in : اینچ
px: پیکسل
pt: نقطه
pc: پیکا
نکته 1: هر اینچ برابر96 پیکسل و 2.54 سانتی متر است
نکته 2: هر pt برابر 1/72 اینچ و 1/12 pc است
👈 از سری واحد های نسبی نیز می توان به واحد های زیر اشاره کرد:
em: این واحد جهت تنظیم سایز فونت ها به کار میرود و به واحد المنت والد وابسته است و هر em برابر است با سایز فونت المنت والد. به عنوان مثال اگر فونت المنت واحد 10 پیکسل باشد و المنت فرزند دارای فونت با سایز 2em باشد میتوان گفت سایز فونت این المنت 20 پیکسل محاسبه می شود.
rem: سایز فونت را نسبت به سایز تعیین شده برای روت تعیین می کند. این روت می تواند استایل تگ html باشد. اگر برای این تگ سایزی مشخص نشده باشد، نسبت به سایز پیشفرض فونت بروزر تعیین می شود (که عموماً 16 پیکسل می باشد)
vw: تعیین سایز المنت نسبت به 1 درصد سایز عرض صفحه انجام میگیرد. به عنوان مثال اگر عرض صفحه (width) برابر 900 پیکسل باشد، 1vw برابر 9 پیکسل خواهد بود.
vh: تعیین سایز المنت نسبت به 1 درصد سایز طول صفحه انجام میگیرد. به عنوان مثال اگر طول صفحه (hight) برابر 900 پیکسل باشد، 1vh برابر 9 پیکسل خواهد بود.
%: تعیین سایز المنت به نسبت سایز المنت والد. به عنوان مثال اگر طول المنت والد 100 پیکسل باشد و طول المنت فرزند 35% در نظر بگیریم، بروزر به طور خودکار آن را 35 پیکسل در نظر می گیرد.
نکته: از واحد های نسبی، عموماً برای رسپانسیو کردن سایت بکار می رود.
🌐 @pieceJS
👍8
💎 عملگر Nullish Coalescing چیست؟
در آپدیت اکما اسکریپت 2020 از عملگری رونمایی شد به نام Nullish Coalescing، که این عملگرد به شکل ?? تعریف می شود و مقدار نالیش یک متغیر را بررسی می کند. به عبارت دیگر چک می کند که آیا متغیر مقدار null یا undefined را دارد یا خیر؟ به عنوان مثال در تیکه کد زیر، خروجی ما رشته "milad" می باشد.
🟡 نکته مهم: ممکنه بگید این عملگر دقیقاً داره کار عملگر || یا همان OR را انجام میدهد. اما نکته مهم اینه که عملگر or تمام مقدار های falsy را بررسی می کند اما عملگر ?? فقط مقدار نال و آندیفایند را بررسی خواهد کرد.
💬 تعریف: به مقدار های زیر، مقدار های کاذب یا اصطلاح برنامه نویسیش falsy value گفته میشود (آخرین مورد در مقادیر زیر، رشته توخالی است)
null , Undefined , false , 0, NaN, ''
🌐 @pieceJS
در آپدیت اکما اسکریپت 2020 از عملگری رونمایی شد به نام Nullish Coalescing، که این عملگرد به شکل ?? تعریف می شود و مقدار نالیش یک متغیر را بررسی می کند. به عبارت دیگر چک می کند که آیا متغیر مقدار null یا undefined را دارد یا خیر؟ به عنوان مثال در تیکه کد زیر، خروجی ما رشته "milad" می باشد.
var firstName;دلیل آن هم این است که firstName مقدار دهی اولیه نشده است لذا مقدار undefined را خواهد داشت و چون از عملگر ?? استفاده کرده ایم مقدار 'milad' به جای undefined برگشت داده می شود.
alert(firstName ?? 'milad')
🟡 نکته مهم: ممکنه بگید این عملگر دقیقاً داره کار عملگر || یا همان OR را انجام میدهد. اما نکته مهم اینه که عملگر or تمام مقدار های falsy را بررسی می کند اما عملگر ?? فقط مقدار نال و آندیفایند را بررسی خواهد کرد.
💬 تعریف: به مقدار های زیر، مقدار های کاذب یا اصطلاح برنامه نویسیش falsy value گفته میشود (آخرین مورد در مقادیر زیر، رشته توخالی است)
null , Undefined , false , 0, NaN, ''
🌐 @pieceJS
👍11
💎 عملگر Optional Chaining چیست؟
گاهی وقتا آبجکتی رو به وسیله api دریافت میکنید و مطمئن نیستید که پراپرتی هایی که شما میخواهید آیا در آن آبجکت وجود دارد یا خیر. در وژن 3.7 به بعد تایپ اسکریپت، از عملگری معرفی شد به نام Optional Chaining که با علامت سوال و نقطه (.؟) نشان داده می شود. این عملگر، ابتدا بررسی می کند که آیا آن پراپرتی وجود دارد یا خیر، در صورتی که وجود داشته باشد از آن استفاده میکند در غیر این صورت undefined برمیگرداند.
گاهی وقتا آبجکتی رو به وسیله api دریافت میکنید و مطمئن نیستید که پراپرتی هایی که شما میخواهید آیا در آن آبجکت وجود دارد یا خیر. در وژن 3.7 به بعد تایپ اسکریپت، از عملگری معرفی شد به نام Optional Chaining که با علامت سوال و نقطه (.؟) نشان داده می شود. این عملگر، ابتدا بررسی می کند که آیا آن پراپرتی وجود دارد یا خیر، در صورتی که وجود داشته باشد از آن استفاده میکند در غیر این صورت undefined برمیگرداند.
console.log(persons?.reza?.job)💬 در کل بالا ابتدا چک می کند آیا پراپرتی reza وجود دارد یا خیر، اگر وجود داشته باشد بررسی می کند آیا پرارتی job در زیر مجموعه reza وجود دارد یا خیر. اگر از این عملگر استفاده نکنید و پراپرتی reza وجود نداشته باشد به هنگام بررسی پراپرتی job با خطای زیر برخورد خواهید کرد
Uncaught TypeError: Cannot read properties of undefined (reading 'job')قبل از معرفی این عملگر، برای جلوگیری از خطای بالا، کد رو به صورت زیر می نوشتیم:
console.log(persons.reza && persons.reza.job)🌐 @pieceJS
👍8
💎 دلیل رخ دادن خطای ReferenceError window is not defined
احتمالاً برای شما هم اتفاق افتاده که زمان استفاده از پروژه تان یکدفعه با کمال ناباوری خطای رفرنس ارور گرفتید.
به طور کلی خطای ReferenceError window is not defined در سه حالت زیر اتفاق می افته
🟣 حالت اول : قصد دارید از متد window در Nodejs استفاده کنید
🟣 حالت دوم : قصد دارید از آن در سرور نظیر Next.js استفاده کنید
🟣 حالت سوم: محیطی که استفاده می کنید مسئله ای نداره اما شما اشتباه تایپی دارید
💬 نکته: window متغیریست از نوع global و تمام حروف آن کوچک است
🌐 @pieceJS
احتمالاً برای شما هم اتفاق افتاده که زمان استفاده از پروژه تان یکدفعه با کمال ناباوری خطای رفرنس ارور گرفتید.
به طور کلی خطای ReferenceError window is not defined در سه حالت زیر اتفاق می افته
🟣 حالت اول : قصد دارید از متد window در Nodejs استفاده کنید
🟣 حالت دوم : قصد دارید از آن در سرور نظیر Next.js استفاده کنید
🟣 حالت سوم: محیطی که استفاده می کنید مسئله ای نداره اما شما اشتباه تایپی دارید
💬 نکته: window متغیریست از نوع global و تمام حروف آن کوچک است
🌐 @pieceJS
👍5
💎 7 متد پر کاربرد کلاس Date
getDay() :
عدد صحیح در مورد شماره روز هفته را بر اساس تقویم میلادی ریترن می کند بدین ترتیب، یکشنبه برابر عدد 0، دوشنبه عدد 1 و...
getDate() :
با استفاده از این متد میتوان عدد مربوط به روز را در تاریخ میلادی ریترن کنید. (مثلا در تاریخ 16-5-2022 عدد 16 برگشت داده میشود)
getMonth():
شماره ماه میلادی را برگشت میدهد.
نکته: شماره اولین ماه میلادی 0 است در نتیجه هر بار که از این متد استفاده می کنید باید آن را با عدد1 جمع بزنید تا عدد واقعی از نظر کاربر بدست آید.
getYear() :
عدد سال میلادی را منهای 1900 برمیگرداند مثلا برای سال 2022 عدد 122 را برگشت می دهد. (منسوخ شده)
getFullYear() :
عدد سال میلادی را به طور کامل برمیگرداند (مثلا 2022)
نکته: این متد از سال 1970 به بعد (تا سال 33658 😁) را می تواند برگشت دهد.
getSeconds() :
عدد مربوط به ثانیه فعلی را بر میگرداند
getTime() :
زمان را از 1970 میلادی به میلی ثانیه برمیگرداند
🌐 @pieceJS
getDay() :
عدد صحیح در مورد شماره روز هفته را بر اساس تقویم میلادی ریترن می کند بدین ترتیب، یکشنبه برابر عدد 0، دوشنبه عدد 1 و...
getDate() :
با استفاده از این متد میتوان عدد مربوط به روز را در تاریخ میلادی ریترن کنید. (مثلا در تاریخ 16-5-2022 عدد 16 برگشت داده میشود)
getMonth():
شماره ماه میلادی را برگشت میدهد.
نکته: شماره اولین ماه میلادی 0 است در نتیجه هر بار که از این متد استفاده می کنید باید آن را با عدد1 جمع بزنید تا عدد واقعی از نظر کاربر بدست آید.
getYear() :
عدد سال میلادی را منهای 1900 برمیگرداند مثلا برای سال 2022 عدد 122 را برگشت می دهد. (منسوخ شده)
getFullYear() :
عدد سال میلادی را به طور کامل برمیگرداند (مثلا 2022)
نکته: این متد از سال 1970 به بعد (تا سال 33658 😁) را می تواند برگشت دهد.
getSeconds() :
عدد مربوط به ثانیه فعلی را بر میگرداند
getTime() :
زمان را از 1970 میلادی به میلی ثانیه برمیگرداند
🌐 @pieceJS
👍4
💎 مقادیر Truthy و Falsy
به مقادیری که به منزله ی FALSE ارزیابی میشه رو مقادیر Falsy میگیم.
🟡 در #جاوااسکریپت 6 مقدار زیر رو به عنوان مقدار Falsy در نظر میگیره
🟡 مقادیر غیر از مقادیر بالا Truthy تفسیر خواهد شد.
💬 نکته: مقدار 0 به عنوان Falsy شناخته میشود اما رشته ی "0" به عنوان Truthy تفیسر میشه.
💬 نکته 2: آرایه خالی یا آبجکت خالی به عنوان Truthy در نظر گرفته میشه.
🌐 @pieceJS
به مقادیری که به منزله ی FALSE ارزیابی میشه رو مقادیر Falsy میگیم.
🟡 در #جاوااسکریپت 6 مقدار زیر رو به عنوان مقدار Falsy در نظر میگیره
undefined, null, NaN, 0, "" و falseبه مقادیری که به منزله ی TURE ارزیابی میشه رو مقادیر Truthy میگیم.
🟡 مقادیر غیر از مقادیر بالا Truthy تفسیر خواهد شد.
💬 نکته: مقدار 0 به عنوان Falsy شناخته میشود اما رشته ی "0" به عنوان Truthy تفیسر میشه.
💬 نکته 2: آرایه خالی یا آبجکت خالی به عنوان Truthy در نظر گرفته میشه.
🌐 @pieceJS
👍5🤔1