To'liq JavaScript qo'llanmasi

JavaScript dunyodagi eng mashhur dasturlash tillaridan biri bo'lib, hozirda brauzerdan tashqarida ham keng qo'llaniladi. So'nggi bir necha yil ichida Node.js-ning o'sishi orqa tomonni rivojlantirishga imkon berdi - bir marta Java, Ruby, Python, PHP va boshqa server tillarining domenlari.

JavaScript qo'llanmasi 80/20 qoidasiga amal qiladi: 20% vaqt ichida 80% JavaScript-ni o'rganing.

JavaScript haqida bilishingiz kerak bo'lgan barcha narsalarni bilib oling!

Eslatma: ushbu qo'llanmaning PDF, ePub yoki Mobi versiyasini osonroq olish yoki Kindle yoki planshetingizda o'qish uchun olishingiz mumkin.

Mundarija

  • ECMAscript
  • ES6
  • ES2016
  • ES2017
  • ES2018
  • Kodlash uslubi
  • Leksik tuzilish
  • O'zgaruvchilar
  • Turlari
  • Ifodalar
  • Prototip meros
  • Sinflar
  • Istisnolar
  • Nuqtalar
  • Iqtiboslar
  • Andoza adabiyotlar
  • Vazifalari
  • Okning vazifalari
  • Yopiqlar
  • Massivlar
  • Looplar
  • Hodisalar
  • Voqealar to'plami
  • Asenkron dasturlash va qo'ng'iroqlar
  • Va'dalar
  • Async va kuting
  • Ko'chadan va ko'lami
  • Taymerlar
  • Bu
  • Qattiq rejim
  • Bir zumda chaqiriladigan funktsional iboralar (IFFE ning)
  • Matematik operatorlar
  • Matematik ob'ekt
  • ES modullari
  • CommonJS
  • Lug'at

Kirish

JavaScript dunyodagi eng mashhur dasturlash tillaridan biridir. 20 yil oldin yaratilgan, u kamtar boshlanganidan beri juda uzoq yo'lni bosib o'tdi.

Birinchi va yagona skript tili bo'lib, mahalliy veb-brauzerlar tomonidan qo'llab-quvvatlandi, shunchaki qoqilib ketdi.

Dastlab, u hozirgidek kuchli emas edi va asosan xayoliy animatsiyalar uchun ishlatilgan va o'sha paytda Dynamic HTML (DHTML) deb nomlanuvchi mo''jiza edi.

Veb-platforma talabining ortib borishi bilan, JavaScript ham o'sib borishga, dunyoda eng ko'p ishlatiladigan ekotizimlardan birini qondirishga javobgardir.

Ko'p narsalar platformada, brauzerning API-lari bilan tanishtirildi, ammo til ham ancha o'sdi.

Endi JavaScript brauzerdan tashqarida ham keng qo'llaniladi. So'nggi bir necha yil ichida Node.jsning ko'payishi Java, Ruby, Python, PHP va boshqa an'anaviy server tillarining domenlari paydo bo'lganida, orqa tomonlarni rivojlantirishga imkon bermadi.

Endi JavaScript bu tillarni quvvatlaydigan ma'lumotlar bazalari va boshqa ko'plab ilovalardir. O'rnatilgan ilovalarni, mobil ilovalarni, televizor ilovalarini va boshqa ko'p narsalarni ishlab chiqish mumkin. Brauzer ichida kichkina til sifatida boshlangan narsa hozir dunyodagi eng mashhur tilga aylandi.

JavaScript-ning asosiy ta'rifi

JavaScript bu dasturlash tilidir:

  • Yuqori daraja: Bu sizga ishlayotgan mashina tafsilotlarini e'tiborsiz qoldirishga imkon beradigan abstraksiyalarni ta'minlaydi. U xotirani avtomatik ravishda axlat yig'ish vositasi bilan boshqaradi, shuning uchun siz xotira joylarini boshqarish o'rniga kodga e'tibor qaratishingiz mumkin va juda kuchli o'zgaruvchilar va ob'ektlar bilan ishlashga imkon beradigan ko'plab konstruktsiyalarni taqdim etadi.
  • Dinamik: Statik dasturlash tillaridan farqli o'laroq, dinamik til ishlaydigan vaqtda ishlay boshlaydi, statik til kompilyatsiya qilish paytida ko'p ishlarni bajaradi. Buning afzalliklari va kamchiliklari mavjud va bu bizga dinamik yozish, kech bog'lab qo'yish, aks ettirish, funktsional dasturlash, ob'ektning ish vaqtini o'zgartirish, yopish va boshqa ko'pgina xususiyatlarni beradi.
  • Dinamik ravishda yozilgan: o'zgaruvchi bir turni ishlatmaydi. Siz har qanday turni o'zgaruvchiga qayta tayinlashingiz mumkin, masalan, satrni ushlab turuvchi o'zgaruvchiga butun sonni belgilash.
  • Zaif yozilgan: Kuchli terishdan farqli o'laroq, zaif (yoki bo'sh) yozilgan tillar ob'ekt turini ishlatmaydi. Bu ko'proq moslashuvchanlikni oshirishga imkon beradi, lekin bizda xavfsizlik va turni tekshirishni rad etadi (TypeScript va Flow-ni yaxshilashni talab qiladigan narsa).
  • Interpretatsiya: Odatda tarjima qilingan til sifatida tanilgan, bu dastur, masalan, C, Java yoki Go dasturlaridan farqli o'laroq, dasturni ishga tushirishdan oldin kompilyatsiya bosqichiga ehtiyoj yo'qligini anglatadi. Amalda, brauzerlar ishlashdan oldin JavaScript-ni kompilyatsiya qiladilar, ammo bu siz uchun ravshan, chunki bu erda qo'shimcha qadam yo'q.
  • Ko'p paradigma: Java-dan farqli o'laroq, ob'ektga yo'naltirilgan dasturiy ta'minotni ishlatishga majbur qiluvchi yoki imperativ dasturlashni majburlaydigan C-dan farqli o'laroq, til biron bir aniq dasturiy paradigmaga amal qilmaydi.
    Ob'ektga yo'naltirilgan paradigma, prototiplar va yangi (ES6-dan) sinflar sintaksisidan foydalanib JavaScript-ni yozishingiz mumkin. Siz JavaScript-ni funktsional dasturlash uslubida, birinchi darajali funktsiyalari bilan yoki hatto imperativ uslubda (C-shunga o'xshash) yozishingiz mumkin.

Agar qiziqmoqchi bo'lsangiz, JavaScript-ning Java-ga aloqasi yo'q, bu afsuski nom tanlash, lekin biz u bilan yashashimiz kerak.

JavaScript versiyalari

Bu erda ECMAScript atamasini tanishtiray. Bizda ECMAScript-ga bag'ishlangan to'liq qo'llanma mavjud, unda siz ko'proq sho'ng'ishingiz mumkin, lekin boshlash uchun siz shunchaki ECMAScript (shuningdek, ES deb ataladi) JavaScript standartining nomi ekanligini bilishingiz kerak.

JavaScript bu standartning bajarilishi. Shuning uchun siz ES6, ES2015, ES2016, ES2017, ES2018 va boshqalar haqida eshitasiz.

Uzoq vaqt davomida barcha brauzerlar ishlagan JavaScript versiyasi ECMAScript 3 edi. 4-chi versiya funktsiyalarni buzilishi sababli bekor qilindi (ular bir vaqtning o'zida juda ko'p narsalarni qo'shishga harakat qilishdi). ES5 JavaScript uchun juda katta versiya bo'lsa-da, ES2015, shuningdek, ES6 deb nomlangan bo'lib, u juda katta edi.

O'shandan beri, mas'ul bo'lganlar yiliga bitta versiyani chiqarishga qaror qilishdi, ular relizlar orasida ko'p vaqt sarflamasliklari va tezroq aloqa qilishiga imkon berishdi.

Hozirgi vaqtda tasdiqlangan JavaScript versiyasi ES2017.

ECMASCRIPT

Har doim JavaScript haqida o'qiyotganda, siz ushbu shartlardan birini ko'rasiz:

  • ES3
  • ES5
  • ES6
  • ES7
  • ES8
  • ES2015
  • ES2016
  • ES2017
  • ECMAScript 2017 yil
  • ECMAScript 2016 yil
  • ECMAScript 2015 yil

Ular nimani anglatadi?

Ularning barchasi ECMAScript deb nomlangan standartga murojaat qilishadi.

ECMAScript JavaScript-ga asoslangan standart bo'lib, ko'pincha ES-ga qisqartiriladi.

JavaScript bilan bir qatorda, boshqa tillar ham ECMAScript dasturini (ed) amalga oshiradi, shu jumladan:

  • FlashScript mashhurligi yo'qolgan ActionScript (Flash skript tili) 2020 yilda rasman to'xtatiladi.
  • JScript (Microsoft scripting dialect), chunki o'sha paytda JavaScript faqat Netscape tomonidan qo'llab-quvvatlangan va brauzer urushlari eng yuqori cho'qqiga chiqqanida, Microsoft Internet Explorer uchun o'z versiyasini yaratishi kerak edi.

Ammo, albatta, JavaScript ES-ning eng ommabop va keng tarqalgan ishlatilishidir.

Nega bu g'alati nom? Ecma International - bu xalqaro standartlarni belgilashga mas'ul bo'lgan Shveytsariya standartlar uyushmasi.

JavaScript yaratilganda, uni Netscape va Sun Microsystems Ecma-ga taqdim etishdi va ular unga ECMA-262 taxallusiga ECMAScript nomini berishdi.

Netscape va Sun Microsystems (Java ishlab chiqaruvchisi) tomonidan chiqarilgan ushbu press-reliz, nomni tanlashni aniqlashga yordam berishi mumkin, bu Vikipediyaga ko'ra, qo'mitada bo'lgan Microsoft-ning huquqiy va brending masalalarini o'z ichiga olishi mumkin.

IE9-dan so'ng, Microsoft brauzerlarda ES-brauzerini JScript deb belgilashni to'xtatdi va uni JavaScript deb atay boshladi (hech bo'lmaganda, men boshqa havolalarni topa olmadim).

Shunday qilib, 201x yilidan boshlab ECMAScript xususiyatini qo'llab-quvvatlaydigan yagona ommabop til bu JavaScript.

Joriy ECMAScript versiyasi

Joriy ECMAScript versiyasi ES2018. U 2018 yil iyun oyida chiqarildi.

Keyingi versiya qachon chiqadi?

Tarixan, JavaScript nashrlari yoz davomida standartlashtirilgan edi, shuning uchun ECMAScript 2019 ning 2019 yil yozida chiqarilishini kutishimiz mumkin, ammo bu shunchaki mish-mishlar.

TC39 nima

TC39 bu JavaScript-ni rivojlantiradigan qo'mitadir.

TC39 a'zolari JavaScript va brauzer sotuvchilari bilan shug'ullanadigan kompaniyalar, shu jumladan Mozilla, Google, Facebook, Apple, Microsoft, Intel, PayPal, SalesForce va boshqalar.

Har bir standart versiya taklifi turli bosqichlardan o'tishi kerak, bu erda tushuntiriladi.

ES versiyalari

Nega ba'zan ES versiyasiga nashr raqami va ba'zan yil bo'yicha murojaat qilinishini hayron qoldirdim.

ES2015-dan oldin ECMAScript-ning texnik xususiyatlari odatda ularning nashri tomonidan chaqirilgan. Shunday qilib, ES5 2009 yilda nashr etilgan ECMAScript spetsifikatsiyasi yangilanishining rasmiy nomi.

Nima uchun bu sodir bo'ladi? ES2015-ga olib keladigan jarayon davomida nom ES6-dan ES2015-ga o'zgartirildi, ammo bu juda kech bo'lganligi sababli, odamlar uni hali ham ES6 deb atashdi va jamoa nashrni o'z nomidan qoldirmadi - dunyo hanuzgacha ES nashrlarini chaqirmoqda. nashr raqami.

Ushbu jadvalda narsalarni biroz tozalash kerak:

ES.Next har doim JavaScript-ning keyingi versiyasini ko'rsatadigan nom.

Yozish paytida ES9 chiqarildi va ES.Next ES10

ES6 yaxshilanishlari

ECMAScript 2015, shuningdek, ES6 sifatida tanilgan, ECMAScript standartining asosiy versiyasidir.

ECMAScript 5.1 ning so'nggi standart qayta ko'rib chiqilganidan 4 yil o'tgach, nashr qilingan raqamdan yil raqamiga o'tish belgilab qo'yildi.

Shunday qilib, uni ES6 deb nomlash kerak emas (garchi hamma buni shunday deb atasa ham), ammo buning o'rniga ES2015.

ES5 1999 yildan 2009 yilgacha tuzilganiga 10 yil bo'lgan va shu bilan birga bu tilni tubdan va juda muhim qayta ko'rib chiqish edi. Ammo endi shuncha vaqt o'tdi, ES5 kodi qanday ishlashini muhokama qilishning keragi yo'q.

Ushbu uzoq vaqt ES5.1 va ES6 o'rtasida o'tganligi sababli, versiya muhim yangi xususiyatlarga va JavaScript dasturlarini ishlab chiqishda taklif qilingan eng yaxshi tajribalarga to'la. ES2015 qanday fundamental ekanligini tushunish uchun shuni yodda tutingki, ushbu versiyada spetsifikatsiya hujjati 250 sahifadan ~ 600 sahifaga o'tdi.

ES2015-dagi eng muhim o'zgarishlar quyidagilardan iborat:

  • Ok vazifalari
  • Va'dalar
  • Jeneratörlar
  • ruxsat va const
  • Sinflar
  • Modullar
  • Ko'p qatorli
  • Andoza adabiyotlar
  • Standart parametrlar
  • Spred operatori |
  • Vayron qiluvchi topshiriqlar
  • Kengaytirilgan ob'ektlar soni
  • For loop
  • Map and Set

Men ularning har birini ushbu qo'llanmada maxsus bo'limda ko'rib chiqaman. Shunday qilib, boshlaylik.

Okning vazifalari

Ko'rsatkich funktsiyalari aksariyat JavaScript kodlari ko'rinishini o'zgartirdi (va ishlaydi).

Vizual ravishda, bu oddiy va yoqimli o'zgarish:

const foo = funktsiya foo () {
  // ...
}

ga

const foo = () => {
  // ...
}

Va agar funktsiya tanasi bitta chiziqli bo'lsa, shunchaki:

const foo = () => doSomething ()

Bundan tashqari, agar sizda bitta parametr bo'lsa, siz quyidagilarni yozishingiz mumkin:

const foo = param => doSomething (parametr)

Bu keskin o'zgarish emas, chunki odatdagi funktsiyalar avvalgidek ishlaydi.

Ushbu yangi qamrov

Ko'rsatkich funktsiyalari bilan foydalaniladigan ushbu maydon kontekstdan meros qilib olingan.

Oddiy funktsiyalar bilan bu har doim eng yaqin funktsiyani anglatadi, strelka funktsiyalari bilan bu muammo o'chiriladi va siz yana var = = ni yozishingiz shart emas.

Va'dalar

Va'dalar bizga ma'lum "qayta qo'ng'iroq jahannamini" yo'q qilishga imkon beradi, garchi ular biroz murakkabroq bo'lsa (ES2017-da async bilan, yuqori darajadagi qurilish bilan hal qilingan).

Va'dalar JavaScript dasturchilari tomonidan ES2015-dan oldin ishlatilgan va kutubxonada turli xil dasturlar mavjud (masalan, jQuery, q, deferred.js, nazr ...). Standart farqlar bo'yicha umumiy asos yaratdi.

Va'dalardan foydalanib, siz ushbu kodni qayta yozishingiz mumkin

setTimeout (funktsiya () {
  console.log ('Men 1s dan keyin yugurishga va'da berdim')
  setTimeout (funktsiya () {
    console.log ('Men 2s dan keyin ishlashga va'da berdim')
  }, 1000)
}, 1000)

sifatida

const wait = () => yangi va'da ((hal qilish, rad qilish) => {
  setTimeout (qaror, 1000)
})
kuting (). keyin ((= => {)
  console.log ('Men 1s dan keyin yugurishga va'da berdim')
  qaytish kutish ()
})
.then (() => console.log ('Men 2s dan keyin yugurishga va'da berdim'))

Jeneratörlar

Jeneratörlar bu o'z-o'zidan to'xtab turish va keyinroq davom ettirish qobiliyatiga ega bo'lgan funktsiyalarning o'ziga xos turi bo'lib, shu vaqtning o'zida boshqa kodlarni ishga tushirishga imkon beradi.

Kod kutishga to'g'ri keladi, shuning uchun u "navbatda" boshqa kodni ishga tushirishga imkon beradi va "kutayotgan narsa" tugagandan so'ng o'z faoliyatini davom ettirish huquqini saqlab qoladi.

Bularning barchasi bitta, oddiy kalit so'z bilan amalga oshiriladi: rentabellik. Agar generator ushbu kalit so'zni o'z ichiga olgan bo'lsa, ijro to'xtatiladi.

Jeneratör bir necha marotaba to'xtab, ko'p hosil beradigan kalit so'zlarni o'z ichiga olishi mumkin va bu C, C ++ yoki Go kabi past darajadagi dasturlash tillarida qo'llaniladigan ko'rsatgichni o'chirish operatori bilan adashmaslik kerak bo'lgan * funktsional kalit so'z bilan belgilanadi.

Jeneratörlar JavaScript-da dasturlashning yangi paradigmalarini yaratadilar, bunda:

  • Jeneratör ishlayotganda ikki tomonlama aloqa
  • dasturingizni muzlatib qo'ymaydigan ko'chadan uzoq umr ko'rish

Mana bu qanday ishlashini tushuntiradigan generatorning misoli.

funktsiya * kalkulyator (kiritish) {
    var doubleThat = 2 * (hosil (kirish / 2))
    var another = rentabellik (doubleThat)
    qaytish (kiritish * doubleThat * boshqa)
}

Biz buni boshlaymiz

const calc = kalkulyator (10)

Keyin generatorimizda iteratorni ishga tushiramiz:

kalc.next ()

Ushbu birinchi iteratsiya iteratorni boshlaydi. Kod ushbu ob'ektni qaytaradi:

{
  qilingan: noto'g'ri
  qiymati: 5
}

Nima sodir bo'ladi: kod funktsiyani bajaradi, kiritish = 10as u generator konstruktorida berilgan. U hosilga yetguncha ishlaydi va hosilning tarkibini qaytaradi: kirish / 2 = 5. Shunday qilib, biz 5 qiymatini olamiz va iteratsiya bajarilmaganligi haqida ko'rsatma (funktsiya shunchaki to'xtatildi).

Ikkinchi iteratsiyada biz 7 qiymatini olamiz:

kaltsnxt (7)

va biz orqaga qaytaradigan narsa:

{
  qilingan: noto'g'ri
  qiymati: 14
}

7 doubleThat qiymati sifatida joylashtirildi.

Muhim: kirish / 2 bu argument deb o'ylaysiz, lekin bu faqat birinchi iteratsiyaning qaytarilish qiymati. Endi biz buni o'tkazib yuboramiz va yangi kiritish qiymatini, 7 dan foydalanamiz va uni 2 ga ko'paytiramiz.

Keyin ikkinchi hosilga erishamiz va bu ikki baravar qaytadi, shuning uchun qaytarilgan qiymat 14 ga teng.

Keyingi va oxirgi, iteratsiya, biz 100dan o'tamiz

kaltsion (100)

va buning evaziga biz olamiz

{
  amalga oshirildi: rost
  qiymati: 14000
}

Iteratsiya bajarilganda (boshqa kalit so'zlar topilmadi), biz qaytamiz (kiriting * doubleThat * boshqasi), bu 10 * 14 * 100 ni tashkil qiladi.

ruxsat va const

var an'anaviy ravishda kengaytirilgan.

let yangi blokirovka qilingan o'zgaruvchan deklaratsiya.

Bu shuni anglatadiki, o'zgaruvchilarni ko'chadan ichidagi, agar yoki oddiy blok ichida e'lon qilish, bu o'zgaruvchini blokdan "qochib qutulishga" imkon bermasa, vars funktsiyani belgilashgacha ko'tariladi.

const xuddi ruxsat berilgandek, ammo o'zgarmasdir.

Oldinga siljish paytida siz boshqa hech qanday deklaratsiyalarni ko'rmaysiz, shunchaki ruxsat berish va yuborish.

xususan const, ehtimol ajablanarli tomoni shundaki, hozirgi vaqtda juda o'zgaruvchan bo'lib, o'zgarmasligi juda mashhur.

Sinflar

An'anaga ko'ra JavaScript prototipga asoslangan merosga ega bo'lgan yagona asosiy til edi. Sinfga asoslangan tillardan JavaScript-ga o'tgan dasturchilar buni hayratda qoldirdi, ammo ES2015 JavaScript-ning ichki ishlashi davomida shunchaki sintaktik shakar bo'lgan sinflarni taqdim etdi, ammo biz JavaScript dasturlarini qanday yaratayotganimizni o'zgartirdi.

Endi meros olish juda oson va boshqa ob'ektga yo'naltirilgan dasturlash tillariga o'xshaydi:

sinf shaxs {
  quruvchi (ism) {
    this.name = ism
  }
  Salom() {
    return 'Salom, men' + bu.name + '.'
  }
}
class Aktyor Shaxsni kengaytiradi {
  Salom() {
    return super.hello () + 'Men aktyorman.'
  }
}
var tomCruise = yangi aktyor ('Tom Cruise')
tomCruise.hello ()

Yuqoridagi dastur "Salom, men Tom Kruizman. Men aktyorman. ”

Sinflar aniq o'zgaruvchan deklaratsiyaga ega emas, lekin har qanday o'zgaruvchini konstruktorda boshlashingiz kerak.

Konstruktor

Sinflarning maxsus tuzuvchisi deb nomlangan usuli mavjud bo'lib, u yangi dars ishga tushirilganda chaqiriladi.

Super

Ota-onalar sinfiga super () yordamida murojaat qilish mumkin.

Tepaliklar va to'siqlar

Mulk uchun garov sifatida e'lon qilinishi mumkin

sinf shaxs {
  getName () {
    '$ {this.firstName} $ {this.lastName}' ni qaytaring
  }
}

Setters xuddi shunday yozilgan:

sinf shaxs {
  yoshni (yillarni) aniqlang {
    this.theAge = yil
  }
}

Modullar

ES2015 dan oldin jamoani bo'laklaydigan kamida uchta asosiy modul raqobatdosh modul standartlari mavjud edi:

  • AMD
  • TalabJS
  • CommonJS

ES2015 ularni standart formatga keltirdi.

Modullarni import qilish

Import qilish import ... dan ... orqali amalga oshiriladi.

"mymodule" dan import *
'reaktsiya' dan import qilish
"reaktsiya" dan {React, Component} ni import qilish
'Reaktsiya' dan MyLibrary sifatida React-ni import qilish

Modullarni eksport qilish

Siz eksport kalit so'zidan foydalanib modullar yozishingiz va boshqa modullarga biron bir narsani eksport qilishingiz mumkin:

eksport var foo = 2
eksport funktsiyasi paneli () {/ * ... * /}

Andoza adabiyotlar

Andoza adabiyotlar bu satrlar yaratish uchun yangi sintaksisdir:

const aString = `A string '

Ular $ {a_variable} sintaksisidan foydalanib, qiymatlarni samarali ravishda interpolatsiya qilish orqali iboralarni satrlarga qo'shish usulini ta'minlaydi:

const var = 'sinov'
const string = `nimadir $ {var}` // biror narsa sinovi

Bundan tashqari murakkabroq iboralarni bajarishingiz mumkin:

const string = `$ $ 1 + 2 + 3}`
const string2 = `$ {foo () nimadir? 'x': 'y'} `

va satrlar bir nechta chiziqlar bo'ylab cho'zilishi mumkin:

const string3 = `Hey
bu
tor
ajoyib! "

ES2015 oldidan ko'p qatorli iplarni qanday ishlatganimizni solishtiring:

var str = 'Bitta \ n' +
'Ikki \ n' +
"Uch"

Standart parametrlar

Vazifalar endi standart parametrlarni qo'llab-quvvatlaydi:

const foo = funktsiya (indeks = 0, sinov = to'g'ri) {/ * ... * /}
foo ()

Spred operatori

Massiv, ob'ekt yoki satrni yoyish operatori yordamida kengaytirishingiz mumkin ....

Bir qator misoldan boshlaylik. Quyidagilarni hisobga olgan holda:

const a = [1, 2, 3]

Siz foydalanib yangi qator yaratishingiz mumkin

const b = [... a, 4, 5, 6]

Bundan tashqari, bir qator nusxasini yaratishingiz mumkin

const c = [... a]

Bu ob'ektlar uchun ham ishlaydi. Ob'ektni klonlash:

const newObj = {... oldObj}

Satrlardan foydalanib, tarqaluvchi operator satrda har bir char bilan qator yaratadi:

const hey = 'hey'
const arrayized = [... hey] // ['h', 'e', ​​'y']

Ushbu operator juda foydali dasturlarga ega. Eng asosiysi, bu massivni oddiygina usul sifatida argument sifatida ishlatish qobiliyatidir:

const f = (foo, bar) => {}
const a = [1, 2]
f (... a)

Ilgari siz buni f.apply (null, a) yordamida amalga oshirishingiz mumkin edi, ammo bu unchalik yoqimli va o'qib bo'lmaydigan darajada.

Vayron qiluvchi topshiriqlar

Ob'ekt berilgan holda, siz shunchaki ba'zi qiymatlarni chiqarib olishingiz va ularni nomlangan parametrlarga qo'yishingiz mumkin:

const shaxs = {
  ismi: "Tom",
  familiya: "Kruiz",
  aktyor: haqiqiy,
  yoshi: 54, // tuzilgan
}
const {first name: name, age} = shaxs

ism va yosh kerakli qiymatlarni o'z ichiga oladi.

Sintaksis massivlarda ham ishlaydi:

const a = [1,2,3,4,5]
[birinchi, ikkinchi,,, beshinchi] = a

Kengaytirilgan ob'ekt yozuvi

ES2015-da Object Literals super kuchlarga ega bo'ldi.

O'zgaruvchilarni qo'shish uchun sodda sintaksis

Buning o'rniga

const narsa = 'y'
const x = {
  nimadir: nimadir
}

qila olasiz

const narsa = 'y'
const x = {
  nimadur
}

Prototip

Prototip bilan belgilanishi mumkin

const anObject = {y: 'y'}
const x = {
  __proto__: anObject
}

super ()

const anObject = {y: 'y', sinov: () => 'hayvonot bog'i'}
const x = {
  __proto__: anekt,
  sinov () {
    super.test () + 'x' ni qaytarish
  }
}
x.test () // zoox

Dinamik xususiyatlar

const x = {
  ['a' + '_' + 'b']: 'z'
}
x.a_b // z

For-of loop

ES5 2009 yildaEach () ko'chadan uchun taqdim etildi. Yoqimli bo'lsa-da, ular hech qanday yo'lni taklif qilmadilar, chunki ko'chadan har doimgidek.

ES2015 forE-ning halqa xususiyatini taqdim etdi, u forEach-ning ixchamligini sindirish qobiliyati bilan birlashtiradi:

// qiymat ustidan iteratsiya
uchun (const v of ['a', 'b', 'c']) {
  konsol.log (v);
}
// indeksni ham, "yozuvlar ()" dan foydalanib oling
uchun (const [i, v] ning ['a', 'b', 'c']. yozuvlari ()) {
  konsol.log (i, v);
}

Map and Set

Map and Set (va tegishli WeakMap va WeakSet axlatlari) bu ikki mashhur ma'lumotlar tuzilmasining rasmiy tadbiri (keyinroq taqdim etilgan).

ES2016 yaxshilanishlari

Rasmiy ravishda ECMAScript 2016 deb nomlanuvchi ES7 2016 yil iyun oyida yakunlandi.

ES6 bilan taqqoslaganda, ES7 JavaScript uchun juda oz versiya bo'lib, unda faqat ikkita xususiyat mavjud:

  • Array.prototype. o'z ichiga oladi
  • Eksponentlash operatori

Array.prototype.includes ()

Bu xususiyat, agar massivda element bo'lsa yoki yo'qligini tekshirish uchun ko'proq o'qiladigan sintaksisni taqdim etadi.

ES6 va undan pastroq qatorda, massivda element mavjudligini tekshirish uchun massivda indeksni tekshiradigan indexOf-dan foydalanish kerak edi va agar element yo'q bo'lsa -1-ni qaytaradi.

-1 haqiqiy qiymat sifatida baholanganligi uchun, masalan, qila olmaysiz

if (! [1,2] .indexOf (3)) {
  console.log ('topilmadi')
}

ES7-da joriy qilingan ushbu xususiyat bilan biz qila olamiz

if (! [1,2]. (3)) {
  console.log ('topilmadi')
}

Eksponentlash operatori

Eksponentlash operatori ** Math.pow () ning ekvivalentidir, ammo kutubxona vazifasini bajarish o'rniga tilga kiritilgan.

Math.pow (4, 2) == 4 ** 2

Ushbu xususiyat Math intensiv JavaScript dasturlari uchun yoqimli qo'shimcha hisoblanadi.

** operatori Python, Ruby, MATLAB, Lua, Perl va boshqa ko'plab tillarda standartlashtirilgan.

ES2017 takomillashtirildi

ECMAScript 2017, ECMA-262 standartining 8-nashri (shuningdek, ES2017 yoki ES8 deb nomlanadi) 2017 yil iyun oyida yakunlandi.

ES6 bilan taqqoslaganda, ES8 JavaScript uchun juda oz versiya, ammo shunga qaramay u juda foydali xususiyatlarni taqdim etadi:

  • Satrlarni to'ldirish
  • Ob'ekt.valvlari
  • Ob'ekt.entriyalari
  • Object.getOwnPropertyDescriptors ()
  • Funktsiya parametrlari ro'yxati va chaqiriqlarda vergul
  • Async funktsiyalari
  • Umumiy xotira va atomika

Satrlarni to'ldirish

Satrlarni to'ldirish maqsadi satrga belgilar qo'shishdir, shuning uchun u ma'lum bir uzunlikka etadi.

ES2017 ikkita String usulini taqdim etadi: padStart () va padEnd ().

padStart (targetLength [, padString])
padEnd (targetLength [, padString])

Namunadan foydalanish:

Object.values ​​()

Ushbu usul barcha ob'yektlarning mulk qiymatlarini o'z ichiga olgan qatorni qaytaradi.

Foydalanish:

const person = {name: 'Fred', yoshi: 87}
Object.values ​​(kishi) // ['Fred', 87]

Object.values ​​() shuningdek massivlar bilan ishlaydi:

const people = ['Fred', 'Toni']
Object.values ​​(odamlar) // ['Fred', 'Toni']

Object.entries ()

Ushbu usul, ob'ektning barcha xususiyatlariga ega bo'lgan qatorni, [kalit, qiymat] juftliklari massivi sifatida qaytaradi.

Foydalanish:

const person = {name: 'Fred', yoshi: 87}
Object.entries (kishi) // [['ism', 'Fred'], ['yoshi', 87]]

Object.entries () shuningdek massivlar bilan ishlaydi:

const people = ['Fred', 'Toni']
Object.entries (odamlar) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors ()

Ushbu usul ob'ektning barcha mulkiy (meros qilib olinmagan) tavsiflovchisini qaytaradi.

JavaScript-dagi har qanday ob'ekt bir qator xususiyatlarga ega va bu xususiyatlarning har birida tavsiflovchi mavjud.

Deskriptor - bu mulk atributlari to'plami bo'lib, u quyidagilar tomonidan tuzilgan:

  • qiymati: mulk qiymati
  • yozilishi mumkin: haqiqiy mulk o'zgarishi mumkin
  • get: mulk o'qilganda chaqiriladigan mulk uchun getter funktsiyasi
  • set: xususiyat qiymatga o'rnatilganda chaqiriladigan xususiyat uchun setter funktsiyasi
  • sozlanishi: agar noto'g'ri bo'lsa, mulk olib tashlanmaydi va biron bir atributni o'zgartirish mumkin emas, uning qiymatidan tashqari
  • sanab o'tilgan: agar mulk ro'yxatga olinsa haqiqiy

Object.getOwnPropertyDescriptors (obj) ob'ektni qabul qiladi va tavsiflovchilar to'plami bilan ob'ektni qaytaradi.

Qanday qilib bu foydali?

ES2015 bizga bir yoki bir nechta ob'ektlardan sanab o'tilgan barcha xususiyatlarni nusxa ko'chiradigan va yangi ob'ektni qaytaradigan Object.assign () dasturini berdi.

Biroq, bu bilan muammo mavjud, chunki u xususiyatlarni asl bo'lmagan atributlar bilan nusxa ko'chirmaydi.

Agar ob'ektda, masalan, sozlash vositasi bo'lsa, u Object.assign () yordamida yangi ob'ektga to'g'ri ko'chirilmaydi.

Masalan, bilan

const person1 = {
    sozlangan nom (newName) {
        konsol.log (newName)
    }
}

Bu ishlamaydi:

const person2 = {}
Object.assign (2-shaxs, 1-kishi)

Ammo bu ishlaydi:

const person3 = {}
Object.defineProperties (person3,
  Object.getOwnPropertyDescriptors (kishi1))

Oddiy konsol sinovidan ko'rinib turibdiki:

person1.name = 'x'
"x"
person2.name = 'x'
person3.name = 'x'
"x"

person2 o'rnatuvchini sog'inadi, chunki u nusxalanmagan.

Xuddi shu cheklash Object.create () yordamida ob'ektlarni sayoz klonlash uchun ham qo'llaniladi.

Trailing vergul

Ushbu funktsiya funktsiya deklaratsiyasida va funktsiyalarni chaqirishda oxirgi vergullarga ega bo'lishga imkon beradi:

const doSomething = (var1, var2,) => {
  // ...
}
doSomething ('test2', 'test2',)

Ushbu o'zgarish ishlab chiquvchilarni "chiziq boshida" vergulni yoqimsiz odatlardan xalos qilishga undaydi.

Async funktsiyalari

ES2017 async funktsiyalari tushunchasini taqdim etdi va bu ECMAScript nashrida kiritilgan eng muhim o'zgarish.

Async funktsiyalari - bu va'dalar atrofida qozonxonani qisqartirish uchun va'dalar va generatorlar kombinatsiyasi, va zanjirli va'dalarni "cheklamang".

Nima uchun ular foydali

Va'dalarga nisbatan yuqori darajadagi mavhumlik.

ES2015-da va'da berilganda, ular asinxron kod bilan bog'liq muammoni hal qilish uchun mo'ljallangan edi va ular shunday qilishdi. Ammo ES2015 va ES2017-ni ajratib turadigan 2 yil ichida va'dalar yakuniy echim bo'lmasligi aniq edi.

Qayta qo'ng'iroq qilish do'zaxining mashhur muammosini hal qilish uchun va'da berildi, ammo ular o'zlarining murakkabligini va sintaksisning murakkabligini taqdim etdilar. Ular ishlab chiqaruvchilarga yaxshiroq sintaksis paydo bo'lishi mumkin bo'lgan yaxshi ibtidoiy narsalar edi: async funktsiyalarini kiriting.

Qisqa misol

Asenkron funktsiyalardan foydalanadigan kodni quyidagicha yozish mumkin

funktsiya doSomethingAsync () {
    yangi va'da berish ((qaror) => {
        setTimeout (() => шешу ('Men biror narsa qildim'), 3000)
    })
}
async funktsiyasi doSomething () {
    console.log (doSomethingAsync () ni kuting)
}
console.log ('oldin')
nimadir qil()
console.log ('Keyin')

Yuqoridagi kod brauzer konsoliga quyidagilarni bosib chiqaradi:

Oldin
Keyin
Men nimadir qildim // 3-dan keyin

Seriyadagi bir nechta asinx funktsiyalari

Async funktsiyalarini osonlikcha zanjirlash mumkin, va sintaksis oddiy so'zlarga qaraganda ancha oson o'qiladi:

funktsiya ваъToDoSomething () {
    yangi va'da berish ((qaror) => {
        setTimeout (() => шешу ('Men biror narsa qildim'), 10000)
    })
}
asinx funktsiyasi watchOverSomeoneDoingSomething () {
    const narsa = va'dani kutingDoSomething ()
    biror narsani qaytaring + 'va men tomosha qildim'
}
async funktsiyasi watchOverSomeoneWatchingSomeoneDoingSomething () {
    const narsa = kuzatishni kutingOverSomeoneDoingSomething ()
    bir narsani qaytaring + 'va men ham tomosha qildim'
}
watchOverSomeoneWatchingSomeoneDoingSomething (). keyin ((res) => {
    konsol.log (res)
})

Umumiy xotira va atomika

WebWorkers brauzerda ko'p qirrali dasturlarni yaratish uchun ishlatiladi.

Ular voqealar orqali xabar almashish protokolini taklif qilishadi. ES2017 yildan boshlab, siz SharedArrayBuffer-dan foydalanib, veb-ishchilar va ularning yaratuvchilari o'rtasida umumiy xotira massivini yaratishingiz mumkin.

Birgalikda ishlatiladigan xotira qismiga yozishga qancha vaqt sarflashini bilmasligimiz sababli, Atomika bu qiymatni o'qishda va har qanday yozishni tugatishda uni amalga oshirishni ta'minlash usulidir.

Bu haqda batafsil ma'lumotni shu vaqtdan beri amalga oshirilgan maxsus taklifda topish mumkin.

ES2018 takomillashtirildi

ES2018 - ECMAScript standartining so'nggi versiyasi.

Unda qanday yangi narsalar kiritilgan?

Rest / Spread xususiyatlari

ES6 massivni buzish bilan ishlashda dam olish elementi tushunchasini kiritdi:

const raqamlari = [1, 2, 3, 4, 5]
[birinchi, ikkinchi, ... boshqalar] = raqamlar

va tarqaladigan elementlar:

const raqamlari = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum (... raqamlar)

ES2018 xuddi shu narsani taqdim etadi, ammo ob'ektlar uchun.

Dam olish xususiyatlari:

const {birinchi, ikkinchi, ... boshqalar} = {birinchi: 1, ikkinchi: 2, uchinchi: 3, to'rtinchi: 4, beshinchi: 5}
birinchi // 1
ikkinchi // 2
boshqalar // {uchinchi: 3, to'rtinchi: 4, beshinchi: 5}

Spred xususiyatlari tarqalish operatoridan keyin o'tgan ob'ekt xususiyatlarini birlashtirish orqali yangi ob'ekt yaratishga imkon beradi:

const bandlari = {birinchi, ikkinchi, ... boshqalar}
ma'lumotlar // {birinchi: 1, ikkinchisi: 2, uchinchi: 3, to'rtinchi: 4, beshinchi: 5}

Asenkron iteratsiya

Kutish uchun yangi konstruktsiya sizga async iterable ob'ektini pastadirli iteratsiya sifatida ishlatishga imkon beradi:

kutish uchun (readLines-ning const qatori (filePath)) {
  konsol.log (satr)
}

Kutish imkoniyatidan foydalanganligi sababli, siz uni odatdagi kutish kabi faqat async funktsiyalaridan foydalanishingiz mumkin (async / kutish bo'limiga qarang)

Promise.prototype.finally ()

Va'da bajarilganda, u muvaffaqiyatli (keyin) usullarni ketma-ket chaqiradi.

Agar bu vaqt ichida biron bir narsa bajarilmasa, u holda () usullar tashlanadi va catch () usuli bajariladi.

nihoyat () va'daning muvaffaqiyatli yoki muvaffaqiyatsiz bajarilishidan qat'i nazar, ba'zi kodlarni ishlatishingizga imkon beradi:

yuklash ('file.json')
  .then (data => data.json ())
  .catch (error => console.error (error))
  .finally (() => console.log ('tugagan'))

Doimiy ifoda yaxshilanishlari

RegExp tashqi ko'rinishini tasdiqlash: satr avvalgisiga qarab mos keladi.

Bu bir qarash: siz? = Ma'lum bir pastki qatorga ega bo'lgan satrni moslashtirish uchun foydalanasiz: =

/ Rojer (? = Suvlar) /
/ Roger (? = Suvlar) /. Test ('Roger mening itim') // yolg'on
/ Roger (? = Waters) /. Test ('Roger mening itim va Rojer Uoters - taniqli musiqachidir') // rost

?! Agar satr ma'lum bir pastki satr bilan ta'qib qilinmasa, teskari operatsiyani bajaradi.

/ Rojer (?! Suvlar) /
/ Roger (? Suvlar) /. Sinov ('Roger mening itim') // haqiqat
/ Rojer (? Suvlar) /. Test ('Rojer Uoter taniqli musiqachidir') // yolg'on

Xarajatlar? = Belgisini ishlatadi. Ular allaqachon mavjud edi.

Lookbehinds, yangi xususiyatdan foydalanadimi? <=.

/ (? <= Roger) Suvlari /
/ (? <= Roger) Waters / .test ('Pushti suvlar bu mening itim') // yolg'on
/ (? <= Roger) Waters / .test ('Rojer mening itim va Rojer Uoters - taniqli musiqachidir') // rost

Ko'rish oynasi ishlatilmayapti?

/ (? 
/ (? 

Unicode xususiyati \ p {...} va \ P {…} dan qochadi.

Oddiy ifoda naqshida siz har qanday raqamga mos keladigan \ d-ni, bo'sh joy bo'lmagan har qanday belgiga mos keladigan \ n, harf-raqam belgisini solishtirish uchun va hokazolarni ishlatishingiz mumkin.

Ushbu yangi xususiyat ushbu kontseptsiyani \ p {} ni tanitadigan va Unicode \ P {} ning barcha belgilariga tatbiq etiladi.

Har qanday unicode belgi bir qator xususiyatlarga ega. Masalan, skript tillar oilasini belgilaydi, ASCII bu ASCII belgilariga to'g'ri keladigan mantiqiy va hokazo. Siz ushbu xususiyatni grafik qavslar qatoriga qo'yishingiz mumkin va regex bu to'g'ri ekanligini tekshiradi:

/^\p{ASCII}+$/u.test('abc ') // 
/^\p{ASCII}+$/u.test('ABC@ ') // 
/^\p{ASCII}+$/u.test('ABC ') // 

ASCII_Hex_Digit - bu satrda faqat o'n oltilik sonlar mavjudligini tekshiradigan boshqa mantiqiy xususiyat.

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF ') // 
/^\p{ASCII_Hex_Digit}+$/u.test('h ') // 

Ko'pgina boshqa mantiqiy xususiyatlar mavjud, ularning nomlarini grafik qavslar ichiga qo'shib tekshirib ko'ring, ular: Katta harf, Kichik harf, White_Space, Alifbo, Emoji va boshqalar:

/^\p{Lowercase}$/u.test('h ') // 
/^\p{Uppercase}$/u.test('H ') // 
/^\p{Emoji}+$/u.test('H ') // 
/^\p{Emoji}+$/u.test(' ') // 

Ikkilik xususiyatlarga qo'shimcha ravishda, har qanday unicode belgilar xususiyatlarini ma'lum bir qiymatga muvofiqligini tekshirishingiz mumkin. Ushbu misolda men ip yunon yoki lotin alifbosida yozilganligini tekshiraman:

/^\p{Script=Greek}+$/u.test('ελληνικά ') // 
/^\p{Script=Latin}+$/u.test('hey ') // 

Siz to'g'ridan-to'g'ri taklifda foydalanishingiz mumkin bo'lgan barcha xususiyatlar haqida ko'proq o'qing.

Nomlangan suratga olish guruhlari

ES2018-da, natijada olingan qatorga joylashtirilgandan ko'ra, suratga olish guruhiga nom berilishi mumkin:

const re = / (?  \ d {2}) - (?  \ d {2}) /
natija = re.exec ('2015-01-02')
// result.groups.year === '2015';
// natija.groups.month === '01';
// natija.groups.day === '02';

Oddiy iboralar uchun bayroq

Bitta satr uchun qisqa bo'lgan bayroqcha sabab bo'ladi. shuningdek, yangi chiziq belgilariga mos kelish. Busiz, nuqta yangi belgilar bilan emas, balki oddiy belgilar bilan mos keladi:

/hi.welcome/.test('hi\nwelcome ') // noto'g'ri
/hi.welcome/s.test('hi\nw Welcome ') // rost

Kodlash uslubi

JavaScript kodlash uslubi - bu JavaScript-ni ishlatishda ishlatiladigan konventsiyalar to'plami.

Kodlash uslubi - bu o'zingiz va jamoangiz bilan loyihada izchillikni saqlab qolish uchun kelishuv.

Agar sizning jamoangiz bo'lmasa, kodingizni har doim standartlar darajasiga ko'tarish uchun o'zingiz bilan kelishuv bo'ladi.

Kodni yozish formatida belgilangan qoidalarga rioya qilish, o'qilishi oson va boshqariladigan kodga ega bo'lishga yordam beradi.

Mashhur uslublar bo'yicha qo'llanmalar

Ularning atrofida juda ozchilik bor, bu erda JavaScript olamida eng keng tarqalgan 2 ta:

  • Google JavaScript uslubiy qo'llanmasi
  • AirBnb JavaScript uslubiy qo'llanmasi

Ulardan biriga rioya qilish yoki o'zingizning uslublar bo'yicha qo'llanmangizni yaratish sizga bog'liq.

O'zingiz ishlayotgan loyihaga mos keling

Agar siz uslublar to'plamini afzal ko'rsangiz ham, loyihada ishlayotganingizda, siz ushbu uslubning uslubidan foydalanishingiz kerak.

GitHub-dagi ochiq manbali loyiha bir qator qoidalarga rioya qilishi mumkin, siz jamoa bilan ishlayotgan boshqa loyiha esa umuman boshqasiga amal qilishi mumkin.

Prettier - bu kodni formatlashni ta'minlaydigan ajoyib vosita, shuning uchun uni ishlatishingiz kerak.

Ushbu qo'llanmada ishlatiladigan imtiyozlar

Biz har doim ESning so'nggi versiyasidan foydalanamiz. Agar eski brauzer qo'llab-quvvatlashi zarur bo'lsa, Babel-dan foydalaning.

  • Shartnoma: yorliqlar o'rniga bo'sh joylardan foydalaning, ikkita bo'sh joydan foydalanib, pastga yozib qo'ying.
  • Nuqtali vergullar: nuqta-vergullardan foydalanmang.
  • Chiziq uzunligi: iloji bo'lsa, 80 ta chiziqda chiziqlarni kesib olishga harakat qiling.
  • Ichki sharhlar: kodingizda sharhlardan foydalaning. Blokirovka sharhlaridan faqat hujjatlashtirish uchun foydalaning.
  • O'lik kodi yo'q: eski kodni sharh qoldirmang, "keyinchalik" bu keyinchalik foydali bo'ladi. Faqat hozir kerak bo'lgan kodni saqlang, versiyani boshqarish / sizning qaydlar ilovangiz buning uchun mo'ljallangan.
  • Faqat foydali bo'lganda sharhlang: kod nima qilayotganini tushunishga yordam beradigan sharhlar qo'shmang. Agar kod yaxshi o'zgaruvchi va funktsiyani nomlash va JSDoc funktsiyasi sharhlaridan foydalanish orqali tushuntirishga ega bo'lsa, sharh qo'shmang.
  • O'zgaruvchan deklaratsiyalar: global ob'ektni ifloslantirmaslik uchun har doim o'zgaruvchilarni e'lon qiling. Hech qachon var ishlatmang. Odatiy konst va faqat o'zgaruvchini qayta tayinlasangiz foydalaning.
  • Vazifalar: agar bu qanday ishlashiga qarab ob'ekt funktsiyalari yoki konstruktorlar singari oddiy funktsiyalarni ishlatish uchun aniq sababingiz bo'lmasa, o'q vazifalaridan foydalaning. Ularni const deb e'lon qiling va agar iloji bo'lsa, aniq bo'lmagan foydalaning. Kodning qolgan qismiga yordamchi funktsiyalarni yashirish uchun o'rnatilgan funktsiyalardan bemalol foydalaning.
const test = (a, b) => a + b
const boshqasi = a => a + 2
  • Ismlar: funktsiya nomlari, o'zgaruvchan nomlar va usul nomlari har doim kichik harf bilan boshlanadi (agar siz ularni shaxsiy deb belgilamasangiz, quyida o'qing) va camelCased. Faqat konstruktor funktsiyalari va sinf nomlari bosh harf bilan yozilishi kerak. Agar siz aniq konvensiyalarni talab qiladigan ramkadan foydalansangiz, odatingizni shunga qarab o'zgartiring. Fayl nomlari kichik harflardan iborat bo'lishi kerak, va so'zlar bilan ajratilgan.
  • Bayonotga tegishli formatlar va qoidalar:

agar

if (shart) {
  bayonotlar
}
if (shart) {
  bayonotlar
} else {
  bayonotlar
}
if (shart) {
  bayonotlar
} else if (shart) {
  bayonotlar
} else {
  bayonotlar
}

uchun: Har doim keshlash uchun boshlang'ich uzunligini boshlang, uni holatiga qo'ymang. .HasOwnProperty () bilan birgalikda ishlatiladigan holatlardan tashqari saqlaning. Quyidagilar uchun afzal:

uchun (initsializatsiya; shart; yangilash) {
  bayonotlar
}

vaqt

while (holat) {
  bayonotlar
}

qilmoq

qilish {
  bayonotlar
} while (shart);

kaliti

switch (ifoda) {
  vaziyat ifoda:
    bayonotlar
  standart:
    bayonotlar
}

harakat qilib ko'ring

urinib ko'ring {
  bayonotlar
} catch (o'zgaruvchan) {
  bayonotlar
}
urinib ko'ring {
  bayonotlar
} catch (o'zgaruvchan) {
  bayonotlar
} nihoyat {
  bayonotlar
}
  • Bo'sh joy: o'qishni yaxshilash uchun bo'sh joydan oqilona foydalaning: bo'sh joy qoldiring va kalit so'zdan keyin (; ikkilik operatsiyadan oldin va keyin (+, -, /, *, && ..); iboraning ichida va har biridan keyin; ajratish uchun) bayonotning har bir qismi; har biridan keyin.
  • Yangi satrlar: mantiqiy bog'liq operatsiyalarni bajaradigan kod bloklarini ajratish uchun yangi qatorlardan foydalaning.
  • Qo'shtirnoqlar "qo'shtirnoq o'rniga" bitta tirnoqni afzal ko'radi. "Ikkilik tirnoq" HTML atributlarida standart hisoblanadi, shuning uchun bitta tirnoqdan foydalanish HTML satrlari bilan ishlashda muammolarni bartaraf etishga yordam beradi. O'zgaruvchan interpolatsiya o'rniga shablon yozuvlaridan foydalaning.

Leksik struktura

Endi biz JavaScript-ning qurilish bloklariga chuqur sho'ng'iymiz: unikod, nuqta-vergul, bo'sh joy, harflar sezgirligi, sharhlar, so'zma-so'z, identifikator va ajratilgan so'zlar

Unicode

JavaScript Unicode-da yozilgan. Bu Emojis-dan o'zgaruvchan nomlar sifatida foydalanishingiz mumkin degan ma'noni anglatadi. Lekin bundan ham muhimi, siz identifikatorlarni istalgan tilda, masalan, yapon yoki xitoy tillarida, ba'zi qoidalar bilan yozishingiz mumkin.

Nuqtalar

JavaScript-da juda o'xshash C-ga o'xshash sintaksis mavjud va har bir satr oxirida nuqta-vergullarni ko'rsatuvchi ko'plab kod namunalarini ko'rishingiz mumkin.

Nuqtali vergullar majburiy emas va JavaScript ularni ishlatmaydigan kod bilan bog'liq muammolarga duch kelmaydi. So'nggi paytlarda ko'plab ishlab chiquvchilar, ayniqsa nuqta-vergullari bo'lmagan tillardan kelib chiqqan holda, ularni ishlatishdan qochishmoqda.

Siz shunchaki bir nechta satrlarga bayon yozishingiz kabi g'alati ishlardan qochishingiz kerak

qaytish
o'zgaruvchan

Yoki qavslar bilan qatorni boshlash ((yoki ()) va siz 99,9% xavfsiz bo'lasiz (va sizning yoritgichingiz sizni ogohlantiradi).

Bu shaxsiy xohishimga bog'liq va yaqinda men hech qachon foydasiz nuqta vergullarni qo'shmaslikka qaror qildim, shuning uchun ushbu maqolada siz ularni hech qachon ko'rmaysiz.

Oq bo'shliq

JavaScriptda bo'sh joy mazmunli deb hisoblanmaydi. Bo'shliqlar va chiziqlar orasidagi tanaffuslar har qanday uslubda qo'shilishi mumkin, garchi bu nazariyada bo'lsa ham.

Amalda, siz aniq belgilangan uslubni saqlab qolasiz va ko'pchilik odamlar foydalanadigan narsaga rioya qilasiz va buni liner yoki Prettier kabi uslub vositasidan foydalanib amalga oshirasiz.

Masalan, men har doim 2 ta belgidan voz kechishni yaxshi ko'raman.

Katta-kichik harfni farqlash

JavaScript harflarni hisobga oladi. Biror narsa deb nomlanadigan o'zgaruvchi narsa narsadan farq qiladi

Xuddi shu narsa har qanday identifikator uchun.

Izohlar

Siz JavaScript-da ikkita turdagi sharhlardan foydalanishingiz mumkin:

/ * * /
//

Birinchisi bir nechta chiziqlar bo'ylab cho'zilishi mumkin va uni yopish kerak.

Ikkinchisida, hozirgi qatorda, o'ng tomonda bo'lganlarning barchasi sharhlanadi.

Savollar va identifikatorlar

Biz boshlang'ich kodda yozilgan har qanday qiymatni aniqlaymiz, masalan, raqam, satr, mantiqiy yoki yanada rivojlangan konstruktsiyalar, masalan, Object Literals yoki Array Literals:

5
"Sinov"
rost
['a', 'b']
{color: 'qizil', shakli: 'Toʻrtburchak'}

Identifikator - bu o'zgaruvchini, funktsiyasini, ob'ektini aniqlash uchun ishlatilishi mumkin bo'lgan belgilar ketma-ketligi. Bu harf bilan boshlanadi, dollar belgisi yoki pastki belgisi _ va unda raqamlar bo'lishi mumkin. Unicode-dan foydalanib, har qanday ruxsat etilgan harf bo'lishi mumkin, masalan, kulgich be.

Sinov
sinov
TEST
_test
Sinov1
$ sinovi

Dollar belgisi odatda DOM elementlariga murojaat qilish uchun ishlatiladi.

Rezervlangan so'zlar

Quyidagi so'zlardan birini identifikator sifatida ishlata olmaysiz, chunki ular til tomonidan ajratilgan.

tanaffus
qilmoq
misol
tipof
quti
yana
yangi
var
qo'lga olish
nihoyat
qaytish
bo'sh
davom eting
uchun
kaliti
vaqt
tuzatuvchi
funktsiyasi
bu
bilan
standart
agar
otish
o'chirish
ichida
harakat qilib ko'ring
sinf
enum
kengayadi
juda zo'r
const
eksport
Import
amalga oshiradi
ijozat bering
xususiy
ommaviy
interfeysi
to'plami
himoyalangan
statik
Yo'l bering

O'zgaruvchilar

O'zgaruvchi bu identifikatorga berilgan asl so'zdir, shuning uchun uni keyinchalik dasturda ishlatishingiz va foydalanishingiz mumkin. Biz qanday qilib JavaScript-ni e'lon qilishni bilib olamiz.

JavaScript o'zgaruvchilariga kirish

O'zgaruvchi aniqlovchiga tayinlangan so'zma-so'z ma'noga ega, shuning uchun keyinchalik dasturda unga murojaat qilishingiz va undan foydalanishingiz mumkin.

JavaScript-dagi o'zgaruvchilar hech qanday turdagi biriktirilmagan. O'zgaruvchiga ma'lum bir tom ma'nodagi turni tayinlaganingizdan so'ng, keyinchalik o'zgaruvchini boshqa har qanday turga joylashtirish uchun, tip xatolarisiz yoki biron bir muammosiz, qayta tayinlashingiz mumkin.

Shuning uchun JavaScript ba'zida "ochilmagan" deb nomlanadi.

O'zgaruvchini ishlatishdan oldin uni e'lon qilish kerak. Buning 3 usuli mavjud: var, let yoki const-dan foydalanish. Ushbu 3 usul o'zgaruvchiga keyinchalik qanday munosabatda bo'lishingiz bilan farq qiladi.

Var-dan foydalanish

ES2015gacha, o'zgaruvchini aniqlash uchun mavjud bo'lgan yagona qurilish edi.

var a = 0

Agar siz var qo'shishni unutsangiz, siz e'lon qilinmagan o'zgaruvchiga qiymat tayinlaysiz va natijalar farq qilishi mumkin.

Qattiq rejim yoqilgan zamonaviy muhitda siz xatoga yo'l qo'yasiz. Eski muhitda (yoki qattiq rejim o'chirilgan) bu shunchaki o'zgaruvchini ishga tushiradi va uni global ob'ektga tayinlaydi.

Agar siz o'zgaruvchini e'lon qilganingizda uni ishga tushirmasangiz, unga qiymat bermaguningizcha u aniqlanmagan qiymatga ega bo'ladi.

var a // typeof a === 'aniqlanmagan'

O'zgaruvchini qayta-qayta e'lon qilishingiz mumkin:

var a = 1
var a = 2

Siz bir vaqtning o'zida bir nechta o'zgaruvchini bir xil bayonotda e'lon qilishingiz mumkin:

var a = 1, b = 2

Qo'llanish - bu o'zgaruvchining ko'rinadigan kod qismidir.

Var bilan har qanday vazifadan tashqarida boshlanadigan o'zgaruvchi global ob'ektga tayinlanadi, global miqyosga ega va hamma joyda ko'rinadi. Ushbu funktsiya ichida var bilan boshlanadigan o'zgaruvchiga ushbu funktsiya tayinlangan, u mahalliy va faqat funksiya parametrlari kabi faqat uning ichida ko'rinadi.

Global o'zgaruvchiga o'xshash nomli funktsiyaga aniqlangan har qanday o'zgaruvchi, unga soya soluvchi global o'zgaruvchidan ustun turadi.

Blok (bir juft jingalak qavs tomonidan aniqlangan) yangi doirani aniqlamasligini tushunish muhimdir. Funktsiya yaratilganda faqat yangi hajm yaratiladi, chunki var blokning qamrovi yo'q, lekin funktsiya doirasi.

Funksiya ichida, unda belgilangan har qanday o'zgaruvchi funktsiya barcha kodlari bo'ylab ko'rinadi, hatto o'zgaruvchini funktsiya oxirida e'lon qilingan bo'lsa ham, boshida u murojaat qilinishi mumkin, chunki kodni ishlatishdan oldin JavaScript aslida barcha o'zgaruvchilarni tepaga siljitadi (yuk ko'tarish deb ataladigan narsa). Ishonchsizlikni oldini olish uchun har doim funktsiyaning boshida o'zgaruvchilarni e'lon qiling.

Imkoniyatdan foydalanish

let bu ES2015-da taqdim etilgan yangi xususiyat va u aslida var-ning blokli versiyasidir. Uning ko'lami faqat blok, bayon yoki ifoda bilan va ichki tarkibidagi barcha bloklar bilan cheklangan.

Zamonaviy JavaScript dasturchilari faqat var-dan foydalanishni va var-dan foydalanishni butunlay bekor qilishni tanlashi mumkin.

Agar "noaniq" degan atama bo'lsa, ruxsat bering rang = 'qizil', chunki rang qizil rangga ega va barchasi ko'proq ma'noga ega.

Har qanday funktsiyadan tashqarida ruxsat berishni belgilash - var aksincha - global o'zgaruvchini yaratmaydi.

Const-dan foydalanish

Var yoki let bilan e'lon qilingan o'zgaruvchilar keyinchalik dasturda o'zgartirilishi va qayta tayinlanishi mumkin. Agar const ishga tushirilsa, uning qiymati hech qachon o'zgartirilmaydi va uni boshqa qiymatga o'zgartirish mumkin emas.

const a = 'sinov'

Const uchun boshqa tom ma'noni belgilashimiz mumkin emas. Ammo, agar u tarkibini mutatsiyasini o'zgartiradigan usulni ta'minlaydigan ob'ekt bo'lsa, biz mutatsiyani o'zgartira olamiz.

const o'zgarmasligini ta'minlamaydi, shunchaki mos yozuvlar o'zgartirilmasligiga ishonch hosil qiling.

const ruxsat etilgan kabi blok doirasiga ega.

Zamonaviy JavaScript ishlab chiquvchilari keyinchalik dasturda qayta tayinlanishi kerak bo'lmagan o'zgaruvchilar uchun har doim const-dan foydalanishni tanlashlari mumkin.

Nima uchun? Chunki biz yo'lda xato qilmaslik uchun har doim mavjud bo'lgan eng oddiy qurilishdan foydalanishimiz kerak.

Turlari

Ba'zan siz JS-ning ochilmaganligini o'qishingiz mumkin, ammo bu noto'g'ri. Siz o'zgaruvchiga har xil turlarni tayinlashingiz mumkinligi rost, lekin JavaScript turlariga ega. Xususan, u ibtidoiy turlarni va ob'ekt turlarini beradi.

Ibtidoiy turlari

Ibtidoiy turlari bor

  • Raqamlar
  • Simlar
  • Bulevlar

Va ikkita maxsus tur:

  • nol
  • aniqlanmagan

Keling, ularni keyingi qismlarda batafsil ko'rib chiqaylik.

Raqamlar

Ichki qismida JavaScript raqamlar uchun faqat bitta turga ega: har bir raqam - bu suzuvchi.

Sonli son - bu boshlang'ich kodda berilgan raqam, amo qanday yozilganiga qarab, u butun son yoki tom ma'noda suzuvchi nuqta bo'lishi mumkin.

Butun sonlar:

10
5354576767321
0xCC // olti

Qatlamlar:

3.14
.1234
5.2e4 //5.2 * 10 ^ 4

Simlar

Qator turi bu belgilar ketma-ketligidir. U dastlabki kodda tirnoq yoki ikki tirnoq bilan o'ralgan tom ma'nodagi satr sifatida belgilangan

'Satr'
"Boshqa qator"

Orqa chiziq yordamida satrlar bir nechta chiziqlar bo'ylab cho'zilishi mumkin

"A \
tor "

Satr, satr bosib chiqarilganda talqin qilinishi mumkin bo'lgan qochish tartibini o'z ichiga olishi mumkin, masalan \ n yangi satr yaratish uchun. Orqaga o'tish chizig'i, masalan, tirnoq bilan yopilgan satrga kotirovkani kiritishingiz kerak bo'lganda, charning yakunlovchi tirnoq sifatida talqin qilinishini oldini olish uchun foydalidir:

"Men ishlab chiquvchiman"

Simlarni + operatori yordamida ulash mumkin:

"A" + "tor"

Andoza iplari

ES2015-da taqdim etilgan shablon satrlari satrlarni aniqlab olishning yanada kuchli usulini yaratishga imkon beradigan mag'lubiyatga asoslangan.

`satr`

Siz har qanday JavaScript ifodasini kiritib, satrlarni almashtirishni amalga oshirishingiz mumkin:

"$ {narsa}" bilan satr
"$ {narsa + narsaElse}" bilan satr
`$ {obj.something ()}" bilan belgilangan qator

Siz osongina ko'p qatorli iplarga ega bo'lishingiz mumkin:

`satr
bilan
$ {narsa} `

Bulevlar

Javob: bujilar uchun ajratilgan ikkita so'z: haqiqiy va noto'g'ri. Ko'p taqqoslash operatsiyalari == === <> (va hokazo) ulardan birini yoki boshqasini qaytaradi.

agar, bayonotlar va boshqa boshqaruv tuzilmalari dastur oqimini aniqlash uchun bulyonlardan foydalansa.

Ular nafaqat haqiqiy yoki noto'g'ri, balki yolg'on va soxta qadriyatlarni ham qabul qilishadi.

Soxta qiymatlar, noto'g'ri deb talqin qilingan qiymatlar

0
-0
NaN
aniqlanmagan
nol
'' // bo'sh qator

Qolganlarning barchasi haqiqiy qiymat deb hisoblanadi.

nol

null - bu qiymat yo'qligini ko'rsatadigan maxsus qiymat.

Bu boshqa tillarda ham keng tarqalgan tushuncha, masalan, Python-da nol yoki None sifatida tanilgan.

aniqlanmagan

aniqlanmagan narsa o'zgaruvchining ishga tushirilmaganligini va uning qiymati yo'qligini bildiradi.

Odatda qaytariladigan qiymati bo'lmagan funktsiyalar bilan qaytariladi. Agar funktsiya parametrni qabul qilsa-yu, lekin uni chaqiruvchi o'rnatmasa, u aniqlanmaydi.

Agar qiymat aniqlanmaganligini aniqlash uchun siz konstruktsiyadan foydalanasiz:

tipof o'zgaruvchisi === 'aniqlanmagan'

Ob'ekt turlari

Primitiv bo'lmagan narsa ob'ekt turidir.

Vazifalar, massivlar va biz ob'ektlar deb nomlagan narsalar ob'ekt turlari. Ular o'ziga xosdir, ammo ular ob'ektlarning ko'pgina xususiyatlariga ega bo'ladilar, masalan, xususiyatlarga ega va shu xususiyatlarga ta'sir qiladigan usullarga ega.

Ifodalar

Ifodalar - bu qiymatni aniqlashga va echishga imkon beradigan kod birligi. JS tarkibidagi iboralarni toifalarga bo'lish mumkin.

Arifmetik ifodalar

Ushbu toifadagi raqamga baho beradigan barcha iboralar kiradi:

1/2
i ++
i - = 2
i * 2

Satrli iboralar

Satrga baho beradigan iboralar:

'A' + 'satr'

Birlamchi iboralar

Ushbu kategoriya ostida o'zgaruvchan havolalar, so'zma-so'z va doimiy qiymatlarga o'ting

2
0,02
'nimadur'
rost
yolg'on
bu // joriy ob'ekt
aniqlanmagan
i // qaerda i o'zgaruvchi yoki doimiy

shuningdek, ba'zi til kalit so'zlari:

funktsiyasi
sinf
funktsiya * // generator funktsiyasi
rentabellik // generator to'xtatuvchisi / rezyumer
rentabellik * // boshqa generator yoki iteratorga topshiring
async funktsiyasi * // async funktsiyasining ifodasi
kutish // async funktsiyasini to'xtatib turish / davom ettirish / tugatilishini kutish
/ naqsh / i // regex
() // guruhlash

Array va ob'ekt boshlang'ich iboralari

[] // qator tom ma'noda
{} // ob'ekt tom ma'noda
[1,2,3]
{a: 1, b: 2}
{a: {b: 1}}

Mantiqiy iboralar

Mantiqiy iboralar mantiqiy operatorlardan foydalanadi va mantiqiy qiymatni aniqlaydi:

a && b
a || b
! a

Chap tarafdagi iboralar

yangi // konstruktor misolini yaratish
super // ota-ona konstruktorini chaqiradi
... obj // tarqalish operatori yordamida ifoda

Mulkka kirish iboralari

object.property // ob'ektning xususiyatiga (yoki usuliga) murojaat qilish
ob'ekt [mulk]
ob'ekt ['mulk']

Ob'ektni yaratish iboralari

yangi ob'ekt ()
yangi a (1)
yangi MyRectangle ('name', 2, {a: 4})

Funktsiya ta'rifi ifodalari

funktsiya () {}
funktsiya (a, b) {return a * b}
(a, b) => a * b
a => a * 2
() => {qaytish 2}

Taklif iboralari

Funktsiya yoki usulni chaqirish uchun sintaksis

a.x (2)
windows.resize ()

Prototip meros

Protsessor merosidan foydalanganligi sababli JavaScript dasturlash tillarining ommabop landshaftida juda noyobdir. Bu nimani anglatishini bilib olaylik.

Ob'ektga yo'naltirilgan tillarning aksariyati sinfga asoslangan meros modelidan foydalansa-da, JavaScript prototipi meros modeliga asoslangan.

Nima degani bu?

Har bir JavaScript ob'ekti boshqa ob'ektga ishora qiluvchi prototip deb nomlangan xususiyatga ega.

Bu boshqa ob'ekt - bu ob'ektning prototipi.

Bizning ob'ektimiz ob'ektning prototipini xususiyatlar va usullarni meros qilib olish uchun ishlatadi.

Siz ob'ektning so'zma-so'z sintaksisidan foydalanib yaratilgan ob'yekt bor deb ayting:

const car = {}

Yoki yangi Object sintaksisi bilan yaratilgan:

const car = new Object ()

Qanday bo'lmasin, avtomobilning prototipi Ob'ekt:

Agar siz ob'ekt bo'lgan qatorni boshlasangiz:

const ro'yxati = []
// yoki
const list = new Array ()

Prototip - Array.

Buni Object.getPrototypeOf () va Object.prototype.isPrototypeOf () usullarini tekshirish orqali tekshirishingiz mumkin:

const car = {}
const ro'yxati = []
Object.getPrototypeOf (mashina) === Object.prototype
Object.prototype.isPrototypeOf (mashina)
Object.getPrototypeOf (ro'yxat) === Array.prototype
Array.prototype.isPrototypeOf (ro'yxat)

Prototipning barcha xususiyatlari va usullari ushbu prototipga ega bo'lgan ob'ekt uchun mavjud:

Object.prototype barcha ob'ektlarning asosiy prototipi:

Object.getPrototypeOf (Array.prototype) == Object.prototype

Agar siz Object.prototype prototipi nima ekanligini bilsangiz, unda prototip yo'q - "null". Bu maxsus qor parchasi.

Siz ko'rgan yuqoridagi misol ishdagi prototip zanjirining namunasidir.

Men Array-ni kengaytiradigan ob'ektni yasay olaman va uni ishlatgan holda yaratgan har qanday ob'ektim prototip zanjirida Array va Object-ga ega bo'ladi va barcha ajdodlardan xususiyatlar va usullarni meros qilib oladi.

Ob'ektni yaratish uchun yangi operatordan foydalanish yoki ob'ektlar va massivlar uchun asl sintaksisdan foydalanish bilan siz Object.create () yordamida ob'ektni yaratishingiz mumkin.

Birinchi argument prototip sifatida ishlatiladigan ob'ekt:

const car = Object.create ({})
const list = Object.create (Array)

IsPrototypeOf () usuli yordamida ob'ektning prototipini tekshirishingiz mumkin:

Array.isPrototypeOf (ro'yxat) // rost

E'tibor bering, chunki siz foydalanib qator yaratishingiz mumkin

const list = Object.create (Array.prototype)

va bu holda Array.isPrototypeOf (ro'yxat) noto'g'ri, Array.prototype.isPrototypeOf (ro'yxat) esa haqiqiydir.

Sinflar

2015 yilda ECMAScript 6 (ES6) standarti sinflarni joriy qildi.

Bungacha, JavaScript faqat merosni amalga oshirish uchun juda noyob usulga ega edi. Uning prototipli merosi, mening fikrimcha, boshqa har qanday mashhur dasturlash tilidan farq qilar edi.

Java yoki Python yoki boshqa tillardan kelgan odamlar prototip merosining nozik tomonlarini tushunishga qiynalishdi, shuning uchun ECMAScript qo'mitasi ularning ustiga sintaktik shakarni kiritishga qaror qildi va boshqa mashhur dasturlarda sinflarga asoslangan meros qanday ishlashiga o'xshaydi.

Bu juda muhim: kaputlar ostidagi JavaScript hanuzgacha bir xil va siz ob'ekt prototipiga odatdagi usulda kirishingiz mumkin.

Sinf ta'rifi

Sinf ko'rinishi shunday.

sinf shaxs {
  quruvchi (ism) {
    this.name = ism
  }
  Salom() {
    return 'Salom, men' + bu.name + '.'
  }
}

Sinfda yangi ClassIdentifier () yordamida yangi ob'ektlar yaratish uchun foydalanadigan identifikator mavjud.

Ob'ekt ishga tushirilganda, konstruktor usuli chaqiriladi va uning parametrlari o'tadi.

Sinfda talab qilinadigan darajada ko'p usullar mavjud. Bu holda salom bu usul va ushbu sinfdan olingan barcha ob'ektlarga murojaat qilish mumkin:

const flavio = yangi shaxs ('Flavio')
flavio.hello ()

Sinflar meros

Sinf boshqa sinfni kengaytirishi mumkin va shu sinf yordamida ishga tushirilgan ob'ektlar ikkala sinfning barcha usullariga ega.

Agar meros qilib olingan klass ierarxiyadagi yuqori sinflardan biri bilan bir xil usulga ega bo'lsa, eng yaqin usul ustuvor bo'ladi.

sinf dasturchisi shaxsni kengaytiradi {
  Salom() {
    return super.hello () + 'Men dasturchiman.'
  }
}
const flavio = yangi dasturchi ('Flavio')
flavio.hello ()

Yuqoridagi dastur "Salom, men Flavioman. Men dasturchiman."

Sinflar aniq o'zgaruvchan deklaratsiyaga ega emas, lekin har qanday o'zgaruvchini konstruktorda boshlashingiz kerak.

Sinf ichida siz super () deb chaqiradigan ota-sinfga murojaat qilishingiz mumkin.

Statik usullar

Odatda usullar sinfda emas, misolda aniqlanadi.

Statik usullar o'rniga sinfda bajariladi:

sinf shaxs {
  statik genericHello () {
    return 'Salom'
  }
}
Person.genericHello () // Salom

Xususiy usullar

Xususiy yoki himoyalangan usullarni aniqlash uchun JavaScript-ning ichki usuli yo'q.

Tekshiruvlar mavjud, ammo men ularni bu erda tasvirlamayman.

Tepaliklar va to'siqlar

Siz get yoki setter bilan prefikslangan usullarni qo'shishingiz mumkin, bunda siz bajarayotgan narsangiz asosida bajariladigan ikki xil kod qismlari mavjud: o'zgaruvchiga kirish yoki uning qiymatini o'zgartirish.

sinf shaxs {
  quruvchi (ism) {
    this._name = ism
  }
  nom (qiymat) {
    this._name = qiymat
  }
  ism olish () {
    return this._name
  }
}

Agar sizda faqat yutuvchi bo'lsa, mulkni sozlab bo'lmaydi va unga qilingan har qanday urinish e'tiborga olinmaydi:

sinf shaxs {
  quruvchi (ism) {
    this._name = ism
  }
  ism olish () {
    return this._name
  }
}

Agar sizda faqat sozlagich bo'lsa, siz qiymatni o'zgartirishingiz mumkin, lekin unga tashqi tomondan kira olmaysiz:

sinf shaxs {
  quruvchi (ism) {
    this._name = ism
  }
  nom (qiymat) {
    this._name = qiymat
  }
}

Istisnolar

Kod kutilmagan muammoga duch kelganda, bu vaziyatni hal qilishning idiomatik JavaScript usuli istisnolardan iborat.

Istisnolarni yaratish

Istisno otish uchun kalit so'z yordamida yaratiladi:

otish qiymati

Qaerda har qanday JavaScript qiymati bo'lishi mumkin, shu jumladan satr, raqam yoki ob'ekt.

JavaScript ushbu satrni bajarishi bilan dasturning normal oqimi to'xtatiladi va boshqaruv eng yaqin istisnosiz ishlov beruvchiga qaytariladi.

Istisnolardan foydalanish

Istisno ishlov beruvchisi - bu sinash / ta'qib qilish.

Blok ichiga kiritilgan kod satrlarida ko'tarilgan har qanday istisno tegishli tutish blokida ko'rib chiqiladi:

urinib ko'ring {
  // kod satrlari
} qo'lga olish (e) {
}

e ushbu misolda istisno qiymati.

Siz turli xil xatolarga duch keladigan bir nechta ishlov beruvchilarni qo'shishingiz mumkin.

nihoyat

Ushbu bayonni bajarish uchun JavaScript nihoyat chaqiriladigan yana bir bayonotga ega, unda dastur oqimidan qat'i nazar bajariladigan kod mavjud, agar istisno ishlangan bo'lsa yoki yo'q bo'lsa, agar istisno bo'lsa yoki yo'q bo'lsa:

urinib ko'ring {
  // kod satrlari
} qo'lga olish (e) {
} nihoyat {
}

Siz nihoyat blokirovkadan foydalanib, fayllar yoki tarmoq so'rovlari kabi ochilgan manbani tozalash uchun xizmat qilishingiz mumkin:

urinib ko'ring {
  // kod satrlari
} nihoyat {
}

Ichkariga kiritilgan bloklar

bloklarni joylashtirishi mumkin va istisno har doim eng yaqin tutish blokida ko'rib chiqiladi:

urinib ko'ring {
  // kod satrlari
  urinib ko'ring {
    // kodning boshqa qatorlari
  } nihoyat {
    // kodning boshqa qatorlari
  }
} qo'lga olish (e) {
}

Agar ichki urinishda istisno qilinsa, u tashqi tutish blokida ko'rib chiqiladi.

Nuqtalar

JavaScript nuqta-vergullari majburiy emas. Men shaxsan o'zimning kodimda nuqta-vergullarni ishlatmaslikni yaxshi ko'raman, lekin ko'p odamlar ularni afzal ko'rishadi.

JavaScript-dagi vergullar hamjamiyatni ajratadi. Ba'zilar, nima bo'lishidan qat'iy nazar, ularni doimo ishlatishni afzal ko'rishadi. Boshqalar ulardan qochishni yaxshi ko'radilar.

Yillar davomida nuqta-vergullarni ishlatganimdan so'ng, 2017 yil kuzida men kerak bo'lganda ulardan qochishga harakat qildim va Prettier-ni nuqta-vergullarni o'zimning kodimdan avtomatik ravishda olib tashlash uchun o'rnatganman, agar ularni talab qiladigan maxsus kod tuzilmagan bo'lsa.

Endi nuqta-vergullarga yo'l qo'ymaslik tabiiy, deb o'ylayman, kod yaxshiroq ko'rinadi va o'qish osonroq.

Buning hammasi mumkin, chunki JavaScript-da nuqta-vergullarni kiritish shart emas. Nuqtali vergul kerak bo'lgan joy bo'lsa, uni parda orqasida qo'shib qo'yadi.

Buni amalga oshiradigan jarayon Avtomatik nuqta-vergul kiritish deyiladi.

To'g'ri nuqta-vergullarni ishlatadigan qoidalarni bilish juda muhim, chunki xatolarni keltirib chiqaradigan kodni yozishdan saqlanish kerak, chunki siz kutganingiz kabi harakat qilmaydi.

JavaScript-ni avtomatik semikolon qo'shib qo'yish qoidalari

Dastur kodini tahlil qilish paytida quyidagi aniq vaziyatlarni topganda, JavaScript tahlil qiluvchi avtomatik ravishda nuqta-vergul qo'shadi:

  1. keyingi qator mavjud kodni buzadigan kod bilan boshlanganida (kod bir nechta satrlarda ishlov berishi mumkin)
  2. keyingi qator a} bilan boshlanganida, joriy blok yopiladi
  3. boshlang'ich kodi faylining oxiriga yetganda
  4. o'z satrida qaytish bayonoti mavjud bo'lganda
  5. o'z satrida tanaffus bayonoti mavjud bo'lganda
  6. o'z satrida otish bayonoti mavjud bo'lganda
  7. o'z satrida davom ettirish bayonoti mavjud bo'lganda

Siz o'ylagan narsani qilmaydigan kodga misollar

Ushbu qoidalarga asoslanib, ba'zi misollar.

Buni ol:

const hey = 'hey'
const you = 'hey'
const heyYou = Hey + '' + siz
['h', 'e', ​​'y'] .Ert ((harf) => console.log (harf))

Siz xatoga yo'l qo'yasiz TypeError: Belgilanmagan 'forEach' xususiyatini o'qiy olmaysiz, chunki 1-qoidaga binoan JavaScript kodni quyidagicha izohlashga harakat qiladi.

const hey = 'hey';
const you = 'hey';
const heyYou = hey + '' + siz ['h', 'e', ​​'y'] .Eng ((harf) => console.log (harf))

Bunday kod parchasi:

(1 + 2) .toString ()

bosma "3".

const a = 1
const b = 2
const c = a + b
(a + b) .toString ()

Buning o'rniga, yuqoridagi kod TypeErrorni ko'taradi: b - bu istisno emas, chunki JavaScript uni shunday izohlashga harakat qiladi

const a = 1
const b = 2
const c = a + b (a + b) .toString ()

4-qoidaga asoslangan yana bir misol:

(() => {
  qaytish
  {
    rang: 'oq'
  }
}) ()

Siz darhol ushbu funktsiyani qaytaradigan qiymat rang xususiyatini o'z ichiga olgan ob'ekt bo'lishini kutishingiz mumkin edi, ammo u bunday emas. Buning o'rniga, bu aniqlanmagan, chunki JavaScript qaytgandan keyin nuqta-vergul qo'yadi.

Qaytgandan keyin darhol ochiladigan qavsni qo'yish kerak:

(() => {
  return {
    rang: 'oq'
  }
}) ()

Ushbu kod ogohlantirish sifatida "0" ni ko'rsatadi deb o'ylaysizmi:

1 + 1
-1 + 1 === 0? ogohlantirish (0): ogohlantirish (2)

lekin buning o'rniga 2ni ko'rsatadi, chunki 1-qoidada JavaScript uni quyidagicha izohlaydi.

1 + 1 -1 + 1 === 0? ogohlantirish (0): ogohlantirish (2)

Ehtiyot bo'ling. Ba'zi odamlar nuqta-vergullar haqida juda fikr bildirishadi. Men halollik bilan parvo qilmayman, vosita bizga uni ishlatmaslik variantini beradi, shuning uchun biz nuqta-vergullardan saqlanishimiz mumkin.

Men sizga o'zingiz qaror qilishdan boshqa hech narsa taklif qilmayapman.

Hatto shunchaki asosiy stsenariylarning aksariyati hech qachon sizning kodingizda ko'rinmasa ham, biz ozgina e'tibor berishimiz kerak.

Ba'zi qoidalarni tanlang:

  • Qaytish bayonotlarida ehtiyot bo'ling. Agar biror narsani qaytarsangiz, uni qaytarish bilan bir qatorga qo'shing (tanaffus, otish, davom etish uchun bir xil)
  • Hech qachon qavslar bilan chiziqni boshlamang, ular funktsiyani chaqirish yoki array elementiga murojaat qilish uchun oldingi chiziq bilan bog'langan bo'lishi mumkin.

Oxir-oqibat, har doim kodingizni xohlaganingizga ishonch hosil qilish uchun uni sinab ko'ring.

Iqtiboslar

Endi biz JavaScript-da berilgan tirnoq va ularning o'ziga xos xususiyatlariga o'tamiz.

JavaScript sizga uchta tirnoq turidan foydalanishga imkon beradi:

  • bitta tirnoq
  • qo'shtirnoq
  • belgi

Birinchi 2 mohiyati bir xil:

const test = 'sinov'
const velosiped = "velosiped"

Ulardan birini yoki boshqasini ishlatishda juda katta farq yo'q. Farq shundaki, satrni belgilashda foydalanadigan qo'shtirnoq belgilaridan qochish kerak.

const test = 'sinov'
const test = 'te \' st '
const test = 'te "st'
const test = "te \" st "
const test = "te'st"

Turli xil uslublar bo'yicha qo'llanmalar mavjud, ular har doim bitta uslubdan boshqasiga va boshqa uslublardan foydalanishni tavsiya etadilar.

Men shaxsan men har doim bitta tirnoqni afzal ko'raman va faqat HTML-dagi qo'shtirnoqlardan foydalanaman.

Backticks JavaScript-ga so'nggi qo'shimchadir, chunki ular 2015 yilda ES6-da taqdim etilgan.

Ularning o'ziga xos xususiyati bor - ular ko'p qirrali torlarni olish imkoniyatini beradi.

Ko'p satrlarni oddiy satrlar yordamida, qochish belgilaridan foydalanish mumkin:

const multilineString = 'Qator \ ko'p qatorlarsiz'

Orqaga tugmachalarini ishlatib (klaviaturada 1 raqamining chap tomonidagi tugma) siz qochish belgilaridan foydalanishingiz mumkin:

const multilineString = `Bir qator
bir nechta satrlarda

Faqat bu emas. $ {} Sintaksisidan foydalanib, o'zgaruvchilarni interpolyatsiya qilishingiz mumkin:

const multilineString = `Bir qator
$ {1 + 1} qatorlarida

Ularga Template Literals deyiladi.

Andoza adabiyotlar

ES2015-da taqdim etilgan, ESA aka ES6, Template Literals satrlarni e'lon qilishning yangi usulini, shuningdek, allaqachon mashhur bo'lgan yangi qiziqarli konstruktsiyalarni taklif qiladi.

Andoza Literals - bu ES5 va ES6 bilan taqqoslaganda yangi chiziqlar bilan ishlashga imkon beradigan yangi ES2015 / ES6 xususiyati.

Bir qarashda sintaksis juda sodda, bitta yoki ikki tirnoq o'rniga faqat urg'u yozuvlaridan foydalaning:

const a_string = `nimadir '

Ular juda ko'p xususiyatlarga ega bo'lganligi sababli noyobdir, chunki oddiy chiziqlar tirnoq bilan qurilgan, xususan:

  • ular ko'p bosqichli satrlarni aniqlash uchun ajoyib sintaksisni taklif qilishadi
  • ular o'zgaruvchilar va satrlarda ifodalarni interpolyatsiya qilishning oson usulini ta'minlaydi
  • ular shablon teglari bilan DSLlarni yaratishga imkon beradi

Keling, bularning har birini batafsil ko'rib chiqaylik.

Ko'p qatorli

Pre-ES6, ikkita chiziqqa o'ralgan satr yaratish uchun siz satr oxirida \ belgisini ishlatishingiz kerak edi:

const string = 'birinchi qism \
ikkinchi qism '

Bu 2 satrda satr yaratishga imkon beradi, lekin u faqat bitta satrda ko'rsatiladi:

birinchi qism ikkinchi qism

Satrni bir nechta satrlarda ko'rsatish uchun har bir satr oxirida \ n qo'shishingiz kerak bo'ladi:

const string = 'birinchi qator \ n \
ikkinchi qator '

yoki

const string = 'birinchi qator \ n' +
               "ikkinchi qator"

Andoza adabiyotlar ko'p qatorli simlarni ancha soddalashtiradi.

Oddiy shablon shablon bilan ochilganda, siz shunchaki kirishni bosib, yangi chiziq yaratish uchun maxsus belgilarsiz ishlaysiz va u quyidagicha ko'rsatiladi:

const string = `Hey
bu
tor
ajoyib! "

Yodingizda bo'lsin, bo'sh joy mazmunli, shuning uchun quyidagilarni bajaring:

const string = `Birinchi
                Ikkinchi

Quyidagicha satr yaratmoqchi:

Birinchidan
                Ikkinchi

Ushbu muammoni hal qilishning oson usuli bu bo'sh birinchi satrga ega bo'lish va trim () usulini qo'shib qo'yishdir, bu belgi oldidan bo'sh joyni olib tashlaydi:

const string = `
Birinchidan
Second`.trim ()

Interpolatsiya

Andoza adabiyotlar o'zgaruvchilar va iboralarni satrlarga kiritish uchun qulay usulni ta'minlaydi.

Siz buni $ {...} sintaksisidan foydalanib bajarasiz:

const var = 'sinov'
const string = `nimadir $ {var}` // biror narsa sinovi

$ {} Ichida siz har qanday narsa, hatto iboralarni ham qo'shishingiz mumkin:

const string = `$ $ 1 + 2 + 3}`
const string2 = `$ {foo () nimadir? 'x': 'y'} `

Andoza teglari

Yorliqlangan shablonlar bu siz uchun unchalik ahamiyatsiz ko'rinadigan xususiyatlardan biridir, ammo aslida u ko'pgina mashhur kutubxonalar tomonidan ishlatiladi, masalan, Styled Component yoki Apollon, GraphQL mijoz / server kutubxonasi, shuning uchun u qanday ishlashini tushunish kerak.

Styled Componentlarda shablon teglari CSS satrlarini aniqlash uchun ishlatiladi:

const tugmasi = uslubli. tugma
  shrift hajmi: 1.5em;
  fon rangi: qora;
  rang: oq;
`;

Apollon shablonidagi teglar GraphQL so'rovlar sxemasini aniqlash uchun ishlatiladi:

const query = gql`
  so'rov {
    ...
  }
`

Ushbu misollarda ta'kidlangan styled.button va gql shablon teglari faqat vazifalar:

funktsiya gql (harflar, ... iboralar) {
}

Ushbu funktsiya har qanday hisoblash natijasi bo'lishi mumkin bo'lgan satrni qaytaradi.

literallar - bu interpolyatsiya iboralari bilan token qilingan shablonning asl mazmunini o'z ichiga olgan massiv.

iboralar barcha interpolyatsiyalarni o'z ichiga oladi.

Yuqoridagi misolni olsak:

const string = `$ $ 1 + 2 + 3}`

tom ma'noda bu ikkita elementdan iborat qator. Birinchisi, bu birinchi interpolatsiyaga qadar bo'lgan satr, ikkinchisi - bo'sh satr, birinchi interpolatsiyaning oxirigacha bo'lgan bo'sh joy (bizda faqat bittasi bor) va satr oxiri.

bu holda ifodalar bitta element bilan bir qator, 6.

Keyinchalik murakkab misol:

const string = `nimadir
yana $ {'x'}
$ {1 + 2 + 3} yangi qator
sinov "

Bu holda, harflar birinchi element bo'lgan qatordir:

`nimadir
boshqa `

ikkinchisi:

`
yangi qator `

uchinchisi:

`
sinov "

bu holda iboralar x va 6 elementlari bo'lgan qatordir.

Ushbu qiymatlarni uzatgan funktsiya ular bilan har qanday narsani amalga oshirishi mumkin va bu bunday xususiyatning kuchi.

Eng oddiy misol, satrlarning interpolyatsiyasini oddiy so'zlar va iboralarni birlashtirish orqali ko'paytirish:

const interpolated = interpolate` Men $ {10} € 'to'ladim

va interpolate shunday ishlaydi:

funktsiya interpolate (harflar, ... iboralar) {
  ruxsat bering string = ``
  uchun (const [i, val] expressions.entries ()) {
    satr + = harflar [i] + val
  }
  satr + = harflar [literallar.length - 1]
  qaytish qatori
}

JavaScript funktsiyalari

Endi biz funktsiyalar haqida umumiy ma'lumotdan tortib, ularni qanday ishlatishingizni yaxshilaydigan mayda tafsilotlarni bilib olamiz.

JavaScript-dagi hamma narsa funktsiyalarda bo'ladi.

Funktsiya bu o'z-o'zidan tarkib topgan kod blokidir, uni bir marta aniqlab olish va istagan sonli soniyalarda ishlatish mumkin.

Funktsiya ixtiyoriy ravishda parametrlarni qabul qilishi va bitta qiymatni qaytarishi mumkin.

JavaScript funktsiyalari bu ob'ektlar, ob'ektning maxsus turi: funktsiya ob'ektlari. Ularning eng katta kuchi ularni chaqirish mumkinligidadir.

Bundan tashqari, funktsiyalar birinchi darajali funktsiyalar deb aytiladi, chunki ular qiymatga tayinlanishi mumkin va ular argument sifatida uzatilishi va qaytish qiymati sifatida ishlatilishi mumkin.

Eskirgan ES6 / ES2015 sintaksisidan boshlaylik. Bu erda vazifalar deklaratsiyasi:

funktsiya dozometingi (foo) {
  // nimadir qil
}

Endi, ES6 / ES2015 postida odatiy funktsiya deb ataladigan dunyoda

Vazifalar o'zgaruvchiga tayinlanishi mumkin (bu funktsiya ifodasi deb ataladi):

const dozomething = funktsiya (foo) {
  // nimadir qil
}

Nomlangan funktsional iboralar o'xshash, ammo xato yuz berganda foydali bo'lgan stack call izi bilan chiroyli o'ynang - u funktsiya nomini saqlab qoladi:

const dozomething = funktsiya dozometingi (foo) {
  // nimadir qil
}

ES6 / ES2015 strelka funktsiyalari bilan ishlayotganda, ayniqsa chiziq funktsiyalari bilan ishlashda foydalanish juda yoqadi:

const dozomething = foo => {
  //nimadir qil
}

Ok funktsiyalari yuqoridagi boshqa funktsiyalar ta'riflaridan muhim farq qiladi, ko'ramiz, qaysi biri keyinchalik kengaytirilgan mavzu.

Parametrlar

Funktsiya bir yoki bir nechta parametrlarga ega bo'lishi mumkin.

const dozomething = () => {
  //nimadir qil
}
const dozomethingElse = foo => {
  //nimadir qil
}
const dosomethingElseAgain = (foo, bar) => {
  //nimadir qil
}

ES6 / ES2015 dan boshlab, funktsiyalar parametrlar uchun standart qiymatlarga ega bo'lishi mumkin:

const dozomething = (foo = 1, bar = 'hey') => {
  //nimadir qil
}

Bu sizga barcha parametrlarni to'ldirmasdan funktsiyani chaqirishga imkon beradi:

dozometing (3)
nimadir qil()

ES2018 parametrlar uchun oxirgi vergulni taqdim etdi, bu parametrlar atrofida harakatlanayotganda (masalan, o'rtada oxirgi marta harakatlanish) yo'qolgan vergullar tufayli xatolarni kamaytirishga yordam beradi.

const dozomething = (foo = 1, bar = 'hey') => {
  //nimadir qil
}
dozometing (2, "ho!")

Siz barcha argumentlaringizni qatorga o'rashingiz va funktsiyani chaqirganda spread operatoridan foydalanishingiz mumkin:

const dozomething = (foo = 1, bar = 'hey') => {
  //nimadir qil
}
const args = [2, 'ho!']
dozalash (... args)

Ko'p parametrlar bilan buyurtmani eslab qolish qiyin bo'lishi mumkin. Ob'ektlardan foydalanish, buzish parametr nomlarini saqlashga imkon beradi:

const dozomething = ({foo = 1, bar = 'hey'}) => {
  //nimadir qil
  konsol.log (foo) // 2
  console.log (bar) // 'ho!'
}
const args = {foo: 2, bar: 'ho!' }
dozalash (args)

Qaytish qiymatlari

Har bir funktsiya standart sifatida aniqlanmagan qiymatni qaytaradi.

Har qanday funktsiya uning kod satrlari tugashi bilan yoki ijro oqimi qaytadigan kalit so'zni topganda to'xtatiladi.

Ushbu kalit so'zga JavaScript duch kelganida, u funktsiyani bajarishdan chiqib, chaqiruvchiga boshqarish imkoniyatini beradi.

Agar siz qiymatni o'tkazsangiz, ushbu funktsiya natijasida ushbu qiymat qaytariladi:

const dozomething = () => {
  qaytish 'sinov'
}
const natijasi = dozometing () // natija === 'sinov'

Siz faqat bitta qiymatni qaytarishingiz mumkin.

Bir necha qiymatlarni qaytarishni taqlid qilish uchun siz ob'ektni asl holatini yoki qatorni qaytarishingiz mumkin va funktsiyani chaqirganda buzuvchi vazifani ishlatishingiz mumkin.

Massivlardan foydalanish:

Ob'ektlardan foydalanish:

Ichki vazifalar

Vazifalarni boshqa funktsiyalar ichida aniqlash mumkin:

const dozomething = () => {
  const dosomethingelse = () => {}
  dosometingelse ()
  qaytish 'sinov'
}

O'rnatilgan funktsiya tashqi funktsiyaga mos keladi va tashqi tomondan chaqirilmaydi.

Ob'ekt usullari

Ob'ekt xususiyatlari sifatida foydalanilganda, funktsiyalar usul deb ataladi:

const car = {
  brend: 'Ford',
  model: "Fiesta",
  boshlash: funktsiya () {
    konsol.log ("Boshlandi")
  }
}
car.start ()

o'q vazifalarida "bu"

Ob'ekt usullari sifatida foydalanilganda, o'q funktsiyalari va oddiy funktsiyalarning muhim harakati mavjud. Ushbu misolni ko'rib chiqing:

const car = {
  brend: 'Ford',
  model: "Fiesta",
  boshlash: funktsiya () {
    console.log (`$ {this.brand} $ {this.model}` boshlandi)
  },
  to'xtatish: () => {
    console.log (`To'xtatilgan $ {this.brand} $ {this.model}`)
  }
}

Stop () usuli siz kutganingizdek ishlamaydi.

Buning sababi, bu ikki funktsiyani deklaratsiya qilish uslubida farq qiladi. strelka funktsiyasida, bu holda deraza ob'ekti bo'lgan yopiq funktsiya kontekstiga tegishli.

funktsiya () yordamida xost ob'ektga tegishli bo'lgan bu

Bu strelka funktsiyalari ob'ekt usullari va konstruktorlari uchun ishlatilishi mumkin emasligini bildiradi (strelka funktsiyasi konstruktorlari chaqirilganda TypeError-ni ko'taradi).

IIFE, darhol funktsional iboralar

IIFE bu e'lon qilinganidan keyin darhol bajariladigan funktsiya:

; (dozometing funktsiyasi () {
  console.log ('bajarilgan')
}) ()

Siz natijani o'zgaruvchiga belgilashingiz mumkin:

const narsa = (funktsiyani o'lchash () {
  "nimadir" ni qaytarish
}) ()

Ular juda qulaydir, chunki funktsiyani aniqlangandan keyin uni alohida-alohida chaqirishingiz shart emas.

Yuk ko'tarish funktsiyasi

Kodni ishlatishdan oldin JavaScript uni ba'zi qoidalarga muvofiq o'zgartiradi.

Xususan, funktsiyalar o'zlarining eng yuqori qismida joylashgan. Shuning uchun yozish qonuniydir

nimadir qil()
funktsiya dozometingi () {
  console.log ('nimadir qildim')
}

Ichki holda, JavaScript funktsiyani chaqirilishidan oldin bir xil doirada joylashgan boshqa barcha funktsiyalar bilan birga ko'chiradi:

funktsiya dozometingi () {
  console.log ('nimadir qildim')
}
nimadir qil()

Endi, agar siz nomlangan funktsiya iboralaridan foydalansangiz, o'zgaruvchilardan foydalansangiz, har xil narsa yuz beradi. O'zgaruvchan deklaratsiya yuk ko'tariladi, lekin qiymat emas, shuning uchun funktsiya emas.

nimadir qil()
const dozomething = funktsiya dozometingi () {
  console.log ('nimadir qildim')
}

Ishlamayman:

Buning sababi ichki ichida quyidagicha bo'ladi:

const dozometing
nimadir qil()
dozometing = funktsiya dozometingi () {
  console.log ('nimadir qildim')
}

Xuddi shu narsa deklaratsiyalar uchun ham sodir bo'ladi. var deklaratsiyalari ham ishlamaydi, lekin boshqa xato bilan:

Buning sababi, var deklaratsiyalari ko'tariladi va qiymat sifatida aniqlanmagan qiymat bilan o'rnatiladi, const va let esa ko'tariladi, lekin boshlanmaydi.

Okning vazifalari

Ok funktsiyalari ES6 / ES2015-dagi eng ta'sirli o'zgarishlardan biri bo'lib, hozirgi kunda ular keng qo'llaniladi. Ular odatdagi funktsiyalardan biroz farq qiladi. Qanday qilib quyida ko'rib chiqaylik.

Men yuqorida strelka funktsiyalarini tanishtirdim, lekin ular o'zlarining bo'limlariga juda muhimdir.

Ok funktsiyalari ES6 / ECMAScript 2015 da kiritildi va ular joriy etilganidan beri JavaScript kodi qanday ko'rinishda (va ishlayotganda) o'zgarib turishdi.

Menimcha, bu o'zgarish shunchalik ma'qul bo'ldiki, zamonaviy kod bazalarida funktsional kalit so'zdan foydalanishni kamdan-kam uchratasiz.

Vizual ravishda, bu qisqa va qisqa sintaksis yordamida funktsiyalarni yozishga imkon beradigan oddiy va yoqimli o'zgarish:

const myFunction = funktsiya foo () {
  // ...
}

ga

const myFunction = () => {
  // ...
}

Agar funktsiya tanasida faqat bitta ibora bo'lsa, siz qavslarni qoldirib, hammasini bitta satrda yozishingiz mumkin:

const myFunction = () => doSomething ()

Parametrlar Qavslar ichida:

const myFunction = (parametr1, parametr2) => doSomething (parametr1, parametr2)

Agar bitta (va faqat bitta) parametr bo'lsa, siz qavslarni to'liq chiqarib tashlashingiz mumkin:

const myFunction = param => doSomething (parametr)

Ushbu qisqa sintaksis tufayli strelka funktsiyalari kichik funktsiyalardan foydalanishni rag'batlantiradi.

Shubhasiz qaytish

Ok funktsiyalari aniq qaytarilishga imkon beradi: qiymatlar qaytish kalit so'zidan foydalanmasdan qaytariladi.

Bu funktsiya tanasida on-layn bayonot mavjud bo'lganda ishlaydi:

const myFunction = () => 'sinov'
myFunction () // 'test'

Boshqa bir misol, ob'ektni qaytarish (jingalak qavslarni qavslar ichiga o'rashni unutmang, bunda tanani o'rash funktsiyasi deb hisoblanmaslik kerak):

const myFunction = () => ({qiymat: 'test'})
myFunction () // {value: 'test'}

Bu strelka funktsiyalarida qanday ishlaydi

Bu tushunish qiyin bo'lishi mumkin bo'lgan tushunchadir, chunki u kontekstga bog'liq ravishda va JavaScript rejimiga qarab o'zgaradi (qat'iy rejim yoki yo'q).

Ushbu tushunchani aniqlashtirish juda muhim, chunki strelka funktsiyalari odatdagi funktsiyalarga nisbatan juda boshqacha ishlaydi.

Ob'ekt usuli sifatida aniqlanganda, normal funktsiyada bu ob'ektga tegishlidir, shuning uchun siz quyidagilarni bajarishingiz mumkin:

const car = {
  model: "Fiesta",
  ishlab chiqaruvchi: 'Ford',
  fullName: funktsiya () {
    '$ {this.man ishlab chiqaruvchisi} $ {this.model} `ni qaytaring
  }
}

car.fullName () "Ford Fiesta" ni qaytaradi.

Ko'rsatkich funktsiyalari bilan foydalaniladigan ushbu hajm ijro etilish kontekstidan meros qilib olingan. Ko'rsatkich funktsiyasi buni umuman bog'lamaydi, shuning uchun uning qiymati chaqiruv stekida ko'rib chiqiladi, shuning uchun ushbu kodda car.fullName () ishlamaydi va "aniqlanmagan aniqlanmagan" satrini qaytaradi:

const car = {
  model: "Fiesta",
  ishlab chiqaruvchi: 'Ford',
  fullName: () => {
    '$ {this.man ishlab chiqaruvchisi} $ {this.model} `ni qaytaring
  }
}

Shu sababli, o'q vazifalari ob'ekt usullari sifatida mos kelmaydi.

Ok vazifasini ob'ektni o'rnatishda konstruktor sifatida ishlatib bo'lmaydi. Bu TypeError-ni ko'taradi.

Bu erda dinamik kontekst kerak bo'lmaganda, odatiy funktsiyalardan foydalanish kerak.

Voqealar bilan ishlashda bu ham muammo. DOM Voqealarini tinglovchilar buni maqsad elementi sifatida belgilab qo'yishdi va agar siz bunga ishlov beruvchida ishonsangiz, odatdagi funktsiya zarur:

const link = document.querySelector ('# link')
link.addEventListener ('cherting', () => {
  // bu === oyna
})
const link = document.querySelector ('# link')
link.addEventListener ('chertish', funktsiya () {
  // bu === link
})

Yopiqlar

Bu erda JavaScript funktsiyalari qanday ishlashini tushunish uchun muhim bo'lgan yopilish mavzusi bilan tanishib chiqamiz.

Agar siz biron bir funktsiyani JavaScript-da yozgan bo'lsangiz, siz allaqachon yopilishlardan foydalangansiz.

Siz tushunishingiz kerak bo'lgan asosiy mavzu, bu siz qila oladigan narsalar uchun ahamiyatga ega.

Agar funktsiya ishga tushirilsa, u aniqlanganda u mavjud bo'lgan hajm bilan bajariladi, lekin uni bajarish joyidagi holat bilan emas.

Ko'lami asosan ko'rinadigan o'zgaruvchilar to'plamidir.

Funktsiya o'zining Leksik doirasini eslaydi va ota-ona doirasida belgilangan parametrlarga kirish huquqiga ega.

Qisqacha aytganda, funktsiya o'zgaruvchan narsalarning butun yukiga ega.

Buni aniqlashtirish uchun darhol bir misol keltiray.

const bark = it => {
  const say = = $ {it} po'stloq! '
  ; (() => console.log (ayting)) ()
}
po'stloq (`Roger`)

Kutilganidek Roger pufladi!

Agar siz uning o'rniga harakatni qaytarishni xohlasangiz nima bo'ladi:

const tayyorgarlikBark = it => {
  const say = = $ {it} po'stloq! '
  return () => console.log (ayting)
}
const park = tayyorgarlikBark (`Roger`)
po'stloq ()

Ushbu parcha Rojer puflagan konsolga ham kiradi!

Keling, BarBarkni ikki xil itga tayyorlashda ishlatadigan so'nggi bir misolni keltiramiz:

const tayyorgarlikBark = it => {
  const say = `$ {it} po'stloq! '
  return () => {
    konsol.log (ayting)
  }
}
const rogerBark = tayyorgarlikBark (`Roger`)
const sydBark = tayyorgarlikBark (`Syd`)
rogerBark ()
sydBark ()

Bu bosma

Rojer qichqirdi!
Sid baqirdi!

Ko'rinib turibdiki, o'zgaruvchining holati tayyorgarlikBark () dan qaytarilgan funktsiya bilan bog'liq.

Shuni ham yodda tutingki, biz tayyor deylik () buyrug'ini ikkinchi marta chaqirganimizda yangi yangi o'zgaruvchini aniqlaymiz, lekin bu birinchi tayyorgarlikBark () miqyosiga ta'sir qilmaydi.

Yopish jarayoni shunday ishlaydi: qaytarilgan funktsiya o'zining dastlabki holatini saqlab qoladi.

Massivlar

Vaqt o'tishi bilan JavaScript massivlari tobora ko'proq xususiyatlarga ega bo'ldi va ba'zida qachondir boshqa va boshqa konstruktsiyani ishlatish kerakligini bilish qiyin. Ushbu bo'lim 2018 yildan boshlab nimadan foydalanishingiz kerakligini tushuntirishga qaratilgan.

Massivni boshlang

const a = []
const a = [1, 2, 3]
const a = Array.of (1, 2, 3)
const a = Array (6) .fill (1) // boshlang'ich qiymatning 6 ta elementidan iborat qator

Eski sintaksisdan foydalanmang (shunchaki yozilgan qatorlar uchun foydalaning)

const a = new Array () // hech qachon ishlatilmaydi
const a = yangi Array (1, 2, 3) // hech qachon foydalanilmaydi

Massiv uzunligini oling

const l = a.length

"Har" bilan qator takrorlash

har bir (f)

F () qiymati qaytarilgunga qadar takrorlanadi

Massivni "some" bilan takrorlash

a.some (f)

F () haqiqiy qiymatni qaytarguncha takrorlaydi

Massivni takrorlang va funktsiyani qaytarilgan natijasi bilan yangisini qaytaring

const b = a.map (f)

A-ni takrorlaydi va har bir elementga f () buyrug'ini bajarish natijasida yangi qator yaratadi

Bir qatorni filtrlang

const b = a.filter (f)

A harflarini takrorlaydi va har bir elementga f () ni bajarishda haqiqiy qaytarilgan elementlar bilan yangi qator yaratadi

Kamaytirish

a.reduce ((akkumulyator, currentValue, currentIndex, qator) => {
  // ...
}, boshlang'ich qiymat)

return () qatorning barcha elementlarida qo'ng'iroqni qaytarish funktsiyasini bajaradi va natijani izchil hisoblash imkonini beradi. Agar boshlang'ich qiymat ko'rsatilgan bo'lsa, birinchi iteratsiyada akkumulyator shu qiymatga teng bo'ladi.

Masalan:

; [1, 2, 3, 4] .reduce ((akkumulyator, currentValue, currentIndex, qator) => {
  qaytish akkumulyatori * joriy qiymat
}, 1)
// iteratsiya 1: 1 * 1 => qaytish 1
// iteratsiya 2: 1 * 2 => qaytish 2
// iteratsiya 3: 2 * 3 => 6 ga qaytish
// iteratsiya 4: 6 * 4 => 24 ga qaytish
// qaytarish qiymati 24 ga teng

har biriga

ES6
a.forEach (f)

Iterates f-ni to'xtatishning imkoni yo'q

Masalan:

a.forEach (v => {
  konsol.log (v)
})

uchun

ES6
uchun (let v of a) {
  konsol.log (v)
}

uchun

uchun (bo'lsin i = 0; i 

Iterates a, return yoki break yordamida to'xtatilishi mumkin va davom etish yordamida iteratsiyani o'tkazish mumkin

@@ iterator

ES6

Massivdan iteratorni olish qiymatlarning iteratorini qaytaradi

const a = [1, 2, 3]
ruxsat bering = a [Symbol.iterator] ()
konsol.log (it.next (). qiymati) // 1
konsol.log (it.next (). qiymati) // 2
konsol.log (it.next (). value) // 3

.entries () kalit / qiymat juftliklarining iteratorini qaytaradi

ruxsat bering = a.entries ()
konsol.log (it.next (). qiymati) // [0, 1]
konsol.log (it.next (). qiymati) // [1, 2]
konsol.log (it.next (). qiymati) // [2, 3]

.keys () tugmachalarda iteratsiya qilish imkoniyatini beradi:

ruxsat bering = a.keys ()
konsol.log (it.next (). value) // 0
konsol.log (it.next (). qiymati) // 1
konsol.log (it.next (). qiymati) // 2

.next () massiv tugashi bilan aniqlanmagan qiymatni qaytaradi. Iteratsiyani it.next () ga qaytish orqali amalga oshirilgan qiymatni qaytargan holda topishingiz mumkin. amalga oshirilgan, oxirgi element qaytarilgunga qadar har doim soxta bo'ladi.

Bir qator oxiriga qo'shish

a.push (4)

Bir qator boshida qo'shish

a.unshift (0)
a.unshift (-2, -1)

Elementni massivdan olib tashlash

Oxiridan

a.pop ()

Boshidan

a.shift ()

Tasodifiy holatda

a.splice (0, 2) // dastlabki 2 ta elementni oling
a.splice (3, 2) // 3 indeksdan boshlab 2 ta elementni oling

Remove () ni ishlatmang, chunki u aniqlanmagan qiymatlarni qoldiradi.

Olib tashlang va joyiga joylashtiring

a.splice (2, 3, 2, 'a', 'b') // 3 ta elementni o'chiradi
// indeks 2 va 2 ta elementni qo'shadi,
// hali ham 2-indeksdan boshlab

Bir nechta massivlarga qo'shiling

const a = [1, 2]
const b = [3, 4]
a.concat (b) // 1, 2, 3, 4

Muayyan element uchun qatorni qidiring

ES5

a.indexOf ()

Topilgan birinchi mos keladigan indeksni yoki agar topilmasa -1 ni qaytaradi

a.lastIndexOf ()

Topilgan oxirgi mos keladigan indeksni yoki agar topilmasa -1 ni qaytaradi

ES6

a.find ((element, indeks, qator) => {
  // true yoki false ni qaytaring
})

Haqiqiy qaytadigan birinchi elementni qaytaradi. Agar topilmagan bo'lsa, aniqlanmagan qiymatni qaytaradi.

Odatda ishlatiladigan sintaksis:

a.find (x => x.id === my_id)

Yuqoridagi qator massivda birinchi elementni qaytaradi ID === my_id.

findIndex haqiqiy elementni qaytaradigan birinchi indeksni qaytaradi, agar topilmasa, aniqlanmagan qiymatni qaytaradi:

a.findIndex ((element, indeks, qator) => {
  // true yoki false ni qaytaring
})

ES7

a (o'z ichiga oladi)

Agar qiymat bo'lsa, haqiqiy qiymatni qaytaradi.

a. o'z ichiga oladi (qiymati, i)

Agar i pozitsiyasidan keyin qiymat bo'lsa, haqiqiy qiymatni qaytaradi

Bir qator qismini oling

a.slice ()

Seriyani tartiblash

Alifbo tartibida saralash (ASCII qiymati bo'yicha - 0-9A-Za-z)

const a = [1, 2, 3, 10, 11]
a.sort () // 1, 10, 11, 2, 3
const b = [1, 'a', 'Z', 3, 2, 11]
b = a.sort () // 1, 11, 2, 3, Z, a

Maxsus funktsiya bo'yicha tartiblash

const a = [1, 10, 3, 2, 11]
a.sort ((a, b) => a - b) // 1, 2, 3, 10, 11

Bir qator tartibini o'zgartirish

a.reverse ()

Bir qatorning simli namoyishini oling

a.toString ()

Massivning simli namoyishini qaytaradi

a.join ()

Massiv elementlarining satr ulanishini qaytaradi. Maxsus ajratuvchi qo'shish uchun parametrni o'tkazing:

a.join (',')

Mavjud qatorni qiymat bo'yicha nusxalash

const b = Array.from (a) dan
const b = Array.of (... a)

Mavjud qatordan faqat ba'zi qiymatlarni nusxalash

const b = Array.from (a, x => x% 2 == 0)

Massivning qismlarini boshqa holatlarga massivga ko'chiring

const a = [1, 2, 3, 4]
a.copyWithin (0, 2) // [3, 4, 3, 4]
const b = [1, 2, 3, 4, 5]
b.copyWithin (0, 2) // [3, 4, 5, 4, 5]
// 0 nusxalashni qaerdan boshlash kerak,
// 2 nusxalashni qaerdan boshlash kerak
const c = [1, 2, 3, 4, 5]
c.copyWithin (0, 2, 4) // [3, 4, 3, 4, 5]
// 4 - bu oxirgi ko'rsatkich

Looplar

JavaScript ko'chadan qaytarish uchun ko'p usullarni taqdim etadi. Ushbu bo'limda zamonaviy JavaScript-da barcha pastadir imkoniyatlari kichik misol va asosiy xususiyatlar bilan tushuntiriladi.

uchun

const list = ['a', 'b', 'c']
uchun (bo'lsin i = 0; i 
  • Siz uzilishlar uchun aylanishni break yordamida ishlatishingiz mumkin
  • Siz davom ettirish uchun loopning keyingi iteratsiyasiga oldinga o'tishingiz mumkin

har biriga

ES5-da tanishtirilgan. Bir qator berilgan holda, list.forEach () -dan foydalanib, uning xususiyatlarini takrorlashingiz mumkin.

const list = ['a', 'b', 'c']
list.forEach ((element, indeks) => {
  console.log (element) // qiymati
  console.log (indeks) // indeks
})
// indeks ixtiyoriy
list.forEach (element => konsol.log (element))

Afsuski, siz ushbu tsikldan chiqa olmaysiz.

qil ... esa

const list = ['a', 'b', 'c']
ruxsat bering i = 0
qilish {
  console.log (ro'yxat [i]) // qiymat
  console.log (i) // indeks
  i = i + 1
} while (i 

Siz bir necha tsiklni break yordamida ishlatishingiz mumkin:

qilish {
  agar (biror narsa) buzilsa
} while (true)

va davom etish orqali keyingi iteratsiyaga o'tishingiz mumkin:

qilish {
  agar (biror narsa) davom etsa
  // boshqa narsa qilish
} while (true)

vaqt

const list = ['a', 'b', 'c']
ruxsat bering i = 0
while (i 

Siz bir necha tsiklni break yordamida ishlatishingiz mumkin:

while (true) {
  agar (biror narsa) buzilsa
}

va davom etish orqali keyingi iteratsiyaga o'tishingiz mumkin:

while (true) {
  agar (biror narsa) davom etsa
  // boshqa narsa qilish
}

Do ... ning farqi esa, bu esa ... har doim kamida bir marta o'z tsiklini bajarish bilan.

uchun ... ichida

Ob'ektning barcha sanab o'tiladigan xususiyatlarini yashiradi va mulk nomlarini beradi.

uchun (mulkni ob'ektga o'tkazaylik) {
  console.log (property) // mulk nomi
  console.log (ob'ekt [mulk]) // mulk qiymati
}

uchun ... of

ES2015 forEach-ning ixchamligini sindirish qobiliyati bilan birlashtirgan ... uchun for loopni taqdim etdi:

// qiymat ustidan iteratsiya
for (['a', 'b', 'c'] ning const qiymati) {
  console.log (value) // qiymat
}
// indeksni ham, "yozuvlar ()" dan foydalanib oling
uchun (const [indeks, qiymat] ning ['a', 'b', 'c']. yozuvlari ()) {
  console.log (indeks) // indeks
  console.log (value) // qiymat
}

Const ishlatilishiga e'tibor bering. Ushbu pastadir har bir iteratsiyada yangi miqyosni yaratadi, shuning uchun biz ruxsat berish o'rniga, undan xavfsiz foydalanishimiz mumkin.

uchun ... in vs for ... of uchun

For in bilan farq quyidagicha:

  • mulk qiymatlari bo'yicha ... iteratsiyalari uchun
  • for ... ichida nomlarning iteratsiyalari

Hodisalar

Brauzerda JavaScript voqealarga asoslangan dasturlash modelidan foydalanadi. Hammasi voqeani kuzatishdan boshlanadi. Ushbu bo'limda JavaScript hodisalari bilan tanishtirish va voqealarni qanday ishlashi haqida ma'lumotlar keltirilgan.

Brauzerda JavaScript voqealarga asoslangan dasturlash modelidan foydalanadi.

Hammasi voqeani kuzatishdan boshlanadi.

Voqealar DOM yuklangan bo'lishi yoki yuklab olishni tugallanadigan asenkron so'rov, yoki foydalanuvchi elementni bosishi yoki sahifani aylantirishi yoki klaviaturadagi foydalanuvchi turlari bo'lishi mumkin.

Turli xil tadbirlar juda ko'p.

Tadbir ishlovchilari

Siz biron-bir hodisaga Voqealar sodir bo'lganda chaqiriladigan funksiyani ishlatadigan Event Handler yordamida javob berishingiz mumkin.

Bitta tadbir uchun bir nechta ishlov beruvchini ro'yxatdan o'tkazishingiz mumkin va ularning barchasi o'sha voqea sodir bo'lganda chaqiriladi.

JavaScript hodisalarni boshqaruvchini ro'yxatdan o'tkazishda uchta usulni taklif etadi:

Inline hodisalarni qayta ishlovchilar

Hodisalarni ishlab chiqaruvchilarning ushbu uslubi bugungi kunda juda kamdan-kam hollarda qo'llaniladi, chunki u cheklanganligi sababli, lekin bu JavaScript-ning dastlabki kunlarida yagona usul edi:

 Havola 

DOM-dagi voqea ishlovchilari

Ob'ektda kamida bitta tadbirni qayta ko'rib chiquvchisi bo'lganida bu odatiy holdir, chunki bu holatda bir nechta ishlov beruvchini qo'shishning iloji yo'q.

windows.onload = () => {
  // oyna yuklandi
}

U tez-tez XHR so'rovlarini ko'rib chiqishda qo'llaniladi:

const xhr = yangi XMLHttpRequest ()
xhr.onreadystatechange = () => {
  //.. nimadir qil
}

Agar ('oynada' onsomething ') {} yordamida ishlov beruvchiga biror mulk tayinlanganligini tekshirishingiz mumkin.

AddEventListener () dan foydalanish

Bu zamonaviy usul. Ushbu usul bizga kerak bo'ladigan ishlov beruvchilarni ro'yxatdan o'tkazishga imkon beradi va siz topadigan eng mashhur:

windows.addEventListener ('yuklash', () => {
  // oyna yuklandi
})
Shuni esda tutingki, IE8 va undan keyingi versiyalar buni qo'llab-quvvatlamaydi va buning o'rniga o'z qo'shimchalari (addEvent () API) dan foydalanadi. Eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, buni yodda saqlang.

Turli xil elementlarni tinglash

Siz klaviaturadan foydalanish kabi "global" hodisalarni ushlab turish uchun oynada tinglashingiz mumkin va tugmachani bosgan sichqoncha singari ularda sodir bo'layotgan voqealarni tekshirish uchun muayyan elementlarni tinglashingiz mumkin.

Shuning uchun addEventListener ba'zan oynada, ba'zida DOM elementida chaqiriladi.

Hodisa ob'ekti

Hodisani qayta ishlovchi birinchi parametr sifatida Voqea ob'ekti bo'ladi:

const link = document.getElementById ('mening havolam')
link.addEventListener ('cherting', voqea => {
  // havolasi bosildi
})

Ushbu ob'ekt juda ko'p foydali xususiyatlar va usullarga ega, masalan:

  • maqsad, voqeani boshlagan DOM elementi
  • turi, voqea turi
  • DOM-dagi voqeani targ'ib qilishni to'xtatishga chaqirgan stopPropagation ()

(to'liq ro'yxatga qarang).

Boshqa xususiyatlar ma'lum bir turdagi tadbirlar bilan ta'minlanadi, chunki Event turli xil hodisalar uchun interfeysdir:

  • MouseEvent
  • KlaviaturaEvent
  • DragEvent
  • FetchEvent
  • ... va boshqalar

Ularning har birida MDN sahifasi bog'langan, shuning uchun siz ularning barcha xususiyatlarini tekshirishingiz mumkin.

Masalan, KeyboardEvent sodir bo'lganda, tugmachaning xususiyatini tekshirish orqali qaysi tugmachani bosilganligini o'qish mumkin bo'lgan formatda (Escape, Enter va hokazo) tekshirishingiz mumkin:

windows.addEventListener ('keydown', voqea => {
  // tugmachasi bosildi
  konsol.log (event.key)
})

Sichqoncha hodisasida sichqonchaning qaysi tugmasi bosilganligini tekshirishimiz mumkin:

const link = document.getElementById ('mening havolam')
link.addEventListener ('mousedown', voqea => {
  sichqoncha tugmasi bosildi
  konsol.log (event.button) // 0 = chap, 2 = o'ng
})

Voqealar puflanishi va voqealarni yozib olish

Puflash va tortishish - bu voqealar ko'payish uchun foydalanadigan ikkita model.

Aytaylik, siz DOM tuzilishi

   Meni bosing

Foydalanuvchilar tugmachani bosganingizda kuzatishni xohlaysiz va sizda ikkita voqeani tinglovchilar bor, bittasini tugmachani va # birini kontaktni. Yodingizda bo'lsin, bola elementini bosish har doim ota-onasiga tarqaladi, agar siz targ'ibotni to'xtatmasangiz (buni keyinroq ko'rib chiqamiz).

Ushbu voqea tinglovchilarini tartibli ravishda chaqirishadi va ushbu tartib ishlatilgan hodisani puflash / yozib olish modeli bilan belgilanadi.

Puflash - bu voqea bosilgan narsadan (bola) eng yaqin daraxtdan boshlab uning barcha ota-bobalarigacha tarqalishini anglatadi.

Bizning misolimizda, tugmachani bosish vositasi #container ishlov beruvchisi oldida yonadi.

Rasmga tushirish aksincha: tashqi voqea ishlov beruvchisi aniqroq ishlov beruvchiga, ya'ni tugmachadan oldin ishdan chiqariladi.

Odatiy bo'lib, barcha hodisalar qabariq.

AddEventListener-ga uchinchi dalilni ishlatib, voqeani yozib olishni tanlab, uni rostlashingiz mumkin:

document.getElementById ('konteyner'). addEventListener (
  'cherting',
  () => {
    // oyna yuklandi
  },
  rost
)

E'tibor bering, birinchi navbatda hodisalarni yozib olish uchun ishlov beruvchilar ishlaydi.

Keyin barcha qabariq voqea ishlovchilari.

Buyurtma ushbu printsipga amal qiladi: DOM Window ob'ektidan boshlab barcha elementlardan o'tib, bosilgan elementni topish uchun ketadi. Buni amalga oshirayotganda, u voqea bilan bog'liq har qanday voqea ishlov beruvchisini chaqiradi (yozib olish fazasi).

Maqsadga erishgandan so'ng, u ota-onalar daraxti oldiga Window ob'ektiga qadar bo'lgan sayohatni takrorlaydi, yana tadbirni boshqaruvchilarni chaqiradi (puflash bosqichi).

Targ'ibotni to'xtatish

DOM elementidagi voqea, agar to'xtab qolmasa, uning barcha asosiy elementlari daraxtiga tarqatiladi.


  
    
      

Klikdagi voqea bo'limga va keyin tanaga tarqaladi.

Odatda voqealarni qayta ishlash dasturining oxirida StopPropagation () usulini chaqirib, tarqalishni to'xtatishingiz mumkin:

const link = document.getElementById ('mening havolam')
link.addEventListener ('mousedown', voqea => {
  // hodisani qayta ishlash
  // ...
  event.stopPropagation ()
})

Ommabop tadbirlar

Bu erda eng ko'p uchraydigan voqealar ro'yxati.

Yuklang

sahifa yuklangandan keyin yuk deraza va tananing elementiga tushiriladi.

Sichqoncha tadbirlari

sichqoncha tugmachasi bosilganda bosiladi. sichqoncha ikki marta bosilganda dblclick tugmasini bosing. Albatta, bu holda ushbu voqeadan oldin bosish bosiladi. mousedown, mousemove va sichqonchani harakatlantiruvchi va pastga tushirish hodisalarini kuzatishda ishlatilishi mumkin. Sichqoncha harakatida ko'p marta yonib ketishi sababli, mousovove-ga ehtiyot bo'ling

Klaviatura tadbirlari

klaviatura tugmachasi bosilganda tugmachani bosish tugmachasi yonadi (va tugma bosilgan holatda tugma har doim takrorlanadi). tugmachani bo'shatish paytida tugmacha yoqiladi

O'tkazish

Har safar sahifani aylantirishda aylantirish hodisasi derazada o'chiriladi. Hodisa ishlov beruvchisi ichida window.scrollY (Y Axis) tugmachasini tekshirish orqali joriy aylantirish holatini tekshirishingiz mumkin.

Shuni yodda tutingki, ushbu voqea bir martalik narsa emas. O'tkazish paytida u juda ko'p ishlaydi, shunchaki aylantirishning oxirida yoki boshida emas, shuning uchun ishlov beruvchida hech qanday og'ir hisoblash yoki manipulyatsiya qilmang - uning o'rniga gazakni ishlating.

Trotling

Yuqorida ta'kidlab o'tganimizdek, aylantirmoq va aylantirish - bu har bir voqea uchun bir martadan ishlamaydigan ikkita hodisa, aksincha ular butun vaqt davomida doimiy ravishda o'zlarining ishlov beruvchisi funktsiyasini chaqirishadi.

Buning sababi shundaki, ular nima sodir bo'layotganini kuzatishingiz uchun koordinatalar beradi.

Agar siz tadbirni boshqarish vositasida murakkab operatsiyani amalga oshirsangiz, siz uning ishiga ta'sir qilasiz va saytingiz foydalanuvchilariga shafqatsiz tajribani keltirib chiqarasiz.

Lodash kabi ovoz chiqarishni ta'minlaydigan kutubxonalar uni 100+ kod satrlarida, har qanday foydalanish holatlarini ko'rib chiqish uchun ishlatadi. Oddiy va tushunish oson amalga oshiriladigan narsa bu har 100msda aylantirish hodisasini keshlash uchun setTimeout-dan foydalanadi:

let caching = null
windows.addEventListener ('o'tish', voqea => {
  agar (! keshlangan) {
    setTimeout (() => {
      // asl hodisaga "keshlangan" da kirishingiz mumkin
      keshlangan = null
    }, 100)
  }
  keshlangan = voqea
})

Voqealar to'plami

Voqealar to'plami JavaScript haqida tushunishning eng muhim jihatlaridan biridir.

Men yillar davomida JavaScript-ni dasturlashtirib keldim, lekin kaput ostida qanday ishlashini hali to'liq tushuna olmadim. Ushbu kontseptsiyani batafsil bilmaslik mutlaqo yaxshi, lekin odatdagidek, u qanday ishlashini bilish foydalidir va siz hozir qiziquvchan bo'lishingiz mumkin.

Ushbu bo'lim JavaScript-ning bitta ip bilan qanday ishlashini va asenkron funktsiyalarni qanday bajarishini ichki tafsilotlarini tushuntirishga qaratilgan.

JavaScript kodingiz bitta oqimli ishlaydi. Bir vaqtning o'zida bitta narsa sodir bo'ladi.

Bu cheklov aslida juda foydali, chunki u mos keluvchi muammolar haqida qayg'urmasdan dasturingizni qanday ko'paytirishni osonlashtiradi.

Siz faqatgina kodingizni qanday yozayotganingizga e'tibor berishingiz kerak va sinxron tarmoq qo'ng'iroqlari yoki cheksiz pastadir kabi ipni to'sib qo'yadigan narsalardan qochishingiz kerak.

Umuman olganda, ko'pgina brauzerlarda har bir jarayonni alohida holga keltirish va cheksiz pastadirli veb-sahifani blokirovka qilish yoki og'ir ishlov berishdan saqlanish uchun har bir brauzer yorlig'ida voqealar qatori mavjud.

Atrof-muhit bir vaqtning o'zida bir nechta hodisalarni boshqaradi, masalan, API qo'ng'iroqlarini boshqarish uchun. Veb-ishchilar ham o'zlarining tadbirlarida ishlaydi.

Siz asosan kodingiz bitta voqea tsiklida ishlayotgani haqida tashvishlanishingiz kerak va uni blokirovka qilmaslik uchun kodni yozing.

Hodisa doirasini blokirovka qilish

Nazoratni voqea qatoriga qaytarish uchun juda ko'p vaqt talab etadigan har qanday JavaScript kodi sahifadagi har qanday JavaScript kodining bajarilishini bloklaydi, hattoki UI oqimini bloklaydi va foydalanuvchi atrofni bosa olmaydi, sahifani aylantirmaydi va hokazo.

JavaScript-dagi deyarli barcha kirish / kirish ibtidolari bloklanmagan. Tarmoq so'rovlari, Node.js fayl tizimining ishlashi va boshqalar. Blokirovka qilish istisno bo'lib, shuning uchun JavaScript juda ko'p narsaga tayanadi va yaqinda va'da va asinx / kutishga asoslangan.

Qo'ng'iroqlar to'plami

Qo'ng'iroqlar to'plami LIFO navbati (Last In, First Out).

Hodisalar to'plami ishga tushirish kerak bo'lgan biron bir funktsiyaning mavjudligini tekshirish uchun doimiy ravishda qo'ng'iroqlarni tekshiradi.

Buni amalga oshirayotganda, u o'zi topgan har qanday funktsiyani chaqiruv stackiga qo'shadi va ularning har birini tartibda bajaradi.

Siz tuzatuvchida yoki brauzer konsolida siz bilan tanish bo'lishi mumkin bo'lgan xato stack izini bilasizmi? Brauzer qo'ng'iroqlarni stekkasida mavjud qo'ng'iroq qaysi funktsiyadan kelib chiqqanligini sizga xabar qilish uchun funktsiya nomlarini qidiradi:

Hodisani takrorlash bo'yicha oddiy tushuntirish

Misol keltiraylik:

const bar = () => console.log ('bar')
const baz = () => console.log ('baz')
const foo = () => {
  konsol.log ('foo')
  bar ()
  baz ()
}
foo ()

Ushbu kod bosilgan

foo
bar
baz

kutilganidek.

Ushbu kod ishlayotganda birinchi foo () chaqiriladi. Fo () ichida biz avval satrni (), keyin baz () ni chaqiramiz.

Ushbu vaqtda qo'ng'iroq steki quyidagicha ko'rinadi:

Har bir iteratsiyadagi voqea silsilasi qo'ng'iroq stakasida biron bir narsa bor-yo'qligini ko'rib chiqadi va uni bajaradi:

qo'ng'iroq steki bo'sh bo'lmaguncha.

Navbatdagi funktsiya bajarilishi

Yuqoridagi misol normal ko'rinishga ega, bu erda hech qanday maxsus narsa yo'q: JavaScript bajaradigan narsalarni topadi va ularni tartibda ishlaydi.

Stek aniq bo'lmaguncha funktsiyani qanday kechiktirishni ko'rib chiqaylik.

SetTimeout (() => {}), 0) dan foydalanish funktsiyani chaqirish, lekin koddagi boshqa funktsiyalar bajarilgandan keyingina bajarilishi kerak.

Ushbu misolni oling:

const bar = () => console.log ('bar')
const baz = () => console.log ('baz')
const foo = () => {
  konsol.log ('foo')
  setTimeout (bar, 0)
  baz ()
}
foo ()

Ushbu kod juda ajablanarli tarzda chop etiladi:

foo
baz
bar

Ushbu kod ishlayotganda birinchi foo () chaqiriladi. Foo () ichida biz birinchi bo'lib setTimeout deb nomlaymiz va satrni argument sifatida o'tamiz va uni imkon qadar tezroq ishga tushirishni buyuramiz, taymer sifatida 0. Keyin biz baz () deb nomlaymiz.

Ushbu vaqtda qo'ng'iroq steki quyidagicha ko'rinadi:

Mana bizning dasturimizdagi barcha funktsiyalarning bajarilish tartibi:

Nega bunday bo'lmoqda?

Xabar navbat

SetTimeout () chaqirilganda, brauzer yoki Node.js taymerni ishga tushiradilar. Taymer tugashi bilanoq, bu holda kutish vaqti sifatida 0 qo'yganimizdan so'ng, qo'ng'iroqni qaytarish funktsiyasi xabar navbatiga qo'yiladi.

Xabar navbatida, shuningdek, foydalanuvchi tomonidan bosilgan klik yoki klaviatura hodisalari yoki javoblarni qabul qilish kodingiz ularga munosabat bildirishdan oldin navbatga qo'yiladi. Yoki onLoad kabi DOM tadbirlari.

Davr qo'ng'iroqlar to'plamiga ustuvor ahamiyat beradi va birinchi navbatda qo'ng'iroq stakkasida topilgan hamma narsaga ishlov beradi va u erda hech narsa yo'q bo'lgandan so'ng, voqealar navbatida narsalarni olish uchun ketadi.

SetTimeout, yuklash yoki boshqa narsalar singari funktsiyalarni o'z ishlarini bajarishlarini kutishimiz shart emas, chunki ular brauzer tomonidan ta'minlangan va ular o'zlarining mavzularida yashaydilar. Masalan, agar siz vaqtni o'chirish vaqtini 2 soniya qilib qo'ysangiz, 2 soniyani kutishingiz shart emas - kutish boshqa joyda bo'ladi.

ES6 ish navbat

ECMAScript 2015 va'dalar tomonidan ishlatiladigan (shuningdek, ES6 / ES2015-da taqdim etilgan) ish kuchi tushunchasini taqdim etdi. Bu chaqiriq stekining oxiriga qo'yilmasdan, asinf funktsiyasi natijasini imkon qadar tezroq bajarish usuli.

Joriy funktsiya tugashidan oldin hal qilinadigan va'dalar joriy funktsiyadan so'ng darhol bajariladi.

Men istirohat bog'ida rulda haydashning o'xshashligini juda yaxshi tushuntiraman: xabarlar navbatini sizni navbatda turgan barcha odamlar bilan navbatga qo'yadi, ish joyi - bu tez yurish chiptasi. avvalgisini tugatding.

Masalan:

const bar = () => console.log ('bar')
const baz = () => console.log ('baz')
const foo = () => {
  konsol.log ('foo')
  setTimeout (bar, 0)
  yangi va'da ((hal qilish, rad qilish) =>
    шешу ('bazadan keyin, bardan oldin bo'lishi kerak')
  ) .then (solution => console.log (solution))
  baz ()
}
foo ()

Bu bosma

foo
baz
bazadan keyin, bardan oldin bo'lishi kerak
bar

Bu va'dalar (va'da qilingan Async / kutish) va setTimeout () yoki boshqa platforma API orqali oddiy eski asinxron funktsiyalar o'rtasidagi katta farq.

Asenkron dasturlash va qo'ng'iroqlar

Sukut bo'yicha JavaScript sinxron va bitta tishli hisoblanadi. Bu shuni anglatadiki, kod yangi oqimlarni yarata olmaydi va parallel ravishda ishlaydi. Asinxron kod nimani anglatishini va uning ko'rinishini bilib olaylik.

Dasturlash tillarida asinxroniklik

Kompyuterlar dizayni bo'yicha asenkrondir.

Asenkron, narsalar asosiy dastur oqimidan mustaqil ravishda sodir bo'lishi mumkinligini anglatadi.

Hozirgi iste'molchi kompyuterlarda har bir dastur ma'lum bir vaqt oralig'ida ishlaydi va keyin boshqa dasturning ishlashini davom ettirishga imkon berish uchun u bajarilishini to'xtatadi. Bu narsa juda tez aylanadiki, buni sezish qiyin, va bizning kompyuterlarimiz bir vaqtning o'zida ko'plab dasturlarni ishlaydi, ammo bu xayoldir (ko'p protsessorli mashinalardan tashqari).

Dasturlar ichki e'tiborni tizimning e'tiborini qozonish uchun protsessorga uzatiladigan uzilishlardan foydalanadi.

Men uning ichki qismiga kirmayman, lekin shuni yodda tutingki, dasturlar asenkron bo'lishi odatiy holdir va diqqatni jalb qilish kerak bo'lguncha ularning bajarilishini to'xtatib turing va shu vaqtning o'zida kompyuter boshqa narsalarni ham bajarishi mumkin. Dastur tarmoqdan javob kutayotganida, u so'rov tugaguncha protsessorni to'xtata olmaydi.

Odatda, dasturlash tillari sinxron bo'lib, ba'zilari tilda yoki kutubxonalarda asinxronikni boshqarish usulini ta'minlaydi. C, Java, C #, PHP, Go, Ruby, Swift, Python, ularning barchasi sukut bo'yicha sinxrondir. Ularning ba'zilari yangi jarayonni yumshatish orqali iplar yordamida asinks bilan ishlov beradi.

JavaScript

Sukut bo'yicha JavaScript sinxron va bitta tishli hisoblanadi. Bu shuni anglatadiki, kod yangi oqimlarni yarata olmaydi va parallel ravishda ishlaydi.

Kod qatorlari ketma-ket ketma-ketlikda bajariladi, masalan:

const a = 1
const b = 2
const c = a * b
konsol.log (c)
nimadir qil()

Ammo JavaScript brauzerda paydo bo'lgan, uning asosiy vazifasi dastlab foydalanuvchilarning harakatlariga, masalan, onClick, onMouseOver, onChange, onSubmit va hokazolarga javob berish edi. Buni sinxron dasturlash modeli yordamida qanday amalga oshirish mumkin?

Javob uning muhitida edi. Brauzer ushbu turdagi funktsiyalarni bajaradigan API to'plamini taqdim etish orqali buni amalga oshirish usulini taqdim etadi.

Yaqinda Node.js ushbu kontseptsiyani faylga kirish, tarmoq qo'ng'iroqlari va hokazolarni kengaytirish uchun blokirovka qilinmaydigan I / O muhitini taqdim etdi.

Qo'ng'iroqlar

Foydalanuvchi qachon tugmani bosishni bilmaydi, shuning uchun nima qilish kerak, siz klik hodisasi uchun hodisalarni boshqaruvchisini belgilaysiz. Ushbu voqea ishlovchisi voqea tetiklanganda chaqiriladigan funktsiyani qabul qiladi:

document.getElementById ('tugmasi'). addEventListener ('chertish', () => {
  // element bosildi
})

Bu "qayta chaqirish" deb nomlangan.

Qayta qo'ng'iroq qilish - bu boshqa funktsiyaga qiymat sifatida berilgan oddiy funktsiya va faqat voqea sodir bo'lganda bajariladi. Biz buni qila olamiz, chunki JavaScript-da birinchi darajali funktsiyalar mavjud bo'lib, ular o'zgaruvchiga tayinlanishi va boshqa funktsiyalarga o'tishi mumkin (yuqori tartibli funktsiyalar deb ataladi).

Barcha mijoz kodingizni sahifa tayyor bo'lganda qo'ng'iroqni qaytarish funktsiyasini bajaradigan oyna ob'ekti yuklovchi voqea tinglovchilariga o'rash odatiy holdir:

windows.addEventListener ('yuklash', () => {
  // oyna yuklandi
  // xohlaganingizni qiling
})

Callback-lar nafaqat DOM tadbirlarida, balki hamma joyda qo'llaniladi.

Bitta oddiy misol, taymerlardan foydalanish:

setTimeout (() => {
  // 2 soniyadan keyin ishlaydi
}, 2000)

XHR so'rovlari ham qayta qo'ng'iroqni qabul qiladi. Ushbu misolda, biron bir hodisa yuz berganda chaqiriladigan xususiyatga funktsiyani tayinlash orqali (bu holda so'rov holati o'zgaradi):

const xhr = yangi XMLHttpRequest ()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200? console.log (xhr.responseText): konsol.error ('xato')
  }
}
xhr.open ('olish', 'https://yoursite.com')
xhr.send ()

Qo'ng'iroqlarni qabul qilishda xatolar

Qo'ng'iroqlar bilan bog'liq xatolarni qanday hal qilasiz? Juda keng tarqalgan strategiyalardan biri bu Node.js qabul qilgan narsadan foydalanish: har qanday teskari chaqirish funktsiyasidagi birinchi parametr xato ob'ekti: birinchi xato

Agar xato bo'lmasa, ob'ekt nolga teng. Agar xato bo'lsa, unda xatoning ba'zi tavsifi va boshqa ma'lumotlar mavjud.

fs.readFile ('/ file.json', (xato, ma'lumotlar) => {
  if (err! == null) {
    // ishlov berish xatosi
    konsol.log (xato)
    qaytish
  }
  // xatolar yo'q, ma'lumotlarni qayta ishlash
  konsol.log (ma'lumotlar)
})

Qo'ng'iroqlar bilan bog'liq muammo

Qo'ng'iroqlar oddiy holatlar uchun juda yaxshi!

Biroq, har bir qo'ng'iroqni qaytarib yuborish orqaga qaytish darajasini qo'shadi va sizda ko'plab qayta qo'ng'iroqlar bo'lsa, kod juda tez murakkablashadi:

windows.addEventListener ('yuklash', () => {
  document.getElementById ('tugmasi'). addEventListener ('chertish', () => {
    setTimeout (() => {
      items.forEach (element => {
        // sizning kodingiz bu erda
      })
    }, 2000)
  })
})

Bu shunchaki 4 darajali oddiy kod, lekin men juda ko'p joylashishni ko'rdim va bu juda ham qiziqarli emas.

Buni qanday hal qilamiz?

Qo'ng'iroqlarni amalga oshirish uchun alternativalar

ES6-dan boshlab, JavaScript-ga qo'ng'iroqlarni amalga oshirishni o'z ichiga olmaydigan asinxron kodni yaratishda yordam beradigan bir nechta xususiyatlar kiritildi:

  • Va'dalar (ES6)
  • Asinx / Kutish (ES8)

Va'dalar

Va'dalar - bu sizning kodingizda juda ko'p qo'ng'iroqlarni yozmasdan JavaScript-dagi asinxron kod bilan shug'ullanishning bir usuli.

Va'da odatda oxir-oqibat mavjud bo'ladigan qiymat uchun proksi sifatida belgilanadi.

Va'dalar - bu sizning kodingizda juda ko'p qo'ng'iroqlarni yozmasdan, asinxron kod bilan kurashishning bir usuli.

Bir necha yildan beri bo'lishiga qaramay, ular ES2015-da standartlashtirildi va joriy etildi va endi ular ES2017-da async funktsiyalari bilan almashtirildi.

Async funktsiyalari va'da qilingan API-ni qurilish bloki sifatida ishlatadilar, shuning uchun ularni tushunish juda muhimdir, hatto yangi kodda siz va'dalar o'rniga async funktsiyalaridan foydalanishingiz mumkin.

Va'dalar qanday ishlaydi, qisqasi

Va'da qilinganidan so'ng, u kutilayotgan holatda boshlanadi. Bu shuni anglatadiki, qo'ng'iroq qiluvchining funktsiyasi bajarilishini davom ettiradi, va u o'z-o'zidan ishlashni amalga oshirishni kutadi va qo'ng'iroq qiluvchiga ba'zi bir fikrlarni beradi.

Ushbu vaqtda, chaqiruvchi funktsiyasi, u yoki'da qilingan holatda yoki rad etilgan holatda qaytarilishini kutadi, lekin funktsiya o'z vazifasini bajarayotganda bajarilishini davom ettiradi.

Qaysi JS API va'dalaridan foydalanadi?

O'zingizning shaxsiy kodingiz va kutubxonalar kodidan tashqari, va'dalar standart zamonaviy Internet API-lar tomonidan ishlatiladi, masalan:

  • batareya API
  • Fetch API
  • Xizmat ishchilari

Zamonaviy JavaScript-da va'dalardan foydalanmayotganligingiz ehtimoldan yiroq, shuning uchun ularga sho'ng'ishni boshlaylik.

Va'da yaratish

Promise API yangi Promise () yordamida boshlagan Promise konstruktorini ochib beradi:

qilaylik = true
const isItDoneYet = yangi va'da (
  (hal qilish, rad qilish) => {
    agar (bajarilgan bo'lsa) {
      const workDone = 'Mana men qurgan narsa'
      hal qilish (workDone)
    } else {
      const why = 'Hali ham boshqa narsa ustida ishlayapman'
      rad qilish (nega)
    }
  }
)

Ko'rinib turibdiki, va'da bajarilgan global doimiylikni tekshiradi va agar bu to'g'ri bo'lsa, biz qat'iy qarorni qaytaramiz, aks holda rad etilgan va'da.

Qat'iylik va rad etishdan foydalanib, biz qiymatni qaytarishimiz mumkin va yuqorida biz shunchaki satrni qaytaramiz, ammo bu ham ob'ekt bo'lishi mumkin.

Va'da berish

So'nggi bo'limda biz qanday qilib va'da qanday yaratilishini tanishtirdik.

Endi va'da qanday bajarilishi yoki ishlatilishi mumkinligini ko'rib chiqaylik.

const isItDoneYet = yangi va'da (
  // ...
)
const checkIfItsDone = () => {
  isItDoneYet
    .then ((ok) => {
      konsol.log (ok)
    })
    .catch ((err) => {
      konsol.error (xato)
    })
}

CheckIfItsDone () -ni ishga tushirish isItDoneYet () va'dasini bajaradi va uning orqaga qaytarib yuborilgan qo'ng'irog'idan foydalanib, hal qilinishini kutadi, agar xato bo'lsa, uni qayta qo'ng'iroq qilish paytida ishlatadi.

Zanjirli va'dalar

Va'dalar zanjirini yaratib, boshqa va'daga qaytarilishi mumkin.

Zanjirli va'dalarga zo'r misol Fetch API bo'lib, XMLHttpRequest API ustki qatlami bo'lib, biz manbani olish va manbani olishda bajariladigan va'dalar zanjirini navbatga qo'yish uchun foydalanishimiz mumkin.

Fetch API - bu va'daga asoslangan mexanizm va fetch () ni chaqirish yangi Promise () yordamida o'z va'damizni aniqlashga tengdir.

Zanjirli va'dalarga misol

const holati = (javob) => {
  if (answer.status> = 200 && javob.status <300) {
    return Promise.resolve (javob)
  }
  return Promise.reject (yangi xato (javob.statusText))
}
const json = (javob) => javob.json ()
olish ('/ todos.json')
  .then (status)
  .then (json)
  .then ((data) => {console.log ('Talab JSON javobi bilan muvaffaqiyatli chiqdi', ma'lumotlar)})
  .catch ((xato) => {console.log ('Talab bo'lmadi', xato)})

Ushbu misolda biz domen ildizida joylashgan todos.json faylidan TODO elementlari ro'yxatini olish uchun fetch () deb nomlaymiz va va'dalar zanjirini yaratamiz.

Runch fetch () juda ko'p xususiyatlarga ega bo'lgan javobni qaytaradi va biz murojaat qilganlar ichida:

  • status, HTTP holat kodini ko'rsatadigan raqamli qiymat
  • statusText, so'rov muvaffaqiyatli amalga oshirilgan bo'lsa, maqbul bo'lgan xabar

javob shuningdek, json () usuliga ega, u qayta ishlangan va JSON-ga aylantirilgan tanadagi tarkib bilan bog'liq bo'lgan va'da beradi.

Shunday qilib, ushbu binolarni hisobga olgan holda, bu shunday bo'ladi: zanjirda birinchi va'da - bu biz belgilagan funktsiya, status () deb nomlangan bo'lib, u javob holatini tekshiradi va agar u (200 dan 299 gacha) javob bo'lmasa, u rad etadi. va'da.

Ushbu operatsiya va'da zanjirida ko'rsatilgan barcha zanjirli va'dalarni o'tkazib yuborishga olib keladi va to'g'ridan-to'g'ri pastki qismida joylashgan () so'roviga xato xabari bilan birga so'rov bajarilmagan matni yozib oladi.

Buning o'rniga u biz belgilagan json () funktsiyasini chaqiradi. Oldingi va'da muvaffaqiyatli bo'lib, javob ob'ektini qaytarganligi sababli, biz uni ikkinchi va'daga kirish sifatida olamiz.

Bunday holda, biz JSON tomonidan qayta ishlangan ma'lumotlarni qaytaramiz, shuning uchun uchinchi va'da JSON-ni to'g'ridan-to'g'ri oladi:

.then ((ma'lumotlar) => {
  console.log ('So'rov JSON javobi bilan muvaffaqiyatli bajarildi', ma'lumotlar)
})

va biz uni faqat konsolga kiritamiz.

Xatolarni qayta ishlash

Misolda, oldingi bo'limda, biz va'dalar zanjiriga qo'shilgan ushlangan edik.

Va'dalar zanjirida biron bir narsa bajarilmasa va xato yuzaga kelsa yoki va'dani rad etsa, nazorat zanjirni eng yaqin tutish () buyrug'iga o'tadi.

yangi va'da ((hal qilish, rad qilish) => {
  yangi xatoni tashlash ('Xato')
})
  .catch ((err) => {console.error (err)})
// yoki
yangi va'da ((hal qilish, rad qilish) => {
  rad qilish ('Xato')
})
  .catch ((err) => {console.error (err)})

Kaskad xatolar

Agar catch () ichida siz xato qilsangiz, uni boshqarish uchun ikkinchi tutqichni () qo'shishingiz mumkin va hokazo.

yangi va'da ((hal qilish, rad qilish) => {
  yangi xatoni tashlash ('Xato')
})
  .catch ((err) => {yangi xato tashlash ('Xato')})
  .catch ((err) => {console.error (err)})

Orkestrlashtirish va'dalari

Promise.all ()

Agar siz turli xil va'dalarni sinxronlashtirishingiz kerak bo'lsa, Promise.all () sizga va'dalar ro'yxatini aniqlashga va ular barchasi hal bo'lgandan keyin bajarishga yordam beradi.

Masalan:

const f1 = olish ('/ narsa.json')
const f2 = olish ('/ narsa2.json')
Promise.all ([f1, f2]) va keyin ((res) => {
    console.log ('Natijalar qatori', res)
})
.catch ((err) => {
  konsol.error (xato)
})

ES2015 buzuvchi tayinlash sintaksisi sizga ham imkon beradi

Promise.all ([f1, f2]) va keyin (([res1, res2]) => {
    console.log ('Natijalar', res1, res2)
})

Albatta, siz zinapoyadan foydalanish bilan cheklanmaysiz, har qanday va'dalarni bajarish yaxshi.

Promise.race ()

Promise.race () siz bergan va'dalarning birinchisi hal bo'lganda ishlaydi va birinchi va'da natijasi bajarilgan holda bir marta takrorlangan chaqiruvni amalga oshiradi.

Masalan:

const birinchi = yangi va'da ((hal qilish, rad qilish) => {
    setTimeout (hal qilish, 500, "birinchi")
})
const Second = yangi va'da ((hal qilish, rad qilish) => {
    setTimeout (hal qilish, 100, "ikkinchi")
})
Promise.race ([birinchi, ikkinchi]) va keyin ((natija) => {
  console.log (natija) // ikkinchi
})

Async va kuting

Endi biz JavaScript-da asenkron funktsiyalarga zamonaviy yondashuvni bilib olamiz. Javob qisqa vaqt ichida va'da qilingan narsalarga qadar JavaScript paydo bo'ldi va ES2017 yildan beri asinxron JavaScript async / kutish sintaksisi bilan yanada sodda.

Async funktsiyalari va'dalar va generatorlar kombinatsiyasidir va asosan ular va'dalarga nisbatan yuqori darajadagi mavhumlikdir. Takror aytayin: async / kutish va'dalarga asoslanadi.

Nega async / kutish joriy etildi?

Ular qozon plitalarini va'dalar atrofida kamaytiradi va "zanjirni buzmang" cheklovlar va'dalarini cheklaydi.

ES2015-da va'da berilganda, ular asinxron kod bilan bog'liq muammoni hal qilish uchun mo'ljallangan edi va ular shunday qilishdi, lekin ES2015 va ES2017-ni ajratib turadigan 2 yil ichida va'dalar yakuniy echim bo'lolmasligi aniq edi.

Qayta qo'ng'iroq qilish do'zaxining mashhur muammosini hal qilish uchun va'da berildi, ammo ular o'zlari va sintaksis murakkabligi bilan tanishdilar.

Ular ishlab chiqaruvchilarga yaxshiroq sintaksis ochilishi mumkin bo'lgan yaxshi ibtidoiy narsalar edi, shuning uchun vaqt to'g'ri kelganida biz async funktsiyalariga ega bo'ldik.

Ular kodni sinxron ko'rinishga o'xshaydi, ammo u parda orqasida asenkron emas va bloklanmagan.

U qanday ishlaydi

Async funktsiyasi, ushbu misolda berilganidek, so'zni qaytaradi:

const doSomethingAsync = () => {
    yangi va'da berish ((qaror) => {
        setTimeout (() => шешу ('Men biror narsa qildim'), 3000)
    })
}

Agar siz ushbu funktsiyani chaqirishni xohlasangiz, kutasiz, va qo'ng'iroq kodi va'da bekor qilinmaguncha yoki rad etilmaguncha to'xtaydi. Bitta ogohlantirish: mijoz funktsiyasi asinx sifatida aniqlanishi kerak. Mana bir misol:

const doSomething = async () => {
    console.log (doSomethingAsync () ni kuting)
}

Qisqa misol

Bu asinxron funktsiyani ishlatish uchun ishlatiladigan async /aitning oddiy namunasidir:

const doSomethingAsync = () => {
    yangi va'da berish ((qaror) => {
        setTimeout (() => шешу ('Men biror narsa qildim'), 3000)
    })
}
const doSomething = async () => {
    console.log (doSomethingAsync () ni kuting)
}
console.log ('oldin')
nimadir qil()
console.log ('Keyin')

Yuqoridagi kod brauzer konsoliga quyidagilarni bosib chiqaradi:

Oldin
Keyin
Men nimadir qildim // 3-dan keyin

Hamma narsaga va'da bering

Async kalit so'zini istalgan funktsiyaga kiritish, funktsiya va'da berishini anglatadi.

Agar bu aniq amalga oshirilmasa ham, u ichkariga qaytarib berishni va'da qiladi.

Shuning uchun ushbu kod amal qiladi:

const aFunction = async () => {
  qaytish 'sinov'
}
aFunction (). keyin (ogohlantirish) // Bu "sinov" haqida ogohlantiradi

va bir xil:

const aFunction = async () => {
  return Promise.resolve ('sinov')
}
aFunction (). keyin (ogohlantirish) // Bu "sinov" haqida ogohlantiradi

Kodni o'qish juda sodda

Yuqoridagi misolda ko'rib turganingizdek, bizning kodimiz juda sodda ko'rinadi. Uni zanjirlash va qo'ng'iroqni qaytarish funktsiyalari yordamida aniq va'dalar yordamida kod bilan taqqoslang.

Va bu juda oddiy misol, kod ancha murakkabroq bo'lganda katta foyda olinadi.

Masalan, JSON manbasini qanday olish va va'dalar yordamida tahlil qilish:

const getFirstUserData = () => {
  return fetch ('/ users.json') // foydalanuvchilar ro'yxatini olish
    .then (javob => javob.json ()) // JSON tahlili
    .then (users => users [0]) // birinchi foydalanuvchini tanlang
    .then (user => olish (`/ users / $ {user.name}`)) // foydalanuvchi ma'lumotlarini olish
    .then (userResponse => response.json ()) // JSON tahlili
}
getFirstUserData ()

Va bu erda wait / async-dan foydalanilgan bir xil funktsiyalar mavjud:

const getFirstUserData = async () => {
  const javobi = kuting ('/ users.json') // foydalanuvchilar ro'yxatini oling
  const users = Javobni kuting.json () // JSON tahlili
  const user = users [0] // birinchi foydalanuvchini tanlang
  const userResponse = kutish (`/ users / $ {user.name}`) // foydalanuvchi ma'lumotlarini olish
  const userData = user.json () kuting JSON tahlil qiling
  userData-ni qaytaring
}
getFirstUserData ()

Seriyadagi bir nechta asinx funktsiyalari

Async funktsiyalarini osonlikcha zanjirlash mumkin, va sintaksis oddiy so'zlarga qaraganda ancha oson o'qiladi:

const wordToDoSomething = () => {
    yangi va'da bering (qaror => {
        setTimeout (() => шешу ('Men biror narsa qildim'), 10000)
    })
}
const watchOverSomeoneDoingSomething = async () => {
    const narsa = va'dani kutingDoSomething ()
    biror narsani qaytaring + 'va men tomosha qildim'
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
    const narsa = kuzatishni kutingOverSomeoneDoingSomething ()
    bir narsani qaytaring + 'va men ham tomosha qildim'
}
watchOverSomeoneWatchingSomeoneDoingSomething (). keyin ((res) => {
    konsol.log (res)
})

Chop etadi:

Men nimadir qildim, men ham tomosha qildim va men ham tomosha qildim

Nosozliklarni tuzatish osonroq

Nosozliklarni tuzatish va'dalari qiyin, chunki tuzatuvchi asinxron kodni o'zgartirmaydi.

Async /ait kutish buni juda osonlashtiradi, chunki kompilyator uchun xuddi sinxron kod kabi.

Ko'chadan va ko'lami

JavaScript-ning bitta xususiyati bor, bu ishlab chiqaruvchilarning bir nechta bosh og'rig'iga sabab bo'lishi mumkin, bu halqa va kengayish bilan bog'liq. Biz ko'chirish va var va ruxsat berish bilan bog'liq ba'zi fokuslarni bilib olamiz.

Ushbu misolni oling:

const operatsiyalari = []
for (var i = 0; i <5; i ++) {
  Operatsiyalar.push (() => {
    konsol.log (i)
  })
}
uchun (operatsiyalarni tezkor bajarish) {
  operatsiya ()
}

Asosan u takrorlanadi va 5 marta operatsiyalar deb nomlangan qatorga funktsiyani qo'shadi. Ushbu funktsiya shunchaki pastadir indeks o'zgaruvchisini qayd etadi i.

Keyinchalik u ushbu funktsiyalarni bajaradi.

Bu erda kutilgan natija quyidagicha bo'lishi kerak:

0
1
2
3
4

lekin aslida bu nima bo'ladi:

5
5
5
5
5

Nega bunday bo'ldi? Var foydalanish tufayli.

Var deklaratsiyalari ko'tarilganligi sababli, yuqoridagi kod tengdir

var i;
const operatsiyalari = []
uchun (i = 0; i <5; i ++) {
  Operatsiyalar.push (() => {
    konsol.log (i)
  })
}
uchun (operatsiyalarni tezkor bajarish) {
  operatsiya ()
}

Shunday qilib, for-of loopda, i hali ham ko'rinib turibdi, u 5 ga teng va funktsiya ichidagi har bir havola ushbu qiymatdan foydalanadi.

Xo'sh, qanday qilib narsalarni xohlaganimizcha qilishimiz kerak?

Eng oddiy echim - deklaratsiyadan foydalanish. ES2015-da taqdim etilgan, ular var deklaratsiyalari bilan bog'liq ba'zi g'alati narsalardan qochishda katta yordam beradi.

Loop o'zgaruvchisiga ruxsat berish uchun shunchaki varni o'zgartirish yaxshi ishlaydi.

const operatsiyalari = []
uchun (bo'lsin i = 0; i <5; i ++) {
  Operatsiyalar.push (() => {
    konsol.log (i)
  })
}
uchun (operatsiyalarni tezkor bajarish) {
  operatsiya ()
}

Mana natija:

0
1
2
3
4

Qanday qilib bu mumkin? Bu ishlaydi, chunki har bir pastadir iteratsiyasida i har safar yangi o'zgaruvchi sifatida yaratiladi va operatsiyalar qatoriga qo'shilgan har bir funktsiya i ning o'z nusxasini oladi.

Shuni yodda tutingki, bu holda const-ni ishlata olmaysiz, chunki ikkinchi iteratsiyada yangi qiymatni belgilashda xatolik yuz beradi.

Ushbu muammoni hal qilishning yana bir usuli oldindan ES6 kodida juda keng tarqalgan edi va u darhol taklif qilinadigan Funktsiya ifodasi (IIFE) deb nomlangan.

Bunday holda siz butun funktsiyani o'rashingiz va unga bog'lashingiz mumkin. Shu tarzda siz darhol bajaradigan funktsiyani yaratganingiz sababli, siz undan yangi funktsiyani qaytarasiz, shuning uchun uni keyinroq bajaramiz:

const operatsiyalari = []
for (var i = 0; i <5; i ++) {
  operatsiyalar.push (((j) => {
    return () => console.log (j)
  }) (i))
}
uchun (operatsiyalarni tezkor bajarish) {
  operatsiya ()
}

Taymerlar

JavaScript kodini yozayotganda biron bir funktsiyaning bajarilishini kechiktirishni xohlashingiz mumkin. Kelgusida funktsiyalarni rejalashtirish uchun setTimeout va setInterval-dan qanday foydalanishni muhokama qilamiz.

setTimeout ()

JavaScript kodini yozayotganda biron bir funktsiyaning bajarilishini kechiktirishni xohlashingiz mumkin.

Bu setTimeoutning ishi. Siz keyinroq amalga oshiriladigan teskari qo'ng'iroq funktsiyasini va uni keyinchalik qanday ishlashini bildiradigan qiymatni millisekundlarda belgilaysiz:

setTimeout (() => {
  // 2 soniyadan keyin ishlaydi
}, 2000)
setTimeout (() => {
  // 50 millisekunddan keyin ishlaydi
}, 50)

Ushbu sintaksis yangi funktsiyani belgilaydi. U erda siz istagan boshqa funktsiyalarga qo'ng'iroq qilishingiz yoki mavjud funktsiya nomi va parametrlar to'plamini o'tkazishingiz mumkin:

const myFunction = (firstParam, SecondParam) => {
  // nimadir qil
}
// 2 soniyadan keyin ishlaydi
setTimeout (myFunction, 2000, birinchiParam, ikkinchiParam)

setTimeout taymer identifikatorini qaytaradi. Bu odatda ishlatilmaydi, lekin siz ushbu idni saqlashingiz va rejalashtirilgan funktsiyani bajarilishini o'chirishni xohlasangiz, uni o'chirib tashlashingiz mumkin:

const id = setTimeout (() => {
  // 2 soniyadan keyin ishlash kerak
}, 2000)
// fikrimni o'zgartirdim
clearTimeout (id)

Nolinchi kechikish

Agar siz kutish vaqtining kechikishini 0 ga belgilasangiz, qo'ng'iroqni qaytarish funktsiyasi iloji boricha tezroq bajariladi, ammo joriy funktsiya bajarilgandan so'ng:

setTimeout (() => {
  konsol.log ("keyin")
}, 0)
console.log ('oldin')

keyin chop etadi.

Bu ayniqsa protsessorni intensiv topshiriqlarga to'sqinlik qilmaslik va og'ir hisoblarni bajarishda boshqa funktsiyalarni bajarishni rejalashtirish funktsiyasida navbatga qo'yish orqali amalga oshirish uchun foydalidir.

Ba'zi brauzerlar (IE va Edge) aynan shu funktsiyani bajaradigan setImmediate () usulini qo'llaydilar, ammo bu standart emas va boshqa brauzerlarda mavjud emas. Ammo bu Node.js-da standart vazifadir.

setInterval

setInterval - bu setTimeout-ga o'xshash funktsiya, farqi bor: qo'ng'iroqni qaytarish funktsiyasini bir marta ishga tushirish o'rniga, u siz belgilagan vaqt oralig'ida (millisekundlarda) abadiy ishlaydi:

setInterval (() => {
  // har 2 soniyada ishlaydi
}, 2000)

Yuqoridagi funktsiya har 2 sekundda ishlaydi, agar to'xtatish kerakligini aytmasangiz, clearInterval-dan foydalanib, uni setInterval qaytargan oraliq idishini topshirishingiz kerak:

const id = setInterval (() => {
  // har 2 soniyada ishlaydi
}, 2000)
clearInterval (id)

Qaytadan teskari qo'ng'iroq qilish funktsiyasi ichida clearInterval-ga qo'ng'iroq qilish odatiy hol bo'lib, uni qayta ishga tushirish yoki to'xtash kerakligini avtomatik aniqlashga imkon beradi. Masalan, agar ushbu App.somethingIWait qiymati kelmasa, ushbu kod ishlaydi.

const interval = setInterval (() => {
  if (App.somethingIWait === 'kelgan') {
    clearInterval (oraliq)
    qaytish
  }
  // aks holda narsalar qilish
}, 100)

Rekursiv setTimeout

setInterval har n millisekundlarda funktsiyani ishga tushiradi, funktsiya qachon bajarilishi haqida o'ylamasdan.

Agar funktsiya har doim bir xil vaqtni talab qilsa, barchasi yaxshi:

Balki funktsiya turli xil bajarish vaqtlarini olishi mumkin, masalan tarmoq shartlariga qarab:

Ehtimol, bitta uzoq ijro etilishi ikkinchisiga to'g'ri keladi:

Bunga yo'l qo'ymaslik uchun, teskari qo'ng'iroq qilish funktsiyasi tugashi bilan siz chaqiriladigan rekursiv setTimeout-ni rejalashtirishingiz mumkin:

const myFunction = () => {
  // nimadir qil
  setTimeout (myFunction, 1000)
}
setTimeout (
  myFunction ()
}, 1000)

ushbu stsenariyga erishish uchun:

setTimeout va setInterval Node.js-da, taymerlar moduli orqali mavjud.

Node.js shuningdek, asosan Node.js Event Loop bilan ishlashda ishlatiladigan setTimeout (() => {}, 0) dan foydalanishga teng bo'lgan setImmediate () ni taqdim etadi.

Bu

bu ishlatiladigan joyiga qarab turli xil qiymatlarga ega bo'lgan qiymat. JavaScript-ning ushbu mayda-chuyda tafsilotlarini bilmaslik juda ko'p bosh og'rig'iga sabab bo'lishi mumkin, shuning uchun barcha hiyla-nayranglarni o'rganishga 5 daqiqa vaqt kerak bo'ladi

JavaScript-ning ushbu mayda-chuyda tafsilotlarini bilmaslik juda ko'p bosh og'rig'iga sabab bo'lishi mumkin, shuning uchun barcha hiyla-nayranglarni o'rganishga 5 daqiqa vaqt kerak bo'ladi.

bu qat'iy rejimda

Har qanday ob'ektdan tashqarida, bu qat'iy rejimda har doim aniqlanmaydi.

E'tibor bering, men qattiq rejim haqida gapirdim. Agar qattiq rejim o'chirilgan bo'lsa (standart holati, agar siz faylning ustki qismiga "qat'iy foydalanish" ni qo'shmasangiz), siz "sloppy" deb ataladigan rejimdasiz va bu - quyida aytib o'tilgan ba'zi alohida holatlar bundan mustasno. global ob'ektning qiymati.

Bu brauzer kontekstida oynani anglatadi.

bu usullarda

Usul - bu ob'ektga biriktirilgan funktsiya.

Siz uni turli shakllarda ko'rishingiz mumkin.

Mana bittasi:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: "Fiesta",
  haydovchi () {
    console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
  }
}
car.drive ()
// Ford Fiesta avtomashinasini haydash!

Bunday holda, oddiy funktsiyadan foydalanib, bu avtomatik ravishda ob'ektga bog'lanadi.

Eslatma: yuqoridagi usul deklaratsiyasi haydovchi bilan bir xil: funktsiya () {..., ammo qisqaroq:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: "Fiesta",
  disk: funktsiya () {
    console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
  }
}

Xuddi shu misolda ishlaydi:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: 'Fiesta'
}
car.drive = funktsiya () {
  console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
}
car.drive ()
// Ford Fiesta avtomashinasini haydash!

O'q funktsiyasi bir xil tarzda ishlamaydi, chunki u leksik jihatdan bog'langan:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: "Fiesta",
  haydovchi: () => {
    console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
  }
}
car.drive ()
// Aniqlanmagan mashinani haydash!

Bog'lovchi o'q vazifalari

Oddiy funktsiyalar kabi, siz o'qning vazifasini bog'lay olmaysiz.

Ularning ishlash usullari tufayli bu shunchaki mumkin emas. bu leksik jihatdan bog'langan, ya'ni uning qiymati ular aniqlangan kontekstdan olingan degan ma'noni anglatadi.

Bu sifatida ishlatilishi kerak bo'lgan ob'ektni aniq o'tkazing

JavaScript sizga xar qanday ob'ektni xaritada ko'rsatishning bir necha usullarini taklif etadi.

Bind () dan foydalanib, funktsiya deklaratsiyasi bosqichida:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: 'Fiesta'
}
const drive = funktsiya () {
  console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
} .bind (mashina)
haydovchi ()
// Ford Fiesta avtomashinasini haydash!

Ushbu qiymatni qaytarish uchun mavjud ob'ekt usulini bog'lashingiz mumkin:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: "Fiesta",
  haydovchi () {
    console.log (`$ {this.maker} $ {this.model} mashinasini haydash! ')
  }
}
const anotherCar = {
  ishlab chiqaruvchi: 'Audi',
  model: 'A4'
}
car.drive.bind (anotherCar) ()
// Audi A4 avtomashinasini haydash!

Funktsiyani chaqirish bosqichida qo'ng'iroq () yoki apply () yordamida:

const car = {
  ishlab chiqaruvchi: 'Ford',
  model: 'Fiesta'
}
const drive = funktsiya (km / soat) {
  console.log (`$ {this.maker} $ {this.model} mashinasini $ {kmh} km / soat tezlikda haydash! ')
}
avtoulov (avtomobil, 100)
// Ford Fiesta rusumli avtomashinani soatiga 100 km tezlikda haydash!
haydovchi.apply (mashina, [100])
// Ford Fiesta rusumli avtomashinani soatiga 100 km tezlikda haydash!

Qo'ng'iroq qilish () yoki qo'llash () ga o'tadigan birinchi parametr har doim bunga bog'liq. Qo'ng'iroqlar () va apply () o'rtasidagi farq shundan iboratki, ikkinchisi argumentlar ro'yxati sifatida qator talab qiladi, birinchisi funktsiya argumentlari sifatida uzatiladigan o'zgaruvchan sonli parametrlarni qabul qiladi.

Brauzer hodisalarini qayta ishlashning maxsus holati

Hodisalarni qayta ishlaganda, bu voqeani qabul qilgan HTML elementiga tegishli.

document.querySelector ('# tugma'). addEventListener ('chertish', funktsiya (e) {
  console.log (bu) // HTMLElement
}

Siz uni bog'lab qo'yishingiz mumkin

document.querySelector ('# tugmasi'). addEventListener (
  'cherting',
  funktsiya (e) {
    console.log (this) // Global bo'lsa yoki sizning kontekstingizda oynalar
  } .bind (bu)
)

Qattiq rejim

Strict Mode bu ES5 xususiyatidir va bu JavaScript-ni yanada yaxshi qilish usulidir - va boshqa usulda, Strict Mode-ni yoqish JavaScript tilining semantikasini o'zgartiradi.

Qattiq rejimda JavaScript kodi bilan odatdagi JavaScript o'rtasidagi asosiy farqlarni bilish haqiqatan ham juda muhimdir, bu ko'pincha sloppy rejim deb ataladi

Va boshqa yo'l bilan, Strict Mode yoqilganda JavaScript tilining semantikasini o'zgartiriladi.

Qattiq rejimda JavaScript kodi va "oddiy" JavaScript o'rtasidagi asosiy farqlarni bilish haqiqatan ham juda muhimdir, bu ko'pincha sloppy rejim deb ataladi.

Qat'iy rejim asosan ES3-da mumkin bo'lgan funktsiyalarni olib tashlaydi va ES5-dan beri eskirgan (lekin oldinga moslik talablari tufayli o'chirilmaydi).

Qattiq rejimni qanday yoqish mumkin

Qattiq rejim ixtiyoriy. JavaScript-dagi har bir o'zgarishda bo'lgani kabi, biz tilning odatiy holatini o'zgartira olmaymiz, chunki bu JavaScript atrofida JavaScript-ni buzishi mumkin va JavaScript 1996 yildagi JavaScript kodi bugungi kunda ham ishlayotganiga ishonch hosil qilish uchun ko'p kuch sarflaydi. Bu uning muvaffaqiyatining kalitidir.

Shunday qilib, biz qat'iy rejimni yoqish uchun foydalanishimiz kerak bo'lgan "qat'iy foydalanish" ko'rsatmalariga egamiz.

Siz uni faylning barcha kodlariga qo'llash uchun uni faylning boshiga qo'yishingiz mumkin:

"qat'iy foydalanish"
const name = 'Flavio'
salom salom = () => 'hey'
// ...

Shuningdek, siz funktsiyalar tanasining boshiga "foydalanish" ni qo'yib, alohida funktsiyalar uchun Strict Mode ni yoqishingiz mumkin:

funktsiya salom () {
  "qat'iy foydalanish"
  qaytish
}

Bu eski kod bilan ishlaganda foydalidir, bu erda siz sinash uchun vaqtingiz yo'q yoki butun faylda qat'iy rejimni yoqishga ishonchingiz yo'q.

Qattiq rejimda nima o'zgaradi

Tasodifiy global o'zgaruvchilar

Agar e'lon qilinmagan o'zgaruvchiga qiymat tayinlasangiz, JavaScript standart ob'ekti bo'yicha ushbu o'zgaruvchini yaratadi:

; (funktsiya () {
  o'zgaruvchan = 'hey'
}) () (() => {
  name = 'Flavio'
}) ()
o'zgaruvchan // 'hey'
nomi // 'Flavio'

Agar qattiq rejimni yoqsangiz, yuqorida biz qilganlarimizni bajarishga harakat qilsangiz xato yuzaga keladi:

; (funktsiya () {
  "qat'iy foydalanish"
  o'zgaruvchan = 'hey'
}) () (() => {
  "qat'iy foydalanish"
  myname = 'Flavio'
}) ()

Belgilangan xatolar

Ba'zi bir konversiya xatolarida JavaScript jimgina muvaffaqiyatsiz bo'ladi.

Strict Mode-da, jim xatolar endi muammolarni keltirib chiqarmoqda:

const aniqlanmagan = 1 (() => {
  "qat'iy foydalanish"
  aniqlanmagan = 1
}) ()

Xuddi shu narsa Infinity, NaN, baholash, dalillar va boshqalarga tegishli.

JavaScript-da siz foydalanadigan ob'ektning xususiyatini yozib bo'lmaydigan qilib belgilashingiz mumkin

const car = {}
Object.defineProperty (mashina, 'rang', {qiymati: 'ko'k', yozish mumkin: noto'g'ri})

Qattiq rejimda, iloji bo'lsa, sloppy rejimda, siz ushbu qiymatni bekor qila olmaysiz:

Eshituvchilar uchun ham xuddi shunday:

const car = {
  rang olish () {
    qaytish "ko'k"
  }
}
car.color = 'qizil' (
  //ok
  () => {
    "qat'iy foydalanish"
    car.color = 'sarı' // TypeError: Faqat olish uchun ega bo'lgan #  xususiyat xususiyatini o'rnatib bo'lmaydi.
  }
) ()

Sloppy rejimi kengaytirilmaydigan ob'ektni kengaytirishga imkon beradi:

const car = {color: 'blue'}
Object.preventExtensions (mashina)
car.model = 'Fiesta' (
  //ok
  () => {
    "qat'iy foydalanish"
    car.owner = 'Flavio' // TypeError: Mulk egasini qo'shib bo'lmaydi, ob'ekt kengaytirilmaydi
  }
) ()

Shuningdek, sloppy rejimi xususiyatlarni oddiy qiymatlarga, hech qanday muvaffaqiyatsiz, lekin hech narsa qilmasdan o'rnatishga imkon beradi:

true.false = '' (
  // ''
  1
) .name =
  'xxx' // 'xxx'
var test = 'test' // aniqlanmagan
test.testing = rost // rost
test.testing // aniqlanmagan

Barcha holatlarda qat'iy rejim bajarilmaydi:

; (() => {
  "qat'iy foydalanish"
  true.false = '' (
    // TypeError: "true" boolean-da "false" xususiyatini yaratib bo'lmaydi
    1
  ) .name =
    'xxx' // TypeError: '1' raqamida 'name' xususiyatini yaratib bo'lmaydi
  'test'.testing = true // TypeError:' test 'satrida' test 'xususiyatini yaratib bo'lmaydi
}) ()

O'chirishda xatolar

Yopiq rejimda, agar siz o'chira olmaydigan xususiyatni o'chirishga harakat qilsangiz, JavaScript shunchaki noto'g'ri qaytaradi, Strict Mode-da esa TypeError:

Object.prototype-ni o'chirish (
  // noto'g'ri
  () => {
    "qat'iy foydalanish"
    delete Object.prototype // TypeError: Object () {[tabiiy kod]} funktsiyasining 'prototipini' o'chirib bo'lmaydi.
  }
) ()

Xuddi shu nom bilan funktsiya argumentlari

Oddiy funktsiyalarda parametrlarning takroriy nomlari bo'lishi mumkin:

(funktsiya (a, a, b) {
  konsol.log (a, b)
}) (1, 2, 3)
// 2 3
(funktsiya (a, a, b) {
  "qat'iy foydalanish"
  konsol.log (a, b)
}) (1, 2, 3)
// Birlashtirilmagan sintaksiya xatosi: parametrning takroriy nomi ushbu kontekstda taqiqlangan

Shuni yodda tutingki, strelka funktsiyalari har doim SyntaxError-ni oshiradi:

((a, a, b) => {
  konsol.log (a, b)
}) (1, 2, 3)
// Birlashtirilmagan sintaksiya xatosi: parametrning takroriy nomi ushbu kontekstda taqiqlangan

Oktal sintaksisi

Qattiq rejimda oktal sintaksisi o'chirilgan. Odatiy bo'lib, sakkizinchi sonli formatga mos keladigan raqamga 0 sonini qo'shib qo'yish uni sakkizinchi raqam sifatida talqin qiladi:

(() => {
  konsol.log (010)
}) ()
// 8
(() => {
  "qat'iy foydalanish"
  konsol.log (010)
}) ()
// Birlashtirilmagan sintaksiya xatosi: sakkizinchi harflar qat'iy rejimda ruxsat etilmaydi.

Siz 0oXX sintaksisidan foydalanib qat'iy rejimda ham sakkiz raqamni faollashtirishingiz mumkin:

; (() => {
  "qat'iy foydalanish"
  konsol.log (0o10)
}) ()
// 8

Bilan olib tashlandi

Strict Mode ba'zi chekka hollarni olib tashlash va kompilyator darajasida ko'proq optimallashtirish uchun kalit so'z bilan o'chirib qo'yadi.

Darhol chaqiriladigan funktsional iboralar (IIFE)

Bir zumda chaqiriladigan Funktsiya ifodasi bu funktsiyalar yaratilishi bilanoq darhol bajarilish usulidir.

IIFE juda foydali, chunki ular global ob'ektni ifloslantirmaydi va ular o'zgaruvchilar deklaratsiyasini ajratishning oddiy usulidir.

Bu IIFEni belgilaydigan sintaksis:

; (funktsiya () {
  / * * /
}) ()

IIFE-lar o'q vazifalari bilan ham aniqlanishi mumkin:

; (() => {
  / * * /
}) ()

Biz asosan qavs ichida aniqlangan funktsiyaga egamiz va keyin ushbu funktsiyani bajarish uchun () funktsiyani bajaramiz: (/ * funktsiya * /) ().

Qavslar bilan o'ralgan narsalar aslida bizning funktsiyamizni ifoda etish deb hisoblaydigan narsadir. Aks holda, funktsiya deklaratsiyasi noto'g'ri bo'ladi, chunki biz hech qanday nom ko'rsatmaganmiz:

Funktsiya deklaratsiyalari nom talab qiladi, funktsiya ifodalari esa bunga shart emas.

Bundan tashqari, iborali qavslar ichiga siz jalb qiladigan qavslarni ham qo'yishingiz mumkin, farq yo'q, shunchaki uslublar afzal:

(funktsiya () {
  / * * /
} ())
(() => {
  / * * /
} ())

Unary operatorlari yordamida alternativ sintaksis

Siz IIFE yaratishda foydalanishingiz mumkin bo'lgan ba'zi weirder sintaksisi mavjud, ammo real dunyoda juda kam ishlatiladi va u har qanday yagona operatordan foydalanishga tayanadi:

;-( funktsiyasi () {
  / * * /
}) ()
+ (funktsiya () {
 / * * /
}) ()
~ (funktsiya () {
  / * * /
}) ()
! (funktsiya () {
  / * * /
}) ()

(strelka funktsiyalari bilan ishlamaydi)

Nomli IIFE

IIFE-ni odatdagi funktsiyalar deb atash mumkin (strelka funktsiyalari emas). Bu funktsiya global miqyosda "oqmasligi" haqiqatni o'zgartirmaydi va uni bajargandan so'ng uni yana ishlatish mumkin emas:

; (doSomething () funktsiyasi
  / * * /
}) ()

Nuqtali vergul bilan boshlangan IIFE

Buni tabiatda ko'rishingiz mumkin:

; (funktsiya () {
  / * * /
}) ()

Ikkita JavaScript faylini ko'r-ko'rona birlashtirganda muammolar paydo bo'lishining oldini oladi. JavaScript-da nuqta-vergul kerak emas, shuning uchun sintaksis xatosini keltirib chiqaradigan ba'zi bir iboralar bilan faylni bog'lashingiz mumkin.

Ushbu muammo asosan veb-sayt kabi "aqlli" kod to'plamlari yordamida hal qilinadi.

Matematik operatorlar

Matematik operatsiyalarni va hisoblarni bajarish har qanday dasturlash tilida bajariladigan juda keng tarqalgan narsa. JavaScript raqamlar bilan ishlashda yordam beradigan bir nechta operatorlarni taklif etadi.

Arifmetik operatorlar

Qo'shish (+)

const uch = 1 + 2
const to'rt = uch + 1

Agar satrlardan foydalansangiz + operatori simlarni bog'lash vazifasini ham bajaradi, shuning uchun e'tibor bering:

const uch = 1 + 2
uch + 1 // 4
'uchta' + 1 // three1

Ajratish (-)

const ikkita = 4 - 2

Bo'linish (/)

Birinchi operatorning ikkinchisini va ikkinchisini qaytaradi:

const natijasi = 20/5 // natija === 4
const natijasi = 20/7 // natija === 2.857142857142857

Agar siz nolga bo'linsangiz, JavaScript hech qanday xatoga yo'l qo'ymaydi, lekin cheksizlik qiymatini qaytaradi (yoki agar qiymat manfiy bo'lsa, -fanfiylik).

1/0 // Cheksizlik
-1 / 0 // - Cheksizlik

Qoldiq (%)

Qolgan narsalar ko'p foydalanish holatlarida juda foydali hisoblanadi:

const natijasi = 20% 5 // natija === 0
const natijasi = 20% 7 // natija === 6

Nol bilan eslatish har doim NaN bo'ladi, maxsus raqam "raqam emas" degan ma'noni anglatadi:

1% 0 // NaN
-1% 0 // NaN

Ko'paytirish (*)

1 * 2 // 2
-1 * 2 // - 2

Eksponentlash (**)

Birinchi operandni ikkinchi ikkinchi operandga ko'taring

1 ** 2 // 1
2 ** 1 // 2
2 ** 2 // 4
2 ** 8 // 256
8 ** 2 // 64

Unary operatorlari

Kattalashtirish (++)

Raqamni ko'paytirish. Bu bir martalik operatordir va agar raqam oldida qo'yilsa, u ortgan qiymatni qaytaradi.

Agar raqamdan keyin qo'yilsa, u asl qiymatini qaytaradi, keyin uni oshiradi.

x = 0 ga teng bo'lsin
x ++ // 0
x // 1
++ x // 2

Kamaytirish (-)

Qiymati pasaymasdan tashqari, o'sish operatori kabi ishlaydi.

x = 0 ga teng bo'lsin
x-- // 0
x // - 1
--x // - 2

Bitta rad etish (-)

Operandning rad javobini qaytaring

x = 2 ga teng bo'lsin
-x // - 2
x // 2

Bir qavatli plyus (+)

Agar operand raqam bo'lmasa, uni aylantirishga harakat qiladi. Aks holda, agar operand allaqachon raqam bo'lsa, u hech narsa qilmaydi.

x = 2 ga teng bo'lsin
+ x // 2
x = '2'
+ x // 2
x = '2a'
+ x // NaN

Topshiriq yorliqlari

Doimiy tayinlash operatori, =, barcha arifmetik operatorlar uchun bir nechta yorliqlar mavjud bo'lib, ular birinchi operandga ikkinchi operand bilan bajarilgan ishlar natijasini belgilashga imkon beradi.

Ular:

  • + =: qo'shimcha tayinlash
  • - =: ajratish topshirig'i
  • * =: ayirish topshirig'i
  • / =: bo'linishni tayinlash
  • % =: qolgan topshiriq
  • ** =: eksponentlashtirish topshirig'i

Misollar:

const a = 0
a + = 5 // a === 5
a - = 2 // a === 3
a * = 2 // a === 6
a / = 2 // a === 3
a% = 2 // a === 1

Oldindan foydalanish qoidalari

Har bir murakkab bayonot ustuvorlik muammolarini keltirib chiqaradi.

Buni ol:

const a = 1 * 2 + 5/2% 2

Natijada 2,5, lekin nima uchun? Avval qanday operatsiyalar bajariladi va qaysi birini kutish kerak?

Ba'zi operatsiyalar boshqalariga qaraganda ustunroq. Oldindan foydalanish qoidalari quyidagicha keltirilgan:

  • - + ++ - birlashgan operatorlar, o'sish va kamaytirish
  • * /% ko'payish / bo'linish
  • + - qo'shish / ayirish
  • = + = - = * = / =% = ** = topshiriqlar

Bir xil darajadagi operatsiyalar (+ va - kabi) ular topilgan tartibda bajariladi

Yuqoridagi tartibga rioya qilgan holda, biz ushbu hisobni echishimiz mumkin

const a = 1 * 2 + 5/2% 2
const a = 1 * 2 + 5/2% 2
const a = 2 + 2.5% 2
const a = 2 + 0,5
const a = 2.5

Matematik ob'ekt

Math ob'ekti matematikaga oid ko'plab yordamchi dasturlarni o'z ichiga oladi. Bu erda ularning barchasini ko'rib chiqaylik.

Konstantalar

Vazifalari

Bu funktsiyalarning barchasi statikdir. Matematik sozlash mumkin emas.

Math.abs ()

Sonning mutlaq qiymatini qaytaradi

Math.abs (2.5) //2.5
Math.abs (-2.5) //2.5

Math.acos ()

Operandning arkkosinini qaytaradi

Operand -1 dan 1 gacha bo'lishi kerak

Math.acos (0.8) //0.6435011087932843

Mat.asin ()

Operandning arksini qaytaradi

Operand -1 dan 1 gacha bo'lishi kerak

Math.asin (0.8) //0.9272952180016123

Mat.atan ()

Operandning arktangentini qaytaradi

Math.atan (30) //1.5374753309166493

Math.atan2 ()

O'z argumentlari sonining arktangensini qaytaradi.

Math.atan2 (30, 20) //0.982793723247329

Math.ceil ()

Bir qatorni yig'adi

Math.ceil (2.5) // 3
Math.ceil (2) // 2
Math.ceil (2.1) // 3
Math.ceil (2.99999) // 3

Math.cos ()

Yorug'lik bilan ifodalangan burchakning kosinusini qaytaring

Math.cos (0) // 1
Math.cos (Math.PI) // - 1

Math.exp ()

Argument sifatida o'tgan eksponent uchun Math.E qiymatini ko'paytiring

Math.exp (1) //2.718281828459045
Math.exp (2) //7.38905609893065
Math.exp (5) //148.4131591025766

Math.floor ()

Raqamni pastga aylantiradi

Math.ceil (2.5) // 2
Math.ceil (2) // 2
Math.ceil (2.1) // 2
Math.ceil (2.99999) // 2

Math.log ()

Sonning e (tabiiy) logarifmining asosini qaytaring

Math.log (10) //2.302585092994046
Math.log (Math.E) // 1

Math.max ()

O'tilgan raqamlar to'plamidagi eng yuqori raqamni qaytaring

Math.max (1,2,3,4,5) // 5
Math.max (1) // 1

Math.min ()

O'tilgan raqamlar to'plamidagi eng kichik raqamni qaytaring

Math.max (1,2,3,4,5) // 1
Math.max (1) // 1

Math.pow ()

Birinchi dalilni ikkinchi argumentga qaytaring

Math.pow (1, 2) // 1
Math.pow (2, 1) // 2
Math.pow (2, 2) // 4
Math.pow (2, 4) // 16

Math.random ()

Soxta tasodifiy sonni 0.0 va 1.0 orasida qaytaradi

Math.random () //0.9318168241227056
Math.random () //0.35268950194094395

Math.round ()

Raqamni eng yaqin butun songa keltiradi

Math.round (1.2) // 1
Math.round (1.6) // 2

Math.sin ()

Yorug'lik bilan ifodalangan burchakning gunohini hisoblaydi

Math.sin (0) // 0
Math.sin (Math.PI) //1.2246467991473532e-16)

Math.sqrt ()

Dalilning kvadrat ildizini qaytaring

Math.sqrt (4) // 2
Math.sqrt (16) // 4
Math.sqrt (5) //2.23606797749979

Math.tan ()

Yorug'lik bilan ifodalangan burchak tangensini hisoblaydi

Math.tan (0) // 0
Math.tan (Math.PI) //-1.2246467991473532e-16

ES modullari

ES Modullari modullar bilan ishlash uchun ECMAScript standartidir. Node.js uzoq vaqtdan beri CommonJS standartidan foydalanib kelayotgan bo'lsa-da, brauzerda hech qachon modul tizimi bo'lmagan. Modullar tizimi kabi har qanday muhim qaror avval ECMAScript tomonidan standartlashtirilishi va keyin brauzer tomonidan amalga oshirilishi kerak.

ES6 bilan yakunlangan ushbu standartlashtirish jarayoni va brauzerlar hamma narsani bir xilda, bir xilda ishlashga harakat qilib, ushbu standartni amalga oshirishni boshladilar va endi ES Modullari Chrome, Safari, Edge va Firefox-da ishlaydi (60-versiyadan beri).

Modullar juda zo'r, chunki ular sizga har xil funktsional imkoniyatlarni singdirishga imkon beradi va bu funktsiyani boshqa JavaScript fayllarini kutubxonalar sifatida ochib beradi.

ES modullari sintaksisi

Modulni import qilish uchun sintaksis:

paketni "modul nomi" dan import qilish

CommonJS foydalanadi

const pack = required ('modul nomi')

Modul bu eksport kalit so'zidan foydalanib, bir yoki bir nechta qiymatni (ob'ektlar, funktsiyalar yoki o'zgaruvchilar) eksport qiluvchi JavaScript fayli. Masalan, ushbu modul katta harfni qaytaradigan funktsiyani eksport qiladi:

bosh harflar.js
eksport standart str => str.toUpperCase ()

Ushbu misolda modul bitta, odatiy eksportni belgilaydi, shuning uchun u noma'lum vazifani bajarishi mumkin. Aks holda, uni boshqa eksportdan farqlash uchun ism kerak bo'ladi.

Endi boshqa har qanday JavaScript moduli uppercase.js tomonidan taqdim etiladigan funktsionallikni import qilish orqali import qilishi mumkin.

HTML-sahifa maxsus type = "Module" atributiga ega bo'lgan

Eslatma: ushbu modulni import qilish ssenariyni yuklash kabi ishlaydi. Javobni kechiktirish va asinx bilan samarali yuklashga qarang

Shuni ta'kidlash kerakki, type = "module" bilan yuklangan har qanday skript qat'iy rejimda yuklanadi.

Ushbu misolda, uppercase.js moduli standart eksportni belgilaydi, shuning uchun uni import qilganda biz xohlagan nomni berishimiz mumkin:

'./uppercase.js' danUpperCase-ga import qilish

va biz undan foydalanishimiz mumkin:

toUpperCase ('sinov') // 'TEST'

Boshqa domenda belgilangan modullarga murojaat qilish uchun modulni import qilish uchun mutlaq yo'ldan ham foydalanishingiz mumkin:

'https://flavio-es-modules-example.glitch.me/uppercase.js' danUpperCase-ga import qilish

Bu shuningdek import sintaksisi:

'/uppercase.js' dan {foo} ni import qilish
"../uppercase.js" dan {foo} ni import qilish

Bu emas:

"uppercase.js" dan {foo} ni import qilish
"utils / uppercase.js" dan {foo} ni import qilish

Bu mutlaq yoki nomidan oldin yoki / yoki.

Boshqa import / eksport variantlari

Biz yuqorida ushbu misolni ko'rdik:

eksport standart str => str.toUpperCase ()

Bu bitta standart eksportni yaratadi. Ammo ushbu faylda siz bir nechta narsani eksport qilishingiz mumkin:

const a = 1
const b = 2
const c = 3
eksport qilish {a, b, c}

Boshqa modul yordamida barcha eksportni import qilish mumkin

"modul" dan import *

Siz vayron qiluvchi topshiriqdan foydalangan holda ushbu eksportlarning atigi bir qismini import qilishingiz mumkin:

"modul" dan {a} faylni import qilish
"modul" dan {a, b} import qilish

Siz qulaylik uchun istalgan import nomini quyidagicha ishlatishingiz mumkin:

"modul" dan {a, b ikkitadan} import qilish

Siz odatdagi eksportni va har qanday nooziq eksportni, xuddi shu umumiy reaktsiya importidagi kabi import qilishingiz mumkin:

"reaktsiya" dan "Reaktsiya", "tarkibiy qism" ni import qilish

Siz ES Modules misolini https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html saytida tekshirishingiz mumkin.

KORLAR

Modullar CORS yordamida olinadi. Agar boshqa domenlarning skriptlariga murojaat qilsangiz, ular CORS sarlavhasiga ega bo'lishi kerak, bu saytlararo yuklashga imkon beradi (Access-Control-Allow-Origin: *)

Modullarni qo'llab-quvvatlamaydigan brauzerlar haqida nima deyish mumkin?

Type = "modul" va nomodul kombinatsiyasidan foydalaning:

 
 

Xulosa

ES Modullari zamonaviy brauzerlarda taqdim etilgan eng katta xususiyatlardan biridir. Ular ES6-ning bir qismi, ammo ularni amalga oshirish yo'li uzoq vaqtdan beri mavjud.

Endi biz ulardan foydalanishimiz mumkin! Shuni ham yodda tutishimiz kerakki, bir nechta modullarning mavjudligi sahifalarimizga ta'sir qiladi, chunki bu ish vaqtida brauzer bajarishi kerak bo'lgan yana bir qadam.

ES Modullari brauzerga kirgan taqdirda ham veb-paket hali ham ulkan pleyer bo'lib qolishi mumkin, ammo bunday xususiyatning to'g'ridan-to'g'ri tilda o'rnatilganligi modullarni mijoz tomonida va Node.js-da ishlashini birlashtirish uchun juda katta. .

CommonJS

CommonJS modulining spetsifikatsiyasi Node.jsda modullar bilan ishlashda ishlatiladigan standartdir.

Brauzerda ishlaydigan JavaScript-ning mijozlari ES Modules deb nomlangan yana bir standartdan foydalanadilar

Ular sizga aniq va alohida ishlatilishi mumkin bo'lgan funktsional qismlarni yaratishga imkon beradi, ularning har biri o'z-o'zidan tekshirilishi mumkin.

Npm ulkan ekotizim ushbu CommonJS formatiga asoslanadi.

Modulni import qilish uchun sintaksis:

const pack = required ('modul nomi')

CommonJS-da, modullar sinxron ravishda yuklanadi va JavaScript ish vaqti ularni topish tartibida qayta ishlanadi. Ushbu tizim JavaScript tomonida yaratilgan va mijoz tomoni uchun mos emas (shuning uchun ES Modullari joriy etildi).

Javascript fayli u belgilaydigan bir yoki bir nechta belgilarni eksport qilganda modul bo'lib, ular o'zgaruvchilar, funktsiyalar va ob'ektlardir:

bosh harflar.js
export.uppercase = str => str.toUpperCase ()

Har qanday JavaScript fayli ushbu modulni import qilishi va undan foydalanishi mumkin:

const uppercaseModule = zarur ('uppercase.js')
uppercaseModule.uppercase ('sinov')

Oddiy misolni ushbu Glitchda topish mumkin.

Siz bir nechta qiymatni eksport qilishingiz mumkin:

eksport.a = 1
eksport.b = 2
eksport.c = 3

vayron qiluvchi topshiriqdan foydalanib, ularni har kimga import qiling:

const {a, b, c} = zarur ('./ uppercase.js')

yoki shunchaki bitta qiymatni eksport qiling:

//file.js
module.exports = qiymati

foydalanib import qiling

const qiymati = zarur ('./ file.js')

Lug'at

Sizga begona bo'lishi mumkin bo'lgan ichki qismlarni ishlab chiqishda ishlatiladigan bir nechta atamalar uchun qo'llanma

Asenkron

Kod nimanidir ishga tushirganingizda, uni unutganingizda va natija tayyor bo'lganda uni kutib o'tirmasdan qaytarishingiz mumkin. Odatiy misol AJAX qo'ng'irog'i bo'lib, u bir necha soniyalarni olishi mumkin va shu bilan birga siz boshqa ishlarni bajarasiz va javob tayyor bo'lgandan keyin qo'ng'iroq qilish funktsiyasi chaqiriladi. Va'dalar va asinx / kutish asenkni boshqarishning zamonaviy usulidir.

Bloklash

JavaScript-da blok jingalak qavslar bilan ajratilgan ({}). If bayonotida blok mavjud, for loopda blok mavjud.

Blok qamrovi

Funktsiyani Scoping yordamida blokda belgilangan har qanday o'zgaruvchiga butun blok ichidan ko'rish mumkin va kirish mumkin, ammo undan tashqarida emas.

Qayta qo'ng'iroq qilish

Qayta qo'ng'iroq qilish - bu biron bir narsa yuz berganda chaqiriladigan funktsiya. Element bilan bog'liq klik hodisasida foydalanuvchi elementni bosganda chaqiriladigan qo'ng'iroqni qaytarish funktsiyasi mavjud. Qabul qilish so'rovida manba yuklanganda chaqirilgan qo'ng'iroqni qaytarib yuborish funktsiyasi mavjud.

Deklarativ

Deklarativ yondashuv bu siz mashinaga nima qilishingiz kerakligini aytganda va siz uning tafsilotlarini aniqlashga imkon berganingizda. Reaktsiya deklarativ deb hisoblanadi, chunki siz DOM-ni to'g'ridan-to'g'ri tahrirlashdan ko'ra abstraksiyalar haqida mulohaza yuritasiz. Assembler singari past darajadagi dasturlash tiliga qaraganda har qanday yuqori darajadagi dasturlash tili deklarativdir. JavaScript C ga qaraganda deklarativroqdir. HTML deklarativdir.

Orqaga chekinish

Agar foydalanuvchi ma'lum bir funktsional imkoniyatlardan foydalana olmagan bo'lsa, yaxshi tajribani ta'minlash uchun zaxiralash usulidan foydalaniladi. Masalan, JavaScript nogironlarini ko'radigan foydalanuvchi sahifaning oddiy HTML versiyasiga ega bo'lishi mumkin. Yoki biron bir API-ni amalga oshirmagan brauzer uchun foydalanuvchining tajribasini butunlay buzmaslik uchun sizda zaxira nusxasi bo'lishi kerak.

Funktsiya ko'lami

Funktsiyani Scoping yordamida funktsiyada aniqlangan har qanday o'zgaruvchi butun funktsiyaning ichida ko'rinadigan va kirish mumkin.

O'zgarmaslik

O'zgaruvchi o'zgaruvchan bo'lib, uning qiymati yaratilgandan keyin uning qiymati o'zgarishi mumkin emas. O'zgaruvchan o'zgaruvchini o'zgartirish mumkin. Xuddi shu narsa ob'ektlar va massivlarga ham tegishli.

Leksik qamrov

Leksik Scoping - bu ota-ona funktsiyasining o'zgaruvchilari ichki funktsiyalarga ham taqdim etiladigan ma'lum bir qamrov turi. Ichki funktsiyaning doirasi shuningdek ona funktsiyasining doirasini o'z ichiga oladi.

Poliffill

Polifillash bu zamonaviy JavaScript-da mavjud yangi funktsiyalarni yoki zamonaviy brauzer API-larida eski brauzerlarga taqdim etish usulidir. Polifilin - bu porlashning o'ziga xos turi.

Sof funktsiya

Hech qanday yon ta'siri bo'lmagan (tashqi manbalarni o'zgartirmaydigan) funktsiya va uning chiqishi faqat dalillar bilan belgilanadi. Ushbu funktsiyani 1M marta chaqirishingiz mumkin va bir xil dalillar to'plamini olsangiz, chiqish har doim bir xil bo'ladi.

Qayta tayinlash

Var va let deklaratsiyali JavaScript o'zgaruvchini noma'lum muddatga qayta tayinlashga imkon beradi. Tasdiqlashlar yordamida siz satrlar, butun sonlar, bulinglar va boshqa tayinlanmaydigan ob'ektlar uchun o'zgarmas qiymatni samarali ravishda e'lon qilasiz (ammo siz uni o'z usullari bilan o'zgartirishingiz mumkin).

Qo'llash sohasi

Qo'llash - bu dasturning biron bir qismiga ko'rinadigan o'zgaruvchilar to'plami.

Qo'llash

Scoping - bu o'zgaruvchining qiymatini aniqlash uchun dasturlash tilida belgilangan qoidalar to'plami.

Shim

Shim bu funksionallik yoki API atrofida ozgina o'rashdir. Odatda, biron bir funktsiyani qo'llab-quvvatlamaydigan brauzerlar uchun biron bir narsani mavhumlashtirish, parametrlarni oldindan to'ldirish yoki polifil to'ldirish uchun ishlatiladi. Siz buni muvofiqlik qatlami sifatida ko'rib chiqishingiz mumkin.

Yon ta'siri

Yon effekti - bu funktsiya boshqa biron bir funktsiya yoki uning tashqarisidagi ob'ekt bilan o'zaro ta'sirlashganda. Tarmoq yoki fayl tizimi yoki UI bilan o'zaro aloqalar - bu barcha yon ta'sirlar.

Davlat

Odatda tarkibiy qismlar haqida gapirganda davlat kuchga kiradi. Agar tarkibiy qism o'z ma'lumotlarini boshqarsa yoki fuqaroligi bo'lmasa, fuqaroligi yo'q.

Davlat

Davlat tarkibiy qismi, funktsiyasi yoki klassi o'z holatini (ma'lumotlarini) boshqaradi. U qator, hisoblagich yoki boshqa biron bir narsani saqlashi mumkin edi.

Fuqaroligi yo'q

Fuqaroligi bo'lmagan tarkibiy qism, funktsiya yoki sinf, shuningdek, soqov deb ataladi, chunki qaror qabul qilish uchun o'z ma'lumotiga ega bo'lishi mumkin emas, shuning uchun uning chiqishi yoki taqdimoti butunlay uning dalillariga asoslanadi. Bu sof funktsiyalar fuqaroligi yo'qligini anglatadi.

Qattiq rejim

Qattiq rejim - bu ECMAScript 5.1 yangi xususiyati bo'lib, JavaScript ish vaqti ko'proq xatolarga olib keladi, ammo bu sizga oshkor qilinmagan o'zgaruvchilardan va takroriy ob'ekt xususiyatlari va boshqa nozik narsalar kabi e'tibordan chetda qoladigan muammolarni inkor etish orqali JavaScript kodini yaxshilashga yordam beradi. Maslahat: undan foydalaning. Shu bilan bir qatorda, "slopy mode" bu biz bergan nomga qarab yaxshi narsa emas.

Daraxtni silkitish

Daraxt chayqalishi bu sizning foydalanuvchilaringizga yuboradigan to'plamdan "o'lik kod" ni olib tashlashni anglatadi. Agar siz import ma'lumotlarida hech qachon foydalanmaydigan biron bir kod qo'shsangiz, u fayl hajmi va yuklanish vaqtini qisqartirish uchun ilova foydalanuvchilariga yuborilmaydi.

O'qiganingiz uchun rahmat!

Eslatma: Ushbu JavaScript qo'llanmasining PDF, ePub yoki Mobi versiyasini osonroq ma'lumot olish yoki Kindle yoki planshetingizda o'qish uchun olishingiz mumkin.