آموزش ری اکت (قسمت سوم)
در مقالات آموزشی ری اکت در بخش اول و دوم توضیحاتی در این حیطه ارائه کردیم، به ادامه آموزش بپردازیم.
بازگشت ضمنی (Implicit Return)
تابعهای Arrow امکان داشتن مقادیر بازگشتی ضمنی را فراهم ساختهاند. این مقادیر بدون استفاده از کلیدواژه return بازگشت مییابند. طرز کار این بازگشت به این صورت است که گزارههای تکخطی در بدنه تابع به صورت زیر تعریف میشوند:
const myFunction = () => 'test'
myFunction() //'test'
مثال دیگر زمانی است که یک شیء بازگشت میدهیم. دقت کنید که باید آکولادها را درون پرانتزها قرار دهید تا با پرانتزهای تشکیل دهنده بدنه تابع اشتباه گرفته نشوند:
const myFunction = () => ({ value: 'test' })
myFunction() //{value: 'test'}
طرز کار this در تابعهای Arrow
This مفهومی است که شاید درک آن دشوار باشد، چون بسته به زمینه و همچنین بر اساس حالت جاوا اسکریپت (strict یا غیر آن) متفاوت است.
میبایست این نکته را روشن کنیم، زیرا تابعهای Arrow به طرزی کاملاً متفاوت از تابعهای معمولی عمل میکنند. زمانی که یک متد برای یک شیء تعریف میشود، در تابع معمولی this اشاره به شیء دارد و از این رو میتوان کد زیر را داشت:
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: function() {
return `${this.manufacturer} ${this.model}`
}
}
بدین ترتیب فراخوانی ()car.fullName مقدار “Ford Fiesta” را بازگشت میدهد.
دامنه this در تابعهای Arrow از زمینه اجرایی به ارث میرسید. یک تابع Arrow به هیچ وجه به this اتصال نمییابد و از این رو مقدار آن در پشته فراخوانی جستجو میشود. بدین ترتیب کدی مانند ()car.fullName کار نخواهد کرد و رشته “undefined undefined” را بازگشت میدهد:
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: () => {
return `${this.manufacturer} ${this.model}`
}
}
به همین دلیل، تابعهای Arrow به عنوان متدهای شیء مناسب نیستند. همچنین تابعهای Arrow نمیتوانند به عنوان سازنده (constructor) استفاده شوند، زیرا در هنگام مقداردهی اولیه یک خطای TypeError ایجاد میشود.
در این موارد باید از تابعهای معمولی استفاده کرد که زمینه دینامیک مورد نیاز نیست. همچنین این مورد در هنگام مدیرت رویدادها، موجب ایجاد مشکل میشود. شنوندههای رویداد DOM سعی میکنند this را روی عنصر هدف تنظیم کنند و اگر در handler رویداد روی this تکیه کنیم، به یک تابع معمولی نیاز خواهیم داشت:
const link = document.querySelector('#link')
link.addEventListener('click', () => {
// this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
// this === link
})
Rest و Spread
میتوان یک آرایه، یک شیء یا یک رشته را با استفاده از عملگر spread بسط داد. توضیح خود را با مثالی از آرایه آغاز میکنیم. فرض کنید:
const a = [1، 2، 3]
شما میتوانید یک آرایه جدید با کد زیر بسازید:
const c = [...a]
این کد برای شیء نیز به خوبی کار میکند. شیء را با دستور زیر کلون کنید:
const newObj = { ...oldObj }
با استفاده از رشتهها، عملگر spread یک آرایه با هر یک از کاراکترهای رشته ایجاد میکند:
const hey = 'hey'
const arrayized = [...hey] // ['h'، 'e'، 'y']
این عملگر برخی کاربردهای بسیار مفید دارد. مهمترین کاربر توانایی استفاده از یک آرایه به عنوان آرگومان تابع به روشی بسیار ساده است:
const f = (foo، bar) => {}
const a = [1، 2]
f(...a)
در گذشته این کار را میتوانستید با استفاده از (f.apply(null، a انجام دهید اما این روش زیبا و خوانا نیست. عنصر rest زمانی مفید است که میخواهیم با تخریب آرایه (array destructuring):
const numbers = [1، 2، 3، 4، 5]
[first، second، ...others] = numbers
و spread عناصر کار کنیم:
const numbers = [1، 2، 3، 4، 5]
const sum = (a، b، c، d، e) => a + b + c + d + e
const sum = sum(...numbers)
ES2018 مشخصات rest را معرفی کرده است که همین مفهوم اما در مورد شیء را داراست.
مشخصات Rest:
const { first, second, ...others } = {
first: 1,
second: 2,
third: 3,
fourth: 4,
fifth: 5
}
first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }
مشخصات spread امکان ایجاد یک شیء جدید با ترکیب کردن مشخصات شیء ارسالی پس از عملگر spread را میدهد:
const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
تخریب شیء و آرایه
با فرض وجود یک شیء میتوان با استفاده از ساختار تخریب، تنها برخی از مقادیر را استخراج کرد و آنها را در «متغیرهای با نام» قرار داد:
const person = {
firstName: 'Tom',
lastName: 'Cruise',
actor: true,
age: 54 //made up
}
const { firstName: name, age } = person //name: Tom, age: 54
name و age شامل مقادیر مطلوب ما هستند. همین ساختار در مورد آرایهها نیز کار میکند:
const a = [1، 2، 3، 4، 5]
const [first، second] = a
این گزاره با دریافت آیتمها از اندیسهای 0، 1 و 4، سه متغیر جدید از آرایه a ایجاد میکند:
const [first، second،،، fifth] = a
الفاظ قالبی (Template Literals)
الفاظ قالبی ویژگی جدید ES2015 / ES6 است که امکان کار با رشتهها به روشی کاملاً جدید نسبت به ES5 و قبلتر را فراهم ساخته است.
ساختار آن در نگاه اول بسیار ساده است و کافی است به جای گیومههای تکی یا جفتی از علامت backtick () استفاده کرد:
const a_string = `something`
دقت کنید که این الفاظ کاملاً منحصر به فرد هستند، زیرا ویژگیهای زیادی ارائه میکنند که رشتههای معمولی با گیومه ندارند. از آن جمله:
- ساختاری عالی دارند که امکان تعریف رشتههای چندخطی را میدهد.
- روش آسانی برای میانیابی متغیرها و عبارتها در داخل رشتهها در اختیار ما قرار میدهند.
- امکان ایجاد DSL با استفاده از تگهای قالبی را فراهم میسازند. DSL به معنی «زبان خاص یک حوزه» است و برای مثال در React در کامپوننتهای دارای سبک برای تعریف CSS کامپوننتها استفاده میشوند.)
هر کدام از جزییات فوق را در ادامه بررسی میکنیم.
رشتههای چندخطی
تا قبل از ES6 برای ایجاد یک رشته که در دو یا چند خط گسترش مییابد از کاراکتر \ در انتهای هر خط استفاده میکردیم:
const string =
'first part \
second part'
بدین ترتیب امکان ایجاد یک رشته 2 خطی پدید میآمد؛ اما تنها در یک خط رندر میشد:
first part second part
برای رندر کردن رشته در چند خط باید به صورت زیر صریحاً از \n در انتهای هر خط استفاده میکردیم:
const string =
'first line\n \
second line'
یا
const string = 'first line\n' + 'second line'
الفاظ قالبی امکان تعریف رشتههای چندخطی را سادهتر ساختهاند.
زمانی که یک لفظ قالبی با backtick باز شود، میتوانید برای ایجاد یک خط جدید از اینتر استفاده کنید و دیگر نیازی به کاراکترهای خاص نیست و همچنان که دیده میشود رندر خواهد شد:
const string = `Hey
this
string
is awesome!`
به خاطر داشته باشید که در این حالت فاصله معنیدار است. از این رو در کد زیر:
const string = `First
قصد داریم یک رشته مانند زیر ایجاد کنیم:
First
Second
یک روش ساده برای اصلاح این مشکل آن است که یک خط خالی داشته باشیم و متد ()trim را درست پس از backtick پایانی قرار دهیم تا هر فاصلهای را پیش از کاراکتر اول حذف کند:
const string = `
First
Second`.trim()
میانیابی
الفاظ قالبی یک روش آسان برای میانیابی متغیرها و عبارتهای درون رشتهها ارائه کردهاند.
این کار با استفاده از ساختار {…}$ ممکن است:
const var = 'test'
const string = `something ${var}` //something test
درون {}$ میتوان هر چیزی حتی عبارتها را اضافه کرد:
const string = `something ${1 + 2 + 3}`
const string2 = `something ${foo() ? 'x' : 'y'}`
چه عواملی باعث می شود تا تبدیل به یک برنامه نویس خوب شویم؟ پرسیدن این سوال از خود و . . .
4 دقیقه
ادامه مطلب
فروم ها یکی از گزینه های مهم برای تهیه بک لینک ها می باشند. وب مسترها می توانند محتو . . .
3 دقیقه
ادامه مطلب
معرفی ابزار های طراحی وب سایت Web Programming اگر برای اولین بار باشد که بخواهد بر . . .
5 دقیقه
ادامه مطلب
لیست فرم های خارجی برای بک لینک رایگان بروز رسانی: استفاده از فرمهای خارجی برای ب . . .
8 دقیقه
ادامه مطلب
پاسخگوی پرسش های شما هستیم...
شرکت پلاتین
شرکت پلاتین از همان ابتدا با رویکردی حرفهای و چشماندازی روشن، با هدف ارائه کاملترین و تخصصیترین راهکارها برای کارفرمایان و مشتریان، فعالیت خود را آغاز کرد. این شرکت با تکیه بر دانش فنی، تخصصی و آکادمیک و بهرهگیری از تیمی مجرب و خلاق، توانسته است در مدت زمان کوتاهی به یکی از شرکتهای پیشرو در حوزه فناوری و خدمات دیجیتال تبدیل شود.
اطلاعات شرکت
دفتر مرکزی
تلفن:
04133363096 | 09059687439
آدرس:
تبریز ، پاستور جدید ، نبش چهارراه قدک ساختمان 204 ، طبقه 1
لینک های مفید
- طراحی و پیادهسازی سایت
- طراحی و پیادهسازی اپلیکیشن
- راهکارهای مبتنی بر AI
- طراحی تیزر و موشن
- امنیت شبکه
- مشاوره شبکه
- رایانش ابری
لینک های مفید
- طراحی و پیادهسازی سایت
- طراحی و پیادهسازی اپلیکیشن
- راهکارهای مبتنی بر AI
- طراحی تیزر و موشن
- امنیت شبکه
- مشاوره شبکه
- رایانش ابری
لینک های مفید
- حمل ونقل زمینی
- حمل با کشتی
- روندهای فروش در چین
- فرآیند سازمانی صادرات
- واردات از چین
- واردات از چین