جاوااسکریپت یک گویش غامض میباشد. در صورتی توسعه و گسترشدهنده جاوااسکریپت در هر طراحی اپلیکیشن در مشهد سطحی میباشید، فهم و شعور مفاهیم بنیادی آن اساسی میباشد. این نوشتهی علمی به 12 معنا میپردازد که شعور آن برای هر بسطدهنده JS ای اساسی میباشد، البته به هیچ عنوان بیانکننده حجم بی نقص آنچه که بسطدهنده JS بایستی بداند وجود ندارد.
1. تخصیص دادن متغیر با مقدار در مقایسه با رفرنس
فهم روش تخصیص متغیرها در جاوااسکریپت برای تایپ کردن کدهای جاوااسکریپت فارغ از باگ امری اصلی میباشد. در صورتی این مورد را فهم و شعور نکنید، می توانید به راحتی کدی را بنویسید که ناخواسته مقادیر را تغییر تحول میدهد.
جاوااسکریپت مدام متغیرها را مطابق مقدار تخصیص میدهد. البته این نصیب بسیار اصلی میباشد: زمانی مقدار مخصوص یکیاز پنج نوع اساسی جاوااسکریپت باشد (یعنی Boolean، null، undefined، String و Number) مقدار حقیقی تخصیص داده میگردد. با این حالا، زمانی مقدار منحصر یک آرایه، تابع، یا این که آبجکت میباشد، رفرنسی به آبجکت در خاطر تخصیص داده می گردد.
نمونه؛ در کد ذیل var2 موازی میباشد با var1. از آنجا که var1 نوع اساسی میباشد (String)، var2 با مقدار حرفهای var1 ست شدهاست و میاقتدار تصور کرد که درین مرحله به طور کامل متمایز از var1 میباشد. بر این شالوده، تخصیص دوباره var2 تاثیری بر var1 ندارد.
let var1 = \'My string\';
let var2 = var1;var2 = \'My new string\';console.log(var1);
// \'My string\'
console.log(var2);
// \'My new string\'
بیایید این را با تخصیص آبجکت مقایسه کنیم
let var1 = { name: \'Jim\' }
let var2 = var1;var2.name = \'John\';console.log(var1);
// { name: \'John\' }
console.log(var2);
// { name: \'John\' }
ممکن میباشد ملاحظه کنید درصورتی که انتظار دارید رفتاری مثل تخصیص متغیرهای اساسی داشته باشد، چه گونه قادر است مشکلاتی ساخت نماید! این کار به ویژه زمانی که تابعی تولید فرمائید که ناخواسته یک آبجکت را تغییر و تحول دهد، میتواند بد باشد.
2. Closures
Closures یک الگوی اساسی جاوااسکریپت برای دسترسی سری (private) به یک متغیر میباشد. درین نمونه، createGreeter یک anonymous function را برمیگرداند که به greeting دسترسی دارااست، " Hello". برای کلیه به کار گیریهای آجل، sayHello بهاین greeting دسترسی خواهد داشت!
function createGreeter(greeting) {
return function(name) {
console.log(greeting + \', \' + name);
}
}const sayHello = createGreeter(\'Hello\');
sayHello(\'Joe\');
// Hello, Joe
در یک سناریوی حقیقی و واقعیخیس، یک تابع نخستین apiConnect(apiKey) را در لحاظ بگیرید که برخی متدهایی را که از API key به کارگیری مینمایند را برمیگرداند. دراینحالت، apiKey نیاز دارااست که تنها یک توشه فراهم خواهد شد و دیگر نیازی وجود ندارد مجدد صورت بپذیرد.
function apiConnect(apiKey) {
function get(route) {
return fetch(`${route}?key=${apiKey}`);
} function post(route, params) {
return fetch(route, {
method: \'POST\',
body: JSON.stringify(params),
headers: {
\'Authorization\': `Bearer ${apiKey}`
}
})
} return { get, post }
}const api = apiConnect(\'my-secret-key\');// No need to include the apiKey anymore
api.get(\'http://www.example.com/get-endpoint\');
api.post(\'http://www.example.com/post-endpoint\', { name: \'Joe\' });
3. Destructuring
این یک طریق معمول برای دستیابی پراپرتیها از آبجکتها میباشد.
const obj = {
name: \'Joe\',
food: \'cake\'
}const { name, food } = obj;console.log(name, food);
// \'Joe\' \'cake\'
در صورتی بخواهید پراپرتیها را با اسم دیگری کسب فرمایید، میتوانید آنانرا با به کار گیری از فرمت پایین معلوم نمایید.
const obj = {
name: \'Joe\',
food: \'cake\'
}const { name: myName, food: myFood } = obj;console.log(myName, myFood);
// \'Joe\' \'cake\'
در نمونه ذیل، از این نحوه برای ارسال آبجکت person به تابع introduce استعمال میگردد. به عبارت دیگر، این نحوه قادر است به طور بدون واسطه برای ارسال پارامترهای کسبگردیده به یک تابع مصرف شود. در حالتیکه با React آشنا باشید، احتمالا تا قبل از این آن را چشماید!
const person = {
name: \'Eddie\',
age: 24
}function introduce({ name, age }) {
console.log(`I\'m ${name} and I\'m ${age} years old!`);
}console.log(introduce(person));
// "I\'m Eddie and I\'m 24 years old!"
4. سینتکسSpread
عملگرspread مفهومی در جاوااسکریپت میباشد که نسبتا معمولی میباشد. در نمونه ذیل، Math.max نمیتواند برای آرایه arr جاری ساختن گردد، چون تحت عنوان آرگومان نمیتواند آرایه بگیرد، این اسلوب ارکان مخصوص را تحت عنوان آرایه می گیرد. عمگر spread (...) برای دریافت کردن عنصرها اختصاصی آرایه به کار گیری میگردد.
const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
5. سینتکس Rest
بیایید در زمینهی سینتکس rest جاوااسکریپت سخن کنیم. میتوانید از آن برای گذاشتن هر تعداد آرگومان ارسالگردیده به تابع در یک آرایه به کارگیری نمایید.
function myFunc(...args) {
console.log(args[0] + args[1]);
}myFunc(1, 2, 3, 4);
// 3
6. متدهای آرایه
متدهای آرایه جاوااسکریپت غالبا می توانند شیوههای خوشگل و اعتقاد و باور نکردنی برای اعمال تبدیل داده لازم شمارا ارائه دهند.
در اینجا یکی متدهای آرایه گوناگون را پوشش می دهیم، که با متدهای مشابهی که برخی اوقات ادغام گردیدهاند سازمان یافته میباشد.
1. map, filter, reduce
در ارتباط با متدهای آرایه جاوااسکریپت map، filter، reduce یکسری سردرگمی وجود دارااست. متدهای سودمندی برای تبدیل آرایه یا این که بازگرداندن یک مقدار در کنار هم وجود داراست.
map: آرایهای را برمیگرداند که هر عنصر تحت عنوان آیتم معلوم گردیده بوسیله تابع تبدیل شدهاست.
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);console.log(mapped);
// [21, 22, 23, 24, 25, 26]
filter: آرایهای از موادسازنده را برمیگرداند که تابع true را برگرداند.
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);console.log(filtered);
// [2, 4]
Reduce: مقادیر را تحت عنوان چیزی که در تابع مشخص و معلوم گردیده است با هم عدهآوری مینماید.
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);console.log(reduced);
// 21
7. Generatorها
از * نترسید. تابع generator معین مینماید نوبت سپس که next() فراخوانی می شود، کدام مقدار yield میباشد. میاقتدار تعداد محدودی yield داشت، بعداز اینکه next() مقدار undefined را برمیگرداند، یا این که یک مقدار نامحدود ازمقادیر را با به کار گیری از رینگ برمیگرداند.
function* greeter() {
yield \'Hi\';
yield \'How are you?\';
yield \'Bye\';
}const greet = greeter();console.log(greet.next().value);
// \'Hi\'
console.log(greet.next().value);
// \'How are you?\'
console.log(greet.next().value);
// \'Bye\'
console.log(greet.next().value);
// undefined
و به کار گیری از generator برای مقادیر نامحدود:
function* idCreator() {
let i = 0;
while (true)
yield i++;
}const ids = idCreator();console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...
8. عملگر شناسایی (===) در مقایسه با عملگر برابری (==)
مسلما در جاوااسکریپت تفاوت میان عمگر شناسایی (===) و عملگر برابری (==) را بدانید. عملگر == تبدیل نوع را پیش از مقایسه مقادیر ایفا میدهد، در حالی که عملگر === هیچ تبدیل نوعی را پیش از مقایسه اعمال نمیدهد.
console.log(0 == \'0\');
// true
console.log(0 === \'0\');
// false
9. مقایسه آبجکت
اشتباهی که بیشتر مواقع جدیدواردها جاری ساختن می دهند، مقایسه بدون واسطه آبجکتها میباشد. متغیرها اشاره به رفرنسهای آبجکتهای جانور در خاطر دارا هستند، خیر خویش آبجکتها. یک نحوه برای مقایسه آنان، تبدیل آبجکتها به فنهای JSON میباشد. این شغل یک گونه های داراست: ترتیب پراپرتی آبجکت ضمانت نمی شود. یک روش ایمنخیس برای مقایسه آبجکتها به کار گیری از کتابخانهای میباشد که در مقایسه عمیق آبجکت (deep comparison) حرفه ای است، مثل isEqual.
به لحاظ میرسد که آبجکتهای پایین با هم موازی می باشند البته به رفرنسهای مختلفی اشاره مینمایند.
const joe1 = { name: \'Joe\' };
const joe2 = { name: \'Joe\' };console.log(joe1 === joe2);
// false
در قبال، کد تحت صحیح محاسبه می گردد چون یک آبجکت موازی میباشد با آبجکت دیگر و به این ترتیب به به عبارتی رفرنس اشاره مینماید (صرفا یک آبجکت در خاطر وجود دارااست).
const joe1 = { name: \'Joe\' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true
مطلقا قسمت مقایسه مقدار با رفرنس را در ابتدا بخوانید تا به طور کامل تهیه و تنظیم متغیری که با متغیر دیگری موازی میباشد که به یک آبجکت در یاد اشاره داراهستند را ادراک فرمائید.
10. توابع Callback
اشخاص متعددی از توابع callback جاوااسکریپت وحشت دارا هستند! ولی آن ها معمولی میباشند. یک نمونه بزنیم. تابع console.log تحت عنوان یک callback به myFunc ارسال میگردد. هنگامی setTimeout بی نقص شد، ایفا میشود. این تمامی چیزی میباشد که وجود داراست!
function myFunc(text, callback) {
setTimeout(function() {
callback(text);
}, 2000);
}myFunc(\'Hello wor
11. Promiseها
پس از اینکه callbackهای جاوااسکریپت را فهم و شعور کردید، به زودی خویش را در callbackهای تو در تو مییابید. این جایی میباشد که Promiseها به یاری شما میایند. منطق async خویش را در یک Promise قرار دهید و توفیق، رد شدن یا این که باخت را resolve فرمائید. از " then" برای مدیر توفیق (success) و catch برای مدیر ناکامی (failure) به کار گیری نمائید.
const myPromise = new Promise(function(res, rej) {
setTimeout(function(){
if (Math.random() < 0.9) {
return res(\'Hooray!\');
}
return rej(\'Oh no!\');
}, 1000);
});myPromise
.then(function(data) {
console.log(\'Success: \' + data);
})
.catch(function(err) {
console.log(\'Error: \' + err);
});
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"
12. Async Await
وقتی که به promiseهای جاوااسکریپت رسیدید، ممکن میباشد async await را بخواهید. در نمونه پایین، یک تابع async ساخت میکنیم و داخل آن greeter promise را await میکنیم.
const greeter = new Promise((res, rej) => {
setTimeout(() => res(\'Hello world!\'), 2000);
})async function myFunc() {
const greeting = await greeter;
console.log(greeting);
}myFunc();
// \'Hello world!\'
عدهبندی
در صورتی هیچ کدام از این 12 مضمون را نمیدانید، احتمالا دستکم پاره ای علم جاوااسکریپت شما پرورش نموده است و دیدی دربارهی هرکدام یافتهاید. و در حالتیکه کلیه آنهارا میشناسید، امیدوارم کهاین فرصتی برای تمرین و پرورش علم شما باشد. برنده باشید!
تفاوت بین وب سایت و اپلیکیشن