JavaScript ES6 - kamroq yozing, ko'proq ish qiling

JavaScript ES6 kodingizni yanada zamonaviy va o'qilishi uchun yangi sintaksis va yangi ajoyib xususiyatlarni olib keladi. Bu sizga kamroq kod yozishga va ko'proq narsalarni qilishga imkon beradi. ES6 bizni o'q vazifalari, shablon iplari, sinfni yo'q qilish, Modullar va boshqalar kabi ko'plab ajoyib xususiyatlar bilan tanishtiradi. Keling, ko'rib chiqamiz.

const va let

const - o'zgaruvchini e'lon qilish uchun ES6-da yangi kalit so'z. varstdan ko'ra kuchliroq. Bir marta ishlatilganda, o'zgaruvchini qayta tayinlab bo'lmaydi. Boshqacha qilib aytganda, bu o'zgarmas o'zgaruvchi, ob'ektlar bilan ishlaganda bundan mustasno.

Bu, albatta, selektsionerlarni maqsad qilish uchun foydalidir. Masalan, bizda biron bir voqeani yoritadigan bitta tugma bo'lsa yoki JavaScript-da HTML elementini tanlash zarur bo'lsa, var o'rniga const dan foydalaning. Buning sababi var "ko'tarilgan". O'zgaruvchini qayta tayinlashni xohlamaganingizda har doim const dan foydalanish afzalroq.

Yuqoridagi kodda const o'zgarmaydi va uni qayta tayinlab bo'lmaydi. Agar siz unga yangi qiymat berishga harakat qilsangiz, u sizga xatoni qaytaradi.

ruxsat berish mumkin va yangi qiymat olish. U o'zgaruvchan o'zgaruvchini yaratadi.

ning har ikkisi ham qamrab olingan doiradagi konst bilan bir xil. Bu shuni anglatadiki, o'zgaruvchi faqat uning doirasida bo'ladi.

Ok vazifalari

Ok funktsiyasi haqiqatan ham juda ajoyib va ​​sizning kodingizni o'qishga, yanada tuzilishga va zamonaviy kodga o'xshaydi. Buni ishlatish o'rniga:

Foydalaning:

Ko'rinib turibdiki, o'q vazifasi osonroq o'qiladi va toza ko'rinadi! Endi eski sintaksisdan foydalanishingiz shart emas.

Shuningdek, siz Arrow funktsiyasidan xaritada, filtrda va o'rnatilgan funktsiyalarda foydalanishingiz mumkin.

O'qlar bilan xarita funktsiyasi ES5-dagi xaritaga qaraganda ancha aniq va tushunarli ko'rinadi. ES6 yordamida siz qisqa va aqlli kod yozishingiz mumkin. Xuddi shu narsani filtr bilan ham, qisqartirish bilan ham ishlatishingiz mumkin.

Andoza adabiyotlar

Andoza harflari yoki shablon iplari juda zo'r. Biz satrlarni bir-biriga bog'lash uchun ortiqcha (+) operatoridan yoki satr ichidagi o'zgaruvchini ishlatishni istamaymiz.

Eski sintaksis:

Yangi ES6 sintaksisi bilan:

Juda sodda! Bu eski sintaksis va ES6 o'rtasidagi haqiqatan ham katta farq. Satrlar bilan o'ynashda, ES6-dagi oddiy satr ES5-ga qaraganda ancha tartibli va yaxshi tuzilgan ko'rinadi.

Standart parametrlar

PHP-da ishlayotganda, odatda standart parametrlardan foydalanaman. Bular parametrni oldindan aniqlashga imkon beradi.

Shunday qilib, parametr yozishni unutganingizda, u aniqlanmagan xatoni qaytarib bermaydi, chunki parametr allaqachon sukut bo'yicha aniqlangan. Shunday qilib, sizning funktsiyangizni o'tkazib yuborilgan parametr bilan ishlatsangiz, u standart t qiymatini oladi va xato qaytarilmaydi!

Ushbu misolga qarang:

Yuqoridagi funktsiya aniqlanmagan qiymatni qaytaradi, chunki biz unga ikkinchi parametr yoshini berishni unutganmiz.

Ammo agar biz standart parametrdan foydalansak, u aniqlanmaydi va parametr tayinlashni unutganimizda, u foydalanadi!

Ko'rib turganingizdek, ikkinchi parametrni o'tkazib yuborgan bo'lsak ham funktsiya qiymatni qaytaradi. Endi standart parametr bilan biz xatoni oldindan hal qila olamiz.

Array va ob'ektni yo'q qilish

Destruction yangi o'zgaruvchiga massiv yoki ob'ektning qiymatlarini tayinlashni osonlashtiradi.

Eski sintaksis:

ES6 sintaksisi bilan:

ES5 bilan har bir o'zgaruvchiga har bir qiymatni tayinlashimiz kerak. ES6 yordamida biz ob'ektning istalgan xususiyatiga ega bo'lish uchun o'z qadriyatlarimizni jingalak qavslarga joylashtiramiz.

Eslatma: agar siz mulk nomiga o'xshash bo'lmagan o'zgaruvchini tayinlasangiz, u aniqlanmagan qiymatga qaytadi. Masalan, agar mulkning nomi nom bo'lsa va uni foydalanuvchi nomiga o'zgartiradigan bo'lsak, u aniqlanmagan qaytadi.

Biz har doim o'zgaruvchini mulk nomi bilan bir xil nomlashimiz kerak. Ammo, agar o'zgaruvchining nomini o'zgartirishni istasak, biz quyida yo'g'on ichakdan foydalanishimiz mumkin.

Massiv uchun biz ob'ekt bilan bir xil sintaksisdan foydalanamiz. Biz faqat jingalak qavslarni kvadrat qavslarga almashtirishimiz kerak.

Import va eksport

JavaScript dasturingizda import va eksportni ishlatish uni yanada kuchliroq qiladi. Ular sizga alohida va qayta ishlatiladigan qismlarni yaratishga imkon beradi.

Agar siz biron-bir JavaScript MVC doirasi bilan tanish bo'lsangiz, ular aksariyat hollarda komponentlarni boshqarish uchun import va eksportni ishlatishini ko'rasiz. Xo'sh, ular aslida qanday ishlaydi?

Bu juda oddiy! export boshqa JavaScript komponentlarida foydalanish uchun modulni eksport qilish imkoniyatini beradi. Ushbu modulni tarkibiy qismimizda ishlatish uchun biz importdan foydalanamiz.

Masalan, bizda ikkita fayl mavjud. Birinchisi batafsilComponent.js, ikkinchisi esa homeComponent.js deb nomlangan.

DetailComponent.js-da biz batafsil funktsiyani eksport qilmoqchimiz.

Va agar biz ushbu funktsiyani homeComponent.js-da ishlatmoqchi bo'lsak, biz shunchaki importdan foydalanamiz.

Agar biz bir nechta modulni import qilmoqchi bo'lsak, ularni jingalak qavs ichiga joylashtiramiz.

Ajoyib, shunday emasmi ?!

Va'dalar

Va'dalar ES6-ning yangi xususiyati. Asenkron kodni yozish usuli. Bu, masalan, biz ma'lumotlarni API-dan olishni xohlaganimizda yoki bajarilishi uchun vaqt talab qiladigan funktsiyaga ega bo'lganda foydalanish mumkin. Va'dalar muammoni hal qilishni osonlashtiradi, shuning uchun birinchi va'da beraylik!

Agar siz konsolingizga kirsangiz, u va'da beradi. Shunday qilib, agar ma'lumotlar olinganidan keyin biron bir funktsiyani bajarishni istasak, biz va'da beramiz. Va'da ikkita parametrni oladi: kutilgan xatoni hal qilish uchun hal qilish va rad etish.

Eslatma: olish funktsiyasi va'da o'zini o'zi qaytaradi!

const url = 'https: //jsonplaceholder.typicode.com/posts';
const getData = (url) => {
qaytish fetch (url);
}
getData (URL).
keyin (data => data.json ()).
keyin (natija => console.log (natija));

Endi siz konsolingizga kirsangiz, u bir qator ma'lumotlarga ega bo'ladi.

Parametrni sozlash va tarqatish operatori

Qolgan parametrlar massiv argumentini olish va yangi qatorni qaytarish uchun ishlatiladi.

Spred operatori qolgan parametrlar bilan bir xil sintaksisga ega, ammo tarqalish operatori nafaqat argumentlarni emas, balki Array-ni o'zi oladi. Biz massiv qiymatlarini olish uchun Spread parametridan foydalanishimiz mumkin, buning o'rniga pastadir yoki boshqa usulni ishlatish kerak.

const arr = ['said', 20, 'JavaScript tashabbuskori', 'Salom', 'Said', 'Qandaysiz?'];
const Func = (... anArray) => {
return anArray;
}
console.log (Func (arr));
// chiqish ["aytdi", 20, "JavaScript tashabbuskori", "Salom", "Said", "Qandaysiz?"

Sinflar

Sinflar ob'ektga yo'naltirilgan dasturlashning (OOP) yadrosidir. Ular sizning kodingizni xavfsizroq va kapsüllenmiş qiladi. Sinflardan foydalanish sizning kodingizga chiroyli tuzilish beradi va uni yo'naltirilganligini ta'minlaydi.

Sinfni yaratish uchun klass kalit so'zidan foydalaning va undan keyin sinfning nomi ikkita jingalak qavs bilan yozing.

Endi yangi kalit so'z yordamida biz sinf usullari va xususiyatlariga kirishimiz mumkin.

sinf myClass {
    konstruktor (ismi, yoshi) {
    this.name = ism;
    this.age = yosh;
}
}
const Home = new myClass ("aytdi", 20);
console.log (Home.name) // aytdi

Boshqa sinfdan meros olish uchun, meros qilib olmoqchi bo'lgan sinf nomi bilan kengaytirilgan kalit so'zdan foydalaning.

Siz bu erda sinflar haqida ko'proq ma'lumot olishingiz mumkin.

ES6 boshqa ajoyib xususiyatlarga ega - ularni bu erda o'rganishingiz mumkin.

Xulosa

Umid qilamanki, bolalar ushbu maqolani foydali deb topdilar va umid qilamanki, sizga ES6ning ba'zi xususiyatlarini taqdim etdim. Agar shunday bo'lsa, oldingi mavzular haqida ko'proq bilish uchun ushbu pochta ro'yxatiga obuna bo'ling. Vaqtingiz uchun rahmat.