💎 کلون کردن دو #آرایه
برای کلون کردن دو آرایه از Spread operator استفاده کنید
const myArray = [2,3,5]
const clonedArray = [...myArray]
در صورتی که به صورت ساده بنویسید
clonedArray = myArray
آدرس خانه حافظه دو آرایه same خواهد بود و با هر تغییر در آرایه اصلی یا کلون شده، تغییر در هر دو آرایه اعمال خواهد شد

@pieceJs

💎 کلون کردن دو #آبجکت
برای کلون کردن دو آبجکت، نمیتوان به صورت مستقیم بنویسید obj1=obj2 چون این عمل شمارا با خطا روبرو میکند همچنین نمیتوانید از Spread Operator نیز استفاده کنید چون ادرس خانه های حافظه ان ها نیز same خواهد شد
برای کلون کردن یک آبجکت، بهتر است ابتدا آبجکت را به رشته و سپس مجددا رشته را به آبجکت تبدیل کنید این موضوع باعث ایجاد آبجکت جدید خواهد شد
const myObj = {name:"milad"}
const clonedObj = JSON.parse(JSON.stringify(myObj))

نکته: اگر یک ارایه داشته باشید که فقط یکی از اون خونه هاش ابجکت هست هم باز از قانون بالا تبعیت میکند

@pieceJs

💎 مفهوم Deep Copy و Shallow Copy
Deep Copy :
یعنی کلون/کپی کردن یک آبجکت، با رفرنس متفاوت در حافظه

Shallow Copy :
یعنی کلون/کپی کردن یک آبجکت با خانه یکسان در حافظه

@pieceJS

💎 چگونه میتوان با استفاده از #جیکوئری ، یک #آبجکت را کپی یا کلون کرد

// Shallow copy
var objectIsNew = jQuery.extend({}, objectIsOld);

// Deep copy
var objectIsNew = jQuery.extend(true, {}, objectIsOld);


@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

💎 مختصری از arguments در #فانکشن ها
تمامی آرگومان های یک تابع، علاوه بر صدا زدن مستقیم آن ها، میتوان به عنوان آرایه به نام arguments نیز دریافت کرد
به عنوان مثال، تابع زیر را در نظر بگیرید
fucntion myFunc(x,y,z){
}
آرگومان های این تابع را علاوه بر اینکه میتوان مستقیما صدا زد، میتوان به عنوان عضو هایی از ارایه arguments نیز قابل دست یابی بود
arguments[0] === x
arguments[1] === z
arguments[2] === y

اکنون میتوان گفت سه شرط بالا هر سه true خواهند بود
اگر هنگام تعریف تابع هیچ آرگومانی برایش تعریف نکنید، به هنگام استفاده می توان بی نهایت مقدار به عنوان آرگومان به آن تابع بدهید و در بدنه تابع نیز به عنوان آرایه ای به نام arguments آن ها را دریافت کنید.

@pieceJS

💎 تفاوت حلقه های for..in و for..of

حلقه for..in : این حلقه بر روی property های یک آرایه یا آبجکت حقله میزند و ایندکس یا نام پراپرتی ها را به عنوان key (که در تصویر بالا این key را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.

حلقه for..of : این حلقه بر روی مقادیر یک آرایه یا آبجکت حقله میزند و مقدار هر پراپرتی را به عنوان یک Object (که در تصویر بالا این آبجکت را i نام گذاری کرده ایم) در هر بار حلقه زدن برمیگرداند.

@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

💎 مختصری در مورد دام مجازی (Virtual DOM)

تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد.
فریم ورک ریکت، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما ریکت، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس).

فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت :
- با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند.
- فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود.
- ریکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند.
- پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد.
- حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند.
- در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود.

@pieceJS

💎 تفاوت متد ()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

💎 تفاوت Query Parameter با URL Parameter

از نظر فنی این دو با هم هیچ تفاوتی ندارند و هر دو برای ارسال اطلاعات از طریق متد GET استفاده می شود.
ساختار این دو به صورت زیر است
Query Parameter:
domain.com/products?search=tomato
URL Parameter:
domain.com/products/tomato
نتیجتاً میتوان گفت بستگی به ساختار API دارد که قصد استفاده از آن را دارید میتوانید از یکی از این ساختار ها استفاده کنید.
از نظر کاربرد می توان گفت، زمانی از URL پارامتر استفاده میشود که قصد دسترسی به یک سری دیتای استاتیک را داریم اما زمانی از کوئری پارامتر استفاده میشود که قصد دستیابی به دیتا های داینامیک را داریم مانند موتور جستجو. (در سرچ سایت هم از کوئری استرینگ(پارامتر) استفاده میشود)

🌐 @pieceJS

💎 نحوه تعریف Query Parameter و URL Parameter با استفاده از اکسپرس

نوع 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