JavaScript suhbatini buzish uchun mukammal qo'llanma (Dasturchining fikri)

Suhbatga nomzodlar uchun bir stakan JS

Javoblar JavaScript (JS) oson emas. Men buni qabul qilaman, siz ham uni qabul qilasiz va hamma shunday qiladi. Javob uchun JavaScript-da so'raladigan savollar soni juda ko'p. Qanday qilib JS suhbatini buzish mumkin? Nimadan boshlash kerak? Ushbu maqola barcha g'ayratli JavaScript dasturchilarini asosiy tushunchalarni bilish orqali JS bilimlarini chuqurlashtirishga o'rgatish uchun qilingan harakatlardir. Bular hech bo'lmaganda JS intervyuiga duch kelish uchun qilinadigan chaqaloq qadamlaridir. Agar men nomzod bo'lsam, bu tushunchalarga puxta tayyorgarlik ko'raman. Agar men intervyu oluvchiman, deb o'ylayman, bundan keyin ham davom etish uchun bu muhim narsalarni bilasiz.

Eslatma: Agar meni tanimasangiz, men Python, Go & JavaScript-da tajribaga ega bo'lgan to'liq ishlab chiquvchiman. Yaqinda men ham kitob yozdim!

Ushbu qo'llanma JS ishlab chiquvchisi uchun emas, balki boshlang'ich nuqtadir. O'zini yanada qattiq intervyularga tayyorlash uning zimmasida. Shuningdek, ular intervyu savollari ular ishlagan domen va texnologiyalardan ham kelib chiqishi mumkinligini yodda tutishlari kerak (masalan: React JS, WebPack, Node JS va hk). Bu erda siz o'zingizni yaxshi JavaScript dasturchisi deb atash uchun yaxshi ma'lumotga ega bo'lishingiz kerak bo'lgan asosiy JS elementlarini taqdim etamiz. Yaxshi JS dasturchisi nozik React dasturchisi bo'lishi mumkin, ammo buning teskari tomoni kafolatlanmaydi. Achinarlisi shundaki, JS intizomi yo'qligi sababli (qisman to'g'ri) son-sanoqsiz skriptlar to'plamlarini yaratishda yomon obro'ga ega. JavaScript ishlab chiquvchilarga ko'p shikoyat qilmasdan narsalarni qilishga imkon beradi. Kod berish juda qiziqarli. Jon Resig (yaratuvchisi, jQuery), Brendan Eich (yaratuvchisi, JS) va Lars Bak (Google Chrome jamoasi) kabi juda oz JavaScript dasturchilari bu tilni tushunishda va tashqarida bilishgan. Muvaffaqiyatli JS dasturchisi har doim kutubxonalardan oddiy JS kodini o'qiydi. Ko'pchilik aytishicha, yaxshi JavaScript dasturini topish juda qiyin!

“Virtual mashinalar g'alati hayvon. Hech qanday mukammal echim yo'q, buning o'rniga siz "yoqimli joy" ni optimallashtirasiz. Hunarmandchilik juda ko'p. Bu juda uzoq o'yin, siz charchatib bo'lmaydi »- Lars Bak, Google

Sizga JS intervyularining murakkabligini ko'rsatish uchun birinchi qarashda ushbu JS bayonotining natijasini bilib olishga harakat qiling.

console.log (2.0 == "2" == yangi Boolean (haqiqiy) == "1")

<<<<<<<<<<<<< >>>>>>>>>>>>>>

<<<<<<<<<<<<< >>>>>>>>>>>>>>

<<<<<<<<<<<<< >>>>>>>>>>>>>>

(Ushbu chiziqlar sizni quyidagi satrlarga e'tibor qaratmaslik uchun yaratadi)

10 kishidan 9 nafari bu noto'g'ri chop etishni aytmoqda. Ammo bu haqiqat. Nima uchun? bu erda qarang.

JavaScript juda qiyin. Agar suhbatdosh yuqoridagi kabi savol berish uchun juda aqlli bo'lsa, biz qila oladigan ko'p narsa yo'q. Ammo biz nima qila olamiz? Sizga yoqadigan JS suhbatini o'tkazish uchun ushbu o'n bitta asosiy elementni chuqur o'rganing.

1) JS funktsiyalarini yaxshi tushunish

Vazifalar - bu JavaScript-ning kremi. Ular birinchi sinf fuqarolari. JS funktsiyalarini chuqur bilmasdan, sizning bilimingiz jiddiy ravishda buziladi. JS funktsiyasi odatdagi funktsiyadan ko'proq. Boshqa tillardan farqli o'laroq, funktsiya o'zgaruvchiga tayinlanishi mumkin, boshqa funktsiyaga argument sifatida uzatiladi va boshqasidan qaytarilishi mumkin. Demak, bu JSda birinchi sinf fuqarosi.

Men bu erda funktsiya nima ekanligini tushuntirmoqchi emasman, lekin siz ozgina narsalar sizni ajablantirishi mumkinligini bilasizmi? Shunga o'xshash!

konsol.log (kvadrat (5));
/ * ... * /
funktsiya kvadrat (n) {return n * n; }

Ushbu kod parchasi 25ni bajaradi. To'g'ri! Ikkinchi kod parchasiga qarang

konsol.log (kvadrat (5));
 
var kvadrat = funktsiya (n) {
  qaytish n * n;
}

Bir qarashda, siz buni 25 ta bosma deb aytishingiz mumkin. Soxta! Buning o'rniga u birinchi qatorga baqiradi.

TypeError: kvadrat funksiya emas

JavaScript-da, agar siz biron bir funktsiyani o'zgaruvchi sifatida aniqlasangiz, o'zgaruvchi nom ko'tariladi, ammo JS ijrosi uning ta'rifiga duch kelmaguncha, siz unga kira olmaysiz. Hayron bo'lmadingizmi?

Qoldiring. Siz ushbu sintaksisni biron bir kodda tez-tez ko'rgan bo'lishingiz mumkin.

var simpleLibrary = funktsiya () {
   var simpleLibrary = {
        a,
        b,
        qo'shish: funktsiya (a, b) {
            a + b ni qaytaring;
        },
        ayirish: funktsiya (a, b) {
            qaytish a - b;
        }
   }
  return oddiyLibrary;
} ();

Nima uchun odamlar bu g'alati narsani qilishadi? Bu global miqyosni ifloslantirmaydigan o'zgaruvchan va funktsional xususiyatlarga ega bo'lgan o'zgaruvchidir. JQuery dan Lodashgacha bo'lgan kutubxonalar ushbu texnikadan sizga $ va hkzni ta'minlash uchun foydalanadi.

Men bu erda "vazifalarni yaxshi o'rganing" degan fikrni ta'kidlayman. Ularni qanday ishlatishda juda ko'p tuzoq mavjud. Mozilla-ning funktsiyalari haqida yaxshi yozilgan yozish orqali o'ting.

2) bog'lashni tushuning, qo'llang va qo'ng'iroq qiling

Ushbu funktsiyalarni barcha mashhur kutubxonalarda ko'rishingiz mumkin. Bu funktsiyalarni turli xil funktsiyalarga qo'shishimiz mumkin bo'lgan narsalar yordamida curry deyiladi. Yaxshi JavaScript dasturchisi istalgan vaqtda sizga ushbu uchta narsalar to'g'risida aytib berishi mumkin.

Asosan, bu biror narsaga erishish uchun xatti-harakatni o'zgartirish funktsiyalarining prototip usullari. JSni ishlab chiqaruvchisi Chadning so'zlariga ko'ra, foydalanish bu kabi

Ushbu funktsiyani keyinchalik ma'lum bir kontekstda chaqirilishini xohlaganingizda .bind () -ni foydalaning, bu hodisalar uchun foydali. Kontekstni o'zgartirib, darhol funktsiyani ishga tushirishni xohlaganingizda .call () yoki .apply () ni ishlating.

Tejash qo'ng'irog'i!

Yuqoridagi gap nimani anglatishini ko'rib chiqaylik! Aytaylik, matematikangiz o'qituvchisi kutubxonani yaratib, uni topshirishingizni so'ragan. Siz mavhum kutubxona yozdingiz, u doiraning doirasini va atrofini topadi.

var mathLib = {
    pi: 3.14,
    maydon: funktsiya (r) {
        return this.pi * r * r;
    },
    atrofi: funktsiya (r) {
        qaytish 2 * this.pi * r;
    }
};

Siz kutubxonani professorga topshirdingiz. Endi matematik kutubxonani chaqiradigan kodni yuborish vaqti keldi.

mathLib.area (2);
12.56

Ikkinchi kod namunalarini yuborayotganda, siz professor sizdan 5 o'nlik aniqlik bilan doimiy pi ishlatishingizni so'ragan ko'rsatmalar topdingiz. Voy! Siz shunchaki 3.14159 emas, balki 3.14 dan foydalangansiz. Muddati tugaganligi sababli endi kutubxonani yuborish imkoningiz yo'q. JS qo'ng'iroq funktsiyasi sizni tejashga yordam beradi. Shunchaki kodingizni chaqiring

mathLib.area.call ({pi: 3.14159}, 2);

va bu sizning yangi pi qiymatingizni oladi. Chiqish

12.56636

Bu sizning professoringizni xursand qiladi! Agar qo'ng'iroq funktsiyasini kuzatsangiz, ikkita dalil olinadi:

  • Kontekst
  • Funktsiya argumentlari

Kontekst bu ushbu kalit so'zni mintaqa funktsiyasi ichida almashtiradigan ob'ekt. Keyinchalik argumentlar funktsional dalillar sifatida uzatiladi. Masalan:

var silindr = {
    pi: 3.14,
    ovoz balandligi: funktsiya (r, h) {
        return this.pi * r * r * h;
    }
};

Qo'ng'iroqni chaqirish shunga o'xshash

silindr.volume.call ({pi: 3.14159}, 2, 6);
75.39815999999999

Ushbu funktsiya argumentlari kontekst ob'ektidan keyin keyingi argumentlar sifatida uzatilishini ko'rdingizmi?

Qo'llash to'liq bir xil, faqat Funktsiya argumentlari xudo uchun ro'yxatga kiritilgan.

silindr.volume.apply ({pi: 3.14159}, [2, 6]);
75.39815999999999

Agar siz qo'ng'iroqni bilsangiz, murojaat qilishni bilasiz va aksincha. Endi bog'lash nima?

Bind yangi funktsiyani ushbu funktsiyaga qo'shadi. Bog'lanish holatida, qo'ng'iroq yoki murojaat qilish kabi funktsiya darhol bajarilmaydi.

var newVolume = silindr.volume.bind ({pi: 3.14159}); // bu tezkor qo'ng'iroq emas
// Bir muncha vaqt o'tgach, tabiatda biron bir joyda
yangi ovoz (2,6); // Endi pi 3.14159

Bind-dan foydalanish nima? Bu bizga kontekstni yangi funktsiyaga yangilangan kontekst bilan qaytaradigan funktsiyaga kiritish imkonini beradi. Bu o'zgaruvchi foydalanuvchi tomonidan berilgan o'zgaruvchini anglatadi. Bu JavaScript hodisalari bilan ishlashda juda foydali.

JavaScript-da funktsionallik yaratish uchun siz ushbu uchta funktsiyani bilishingiz kerak

3) JavaScript ko'lamini yaxshi tushunish (shuningdek, yopilishlar)

JavaScript ko'lami - bu pandora oynasi. Yagona qiyin intervyu savollari ushbu yagona kontseptsiyadan kelib chiqishi mumkin. Uch xil turdagi qamrov mavjud:

  • Global miqyos
  • Mahalliy qamrov / funktsiya doirasi
  • Bloklash hajmi (ES6 bilan tanishtirilgan)

Global miqyosda biz odatda nima qilamiz

x = 10;
funktsiya Foo () {
  konsol.log (x); // 10-nashr
}
Foo ()

Mahalliy o'zgaruvchini aniqlaganingizda, funktsiyalar doirasi rasmga tushadi.

pi = 3.14;
funktsiya atrofi (radius) {
     pi = 3.14159;
     konsol.log (2 * pi * radius); // "12.56636" emas "12.56" ni bosib chiqaradi
}
aylana (2);

ES16 standarti yangi blok doirasini taqdim etdi, bu o'zgaruvchilarning hajmini berilgan qavs bloklari bilan cheklaydi.

var a = 10;

funktsiya Foo () {
  if (true) {
    ruxsat bering a = 4;
  }

  ogohlantirish (a); // "10" ogohlantiradi, chunki "ruxsat berish" kalit so'z
}
Foo ();

Vazifalar va shartlar blok sifatida ko'rib chiqiladi. Yuqoridagi misol 4 ni ogohlantirishi kerak, chunki shartli iboralar bajariladi. Ammo ES6 blokli o'zgaruvchilarni yo'q qiladi va miqyosi global darajaga ko'tarildi.

Endi sehrli doiralar keladi. Bunga yopilishlar yordamida erishish mumkin. JavaScript yopish - bu boshqa funktsiyani qaytaradigan funktsiya.

Agar kimdir bu savolni so'rasa. Bir vaqtning o'zida simli va belgi qaytaradigan dizaynni yozing. Agar yangi satr berilgan bo'lsa, u eskisini almashtirishi kerak. Bu shunchaki generator deb ataladi.

funktsiya generatori (kiritish) {
      var indeksi = 0;
      return {
           keyingisi: funktsiya () {
                   if (indeks 

Bajarish shu tarzda ketadi!

var mygenerator = generator ("bumerang");
mygenerator.next (); // "b" ni qaytaradi
mygenerator.next () // "o" ​​ni qaytaradi
mygenerator = generator ("toon");
mygenerator.next (); // "t" ni qaytaradi

Bu erda ko'lam muhim rol o'ynaydi. Yopish - bu boshqa funktsiyani qaytaradigan va ma'lumotlarni yig'adigan funktsiya. Yuqoridagi simli generator yopish uchun mos keladi. Indeks qiymati bir necha funktsional qo'ng'iroqlar orasida saqlanib qoladi. Belgilangan ichki funktsiya asosiy funktsiyada belgilangan parametrlarga kirish huquqiga ega. Bu boshqa doiradir. Agar siz ikkinchi darajali funktsiyada yana bitta funktsiyani aniqlagan bo'lsangiz, barcha ota-ona parametrlariga kirish mumkin.

JavaScript doirasi sizga ko'p muammolarni keltirib chiqarishi mumkin! yaxshilab tushunib oling

4) Ushbu kalit so'zni yaxshi tushunib oling (global, funktsiya va ob'ekt doiralari)

JavaScript-da biz har doim funktsiyalar va ob'ektlar bilan kod tuzamiz. Agar siz brauzerni olsangiz, global kontekstda u deraza ob'ekti haqida gapiradi. Agar siz hozir brauzer konsolini ochsangiz va shu tizimga kirsangiz, bu to'g'ri deb baholayman.

bu === oyna;

Dasturning konteksti va ko'lami o'zgarganda, bu aniq bir vaqtda tegishli ravishda o'zgaradi. Endi buni mahalliy kontekstda ko'ring:

funktsiya Foo () {
  konsol.log (this.a);
}
var food = {a: "Sehrli bu"};
Foo.call (oziq-ovqat); // ovqat bu

Endi bu natijani taxmin qilish vasvasasiga tushasiz.

funktsiya Foo () {
    console.log (bu); // bosib chiqarish {}?
}

Yo'q, bo'lmaydi. Chunki bu erda bu global ob'ekt. Yodingizda bo'lsin, ota-onaning ko'lami qanday bo'lishidan qat'i nazar, bu bola meros bo'lib qoladi. Shunday qilib, deraza ob'ektini bosib chiqaradi. Biz muhokama qilgan uchta usul aslida ushbu ob'ektni o'rnatish uchun ishlatiladi.

Endi buning oxirgi turi keladi. bu ob'ekt doirasida. Bu yerda

var shaxs = {
    nomi: "G'arib",
    yoshi: 24,
    identifikatsiyani olish () {
        return {who: this.name, howOld: this.age};
    }
}

Men shunchaki o'zgaruvchi deb atash mumkin bo'lgan funktsiya bo'lgan getter sintaksisidan foydalandim.

shaxs.shaxsiyat; // qaytaradi {kim: "G'arib", howOld: 24}

Bu erda bu aslida ob'ektning o'zi haqida gap boradi. yuqorida aytib o'tganimizdek, turli joylarda o'zini boshqacha tutadi. Ularni yaxshi biling.

5) Ob'ektlarni yaxshi tushunish (Object.freeze, Object.seal)

Ko'pchiligimiz shunga o'xshash narsalarni bilamiz.

var belgilar = {fizika: 98, matematikalar: 95, kimyo: 91};

Bu Key, Value juftliklarini saqlaydigan xarita. JavaScriptts ob'ektlari har qanday narsani qiymat sifatida saqlashning maxsus xususiyatiga ega. Bu biz ro'yxat, boshqa ob'ekt, funktsiyani va boshqalarni qiymat sifatida saqlashimiz mumkin degan ma'noni anglatadi. Nima emas?

Ob'ektni shu yo'llar bilan yaratishingiz mumkin:

var belgilar = {};
var belgilar = yangi Object ();

Siz osongina berilgan ob'ektni JSON satriga aylantira olasiz va JSON ob'ekti striptizi va tahlil qilish usullari yordamida uni orqaga qaytarishingiz mumkin.

// "{" fizika "ni qaytaradi: 98," matematikalar ": 95," kimyo ": 91}"
JSON.stringify (belgilar);
// satrdan ob'ektni olish
JSON.parse ('{"fizika": 98, "matematikalar": 95, "kimyo": 91}');

Xo'sh, ob'ektlar haqida nimalarni bilishingiz kerak?

Object.keys-dan foydalanib, ob'ekt ustidan itarish oson

var highScore = 0;
uchun (i Object.keys (belgilar)) {
   if (belgilari [i]> highScore)
      highScore = belgilar [i];
}

Object.values ​​ob'ektning qiymatlari ro'yxatini qaytaradi.

Ob'ektning boshqa muhim funktsiyalari:

  • Object.prototype (ob'ekt)
  • Object.freeze (funktsiya)
  • Object.seal (funktsiya)

Object.prototype ko'plab dasturlarga ega bo'lgan muhim funktsiyalarni ta'minlaydi. Ulardan ba'zilari:

Object.prototype.hasOwnProperty ob'ektda ushbu xususiyat / kalit mavjudligini aniqlash uchun foydalidir.

belgilar.hasOwnProperty ("fizika"); // haqiqiy qaytadi
belgilar.hasOwnProperty ("grekcha"); // noto'g'ri qaytaradi

Object.prototype.instanceof berilgan ob'ekt ma'lum bir prototip turi ekanligini baholaydi (biz ularni keyingi bo'limda ko'rib chiqamiz, ular funktsiyalardir).

funktsiya Avtomobil (ishlab chiqarish, model, yil) {
  this.make = qilmoq;
  this.model = model;
  this.year = yil;
}
var newCar = new Car ('Honda', 'City', 2007);
console.log (yangi avtomobil nusxasi); // haqiqiy qaytadi

Endi boshqa ikkita funktsiya keladi. Object.freeze mavjud xususiyatlarni o'zgartirib bo'lmaydigan qilib muzlatishimizga imkon beradi.

var belgilar = {fizika: 98, matematikalar: 95, kimyo: 91};
finalizedMarks = Object.freeze (belgilar);
finalizedMarks ["fizika"] = 86; // qat'iy xatoga yo'l qo'yadi
console.log (belgilar); // {fizika: 98, matematikalar: 95, kimyo: 91}

Bu erda biz ob'ektni muzlatgandan so'ng fizika xususiyatining qiymatini o'zgartirishga harakat qilmoqdamiz. Ammo, JavaScript buni amalga oshirishga imkon bermaydi. Berilgan ob'ekt muzlatilgan yoki yo'qligini aniqlashimiz mumkin.

Object.isFrozen (yakuniyMarks); // haqiqiy qaytadi

Object.seal muzlatishdan biroz farq qiladi. U sozlanadigan xususiyatlarga ruxsat beradi, lekin yangi mulk qo'shilishi yoki o'chirilishi yoki xususiyatlariga ruxsat bermaydi.

var belgilar = {fizika: 98, matematikalar: 95, kimyo: 91};
Object.seal (belgilar);
markalarni yo'q qilish. kimyo; // operatsiya muvaffaqiyatsiz tugaganligi sababli noto'g'ri qaytaradi
belgilar.fizika = 95; // ishlaydi!
belgilar.greek = 86; // Yangi mulk qo'shilmaydi

Bundan tashqari, ushbu ob'ekt yordamida muhrlanganligini tekshirishimiz mumkin

Object.isSealed (belgilar); // haqiqiy qaytadi

Global Object funktsiyasida ko'plab boshqa muhim funktsiyalar / usullar mavjud. Ularni bu erda toping.

6) Prototipik merosxo'rlikni yaxshi tushuning

An'anaviy JavaScript-da, kamuflyajda meros tushunchasi mavjud. Bu prototiplash usulidan foydalangan holda. Siz ES5, ES6-da ko'rgan barcha yangi sinf sintaksisi faqat prototipik OOP uchun sintaktik shakar qoplamasidir. Sinf yaratish JavaScript-dagi funktsiya yordamida amalga oshiriladi.

var AnimalGroups = {
  MAMMAL: 1,
  Qayta tiklanish: 2,
  AMFIYA: 3,
  INVERTEBRAT: 4
};
funktsiya Animal (nomi, turi) {
  this.name = ism;
  this.type = turi;
}
var dog = yangi hayvon ("it", animalGroups.MAMMAL);
var timsoh = yangi hayvon ("timsoh", animalGroups.REPTILE);

Bu erda biz sinf uchun ob'ektlar yaratmoqdamiz (yangi kalit so'z yordamida). Bunda berilgan sinf (funktsiya) uchun usullarni qo'shishimiz mumkin. Shunga o'xshash sinf usulini biriktiring.

Animal.prototype.shout = funktsiya () {
    console.log (this.name + 'bu' + this.sound + 'ing ...');
}

Bu erda siz shubhalanishingiz mumkin. Sinfda tovush xususiyati yo'q. Ha! deyarli aniq bir mulk xususiyatini aniqlab bo'lmaydi. Bu sinfdan yuqorida meros qolgan bolalar sinflari tomonidan o'tishi uchun mo'ljallangan.

JavaScript-da bu kabi merosga erishiladi.

funktsiya Dog (nomi, turi) {
   Animal.call (bu, nomi, turi);
   this.sound = "kamon";
}

Men Dog deb nomlangan yana bir aniq funktsiyani aniqladim. Bu erda, Animal sinfini meros qilib olish uchun, biz ushbu va boshqa dalillarni topshirish bilan qo'ng'iroq funktsiyasini bajarishimiz kerak (biz buni oldinroq muhokama qilgan edik). Biz bunday nemis Shepardni qo'zg'ashimiz mumkin.

var pet = Dog ("germanShepard", animalGroups.MAMMAL);
konsol.log (uy hayvonlari); // itni qaytaradi {nomi: "germanShepard", turi: 1, ovoz: "ta'zim"}

Biz bola funktsiyasiga nom va turni tayinlamaymiz, biz "Animal" funktsiyasini chaqiramiz va tegishli xususiyatlarni o'rnatamiz. Uy hayvonlari ota-onaning xususiyatlariga (nomi, turi) ega. Ammo usullar haqida nima deyish mumkin. Ular ham meros bo'lib qoldimi? Ko‘ramiz!

pet.shout (); // Xatoni tashlaydi

Nima? nega bunday bo'ldi? Bu biz ota-sinf usullarini meros qilib olish uchun JavaScript-ni aytmaganligimiz sababli ro'y beradi. Buni qanday tuzatish kerak?

// Prototip zanjirlarini bog'lash
Dog.prototype = Object.create (Animal.prototype);
var pet = yangi it ("germanShepard", animalGroups.MAMMAL);
// Endi baqirish usuli mavjud
pet.shout (); // germanShepard ta'zim qilmoqda ...

Endi baqirish usuli mavjud. Object.constructor funktsiyasidan foydalanib JavaScript-da ob'ektning sinfi qanday ekanligini tekshirishimiz mumkin. Keling, uy hayvonining sinfini tekshirib ko'raylik.

pet.constructor; // Hayvonni qaytaradi

Bu noaniq. Hayvon ota-ona sinfidir. Ammo uy hayvonining qaysi turi aniq? Bu it turi. Bu Dog sinfining konstruktori tufayli ro'y beradi.

Dog.prototype.constructor; // Hayvonni qaytaradi

Bu hayvon. Sinfning barcha holatlari (ob'ektlari) tegishli bo'lgan tegishli sinf nomini berishlari uchun biz uni Dog sinfiga o'rnatishimiz kerak.

Dog.prototype.constructor = It;

Prototipik meros haqida eslashingiz kerak bo'lgan bu to'rt narsa.

  • Sinf xossalari bundan foydalanadi
  • Sinf usullari prototip ob'ekti yordamida bog'langan
  • Xususiyatlarni meros qilib olish uchun ushbu ob'ektdan o'tadigan qo'ng'iroq funktsiyasidan foydalaning
  • Usullarni meros qilib olish uchun Ota va bola prototiplarini bog'lash uchun Object.create-dan foydalaning
  • Ob'ektlarning to'g'ri identifikatsiyasini olish uchun har doim bolalar sinf konstruktorini o'ziga qo'ying

Eslatma: Bular narsalar hatto yangi sinf sintaksisida ham kaput ostida sodir bo'ladi. Buni bilish sizning JS bilimingiz uchun juda muhimdir.

JS-da qo'ng'iroq funktsiyasi va prototip ob'ekti meros bo'lib xizmat qiladi

7) Qayta qo'ng'iroqlarni va va'dalarni yaxshi tushuning

Callback - bu kirish / chiqish operatsiyasidan so'ng bajariladigan funktsiyalar. I / O operatsiyasini olish vaqtini blokirovka qilishi mumkin, Python / Ruby-da keyingi ishlashga imkon bermaydi. Ammo JavaScript-da, asinxron ishlashga ruxsat berilganligi sababli, biz async funktsiyalariga qo'ng'iroqlarni amalga oshirishimiz mumkin. Bunga misol - brauzerdan serverga AJAX (XMLHttpRequest) qo'ng'irog'i, sichqoncha tomonidan yaratilgan hodisalar. klaviatura va boshqalar. Masalan

funktsiya reqListener () {
  console.log (this.responseText);
}

var req = yangi XMLHttpRequest ();
req.addEventListener ("yuk", reqListener);
req.open ("Olish", "http://www.example.org/example.txt");
req.send ();

Bu erda reqListener - bu GET so'rovi muvaffaqiyatli javob berilganda bajariladigan qayta qo'ng'iroq.

Qayta qo'ng'iroqlarni amalga oshirish uchun va'dalar - bu bizga asinxron kodni oqlangan qilish imkonini beradi. Men bu erda va'dalar haqida ko'p muhokama qildim. Bu, shuningdek, JSda ma'lum bo'lishi kerak bo'lgan muhim qismdir.

8) Muntazam iboralarni yaxshi tushuning

Doimiy iboralar ko'plab dasturlarga ega. Matnni qayta ishlash, foydalanuvchi kiritish qoidalarini bajarish va hk. JavaScript dasturchisi asosiy Regex-ni qanday bajarishni va muammolarni hal qilishni bilishi kerak. Regex universal tushunchadir. Buni JS-dan qanday qilib amalga oshirishimiz mumkinligini ko'rib chiqdik.

Buning yordamida yangi oddiy iborani yaratishimiz mumkin

var re = / ar /;
var re = yangi RegExp ('ar'); // Bu ham ishlaydi

Yuqoridagi oddiy ibora berilgan qatorlar to'plamiga mos keladigan ibora. Registr aniqlangandan so'ng, biz mos keladigan satrni o'rnatishga va ko'rishga harakat qilishimiz mumkin. biz exec funktsiyasidan foydalangan holda satrlarni moslashimiz mumkin.

re.exec ("mashina"); // qaytaradi ["ar", indeks: 1, kiritish: "mashina"]
re.exec ("taksi"); // null qaytaradi

Murakkab oddiy iboralarni yozishga imkon beradigan maxsus belgilar sinflari kam.

RegEx-da elementlarning ko'p turlari mavjud. Ulardan ba'zilari:

  • Masalan: \ w - harf-raqam, \ d - o'nli, \ D - o'nli bo'lmagan belgilar
  • Belgilar sinflari Masalan: [x-y] x dan y oralig'ida, [^ x] emas x
  • Ex Quantifiers: +,?, * (Ochko'z va dangasa o'yinchilar)
  • Chegaralar: ^ (kirish boshlanishi), $ (kirish oxirida)

Yuqoridagi narsalardan foydalanib, bir nechta misollarni keltiraylik.

/ * Belgilar sinfi * /
var re1 = / [AEIOU] /;
re1.exec ("Oval"); // qaytaradi ["O", indeks: 0, kiritish: "Oval"]
re1.exec ("2456"); // null
var re2 = / [1-9] /;
re2.exec ('mp4'); // qaytaradi ["4", indeks: 2, kiritish: "mp4"]
/ * Belgilar * /
var re4 = / \ d \ D \ w /;
re4.exec ('1232W2sdf'); // qaytaradi ["2W2", indeks: 3, kiritish: "1232W2sdf"]
re4.exec ('W3q'); // null qaytaradi
/ * Chegaralar * /
var re5 = / ^ \ d \ D \ w /;
re5.exec ('2W34'); // qaytaradi ["2W3", indeks: 0, kiritish: "2W34"]
re5.exec ('W34567'); // null qaytaradi
var re6 = / ^ [0-9] {5} - [0-9] {5} - [0-9] {5} $ /;
re6.exec ('23451-45242-99078'); // qaytadi ["23451-45242-99078", indeks: 0, kiritish: "23451-45242-99078"]
re6.exec ('23451-abcd-efgh-ijkl'); // null qaytaradi
/ * Miqdorlar * /
var re7 = / \ d + \ D + $ /;
re7.exec ('2abcd'); // qaytadi ["2abcd", indeks: 0, kiritish: "2abcd"]
re7.exec ('23 '); // null qaytaradi
re7.exec ('2abcd3'); // null qaytaradi
var re8 = /<( zo'rg'a yutuqli+).*>(.*?)<\/\1>/;
re8.exec ('

Salom JS dasturchisi

'); // qaytadi ["

Salom JS dasturchisi

", "p", "Salom JS dasturchisi", indeks: 0, kiritish: "

Salom JS dasturchisi

"]

Regex haqida ko'proq ma'lumot olish uchun ushbu cheatsheet sahifasidan o'ting.

Exec bilan bir qatorda, oddiy iboralardan foydalanib, boshqa qatorda satr topish uchun moslashish, qidirish va almashtirishning boshqa funktsiyalari mavjud. Ammo bu funktsiyalar satrning o'zida ishlatilishi kerak.

"2345-678r9" .match (/ [a-z A-Z] /); // qaytaradi ["r", indeks: 8, kiritish: "2345-678r9"]
"2345-678r9" .replace (/ [a-z A-Z] /, ""); // 2345-6789 ni qaytaradi

Regex - bu murakkab muammolarni osonlikcha hal qilish uchun ishlab chiquvchilar tushunishi kerak bo'lgan muhim mavzu.

9) Xaritani tushunish, qisqartirish va yaxshi filtrlash

Funktsional dasturlash bu kunlarda muhokama mavzusi. Ko'plab dasturlash tillari lambdalar kabi funktsional tushunchalarni o'zlarining yangi versiyalariga kiritadilar (Masalan: Java> 7). Funktsional dasturlash uchun JavaScript-ni qo'llab-quvvatlash uzoq vaqtdan beri mavjud. Biz chuqur o'rganishimiz kerak bo'lgan uchta asosiy funktsiya mavjud. Matematik funktsiyalar ba'zi kirish va qaytish natijalarini oladi. Sof funktsiya har doim berilgan kirish uchun bir xil natijani qaytaradi. Hozir muhokama qilayotgan funktsiyalar ham poklikni qondiradi.

xaritasi

Xarita funktsiyasi JavaScript massivida mavjud. Ushbu funktsiyadan foydalanib, massivdagi har bir elementga o'zgartirish funktsiyasini qo'llash orqali yangi massivni olishimiz mumkin. JS massiv xaritasi ishlashi uchun umumiy sintaksis:

arr.map ((elem) {
    jarayon (elem)
    Qayta ishlangan Value
}) // har bir element qayta ishlangan yangi massivni qaytaradi

Yaqinda biz ishlaydigan ketma-ket kalitlarga kiruvchi belgilar soni ozgina qo'shildi deylik. Biz ularni olib tashlashimiz kerak. Belgini iteratsiya va topish orqali olib tashlash o'rniga, xuddi shu operatsiyani bajarish va natijalar qatorini olish uchun xaritadan foydalanishimiz mumkin.

var data = ["2345-34r", "2e345-211", "543-67i4", "346-598"];
var re = / [a-z A-Z] /;
var tozlanganData = data.map ((elem) => {return elem.replace (re, "")});
console.log (tozalangan ma'lumotlar); // ["2345-34", "2345-211", "543-674", "346-598"]

Izoh: Biz JavaScript ES6-da funktsiyani aniqlash uchun strelkali sintaksisdan foydalanganmiz

Xarita argument vazifasini bajaradi. Ushbu funktsiya argumentga ega. Ushbu dalil qatordan olingan. Biz qayta ishlangan elementni qaytarishimiz kerak va bu massivning barcha elementlariga tegishli bo'ladi.

kamaytirish

Kamaytirish funktsiyasi berilgan ro'yxatni bitta yakuniy natijaga kamaytiradi. Massivni takrorlash va oraliq natijani o'zgaruvchiga saqlash orqali biz ham xuddi shunday qilishimiz mumkin. Ammo bu erda massivni qiymatga kamaytirishning eng toza usuli. JS qisqartirish operatsiyasining umumiy sintaksisi:

arr.reduce ((akkumulyator,
           joriy qiymat,
           currentIndex) => {
           jarayon (akkumulyator, joriy qiymat)
           return intermediateValue / finalValue
}, initialAccumulatorValue) // kamaytirilgan qiymatni qaytaradi

Akkumulyator oraliq va yakuniy qiymatni saqlaydi. CurrentIndex, currentValue indeks va mos ravishda massivdan element qiymati. initialAccumulatorValue bu qiymatni akkumulyator argumentiga o'tkazadi.

Kamaytirish uchun bitta amaliy dastur qatorlarni tekislash bo'lishi mumkin. Flattening ichki massivlarni bitta massivga aylantirishdir. Masalan:

var arr = [[1, 2], [3, 4], [5, 6]];
var flattenedArray = [1, 2, 3, 4, 5, 6];

Biz bunga normal iteratsiya orqali erishishimiz mumkin. Ammo qisqartirishdan foydalanib, bu to'g'ri koddir. Sehrli!

var flattenedArray = arr.reduce ((akkumulyator, joriy qiymat) => {
    qaytish akkumulyator.concat (currentValue);
}, []); // qaytadi [1, 2, 3, 4, 5, 6]

filtri

Bu funktsional dasturlash tushunchasining uchinchi turi. Xaritaga juda yaqin, chunki u massivdagi har bir elementni qayta ishlaydi va nihoyat boshqa qatorni qaytaradi (kamaytirish kabi qiymat qaytarmaydi). Filtrlangan massiv uzunligi asl massivdan kichik yoki unga teng bo'lishi mumkin. Biz o'tkazadigan filtrlash holati chiqish qatoriga bir nechta / nol kiritishni istisno qilishi mumkin. JS filtri ishlashi uchun umumiy sintaksis:

arr.filter ((elem) => {
   true / false ni qaytaring
})

Bu erda element massivning ma'lumotlar elementi bo'lib, filtrlangan elementni kiritish / chiqarib tashlashni ko'rsatish uchun funktsiyadan haqiqiy / noto'g'ri qiymat qaytarilishi kerak. Umumiy misol - bu berilgan shartlar bilan boshlanadigan va tugaydigan so'zlar qatorini filtrlash. Aytaylik, biz t bilan boshlanadigan va r bilan tugaydigan bir qator so'zlarni filtrlashimiz kerak.

var so'zlari = ["yo'lbars", "tost", "qayiq", "o'simta", "trek", "ko'prik"]
var newData = so'zlar.filter ((elem) => {
   elem.startsWith ('t') && elem.endsWith ('r') ni qaytarasizmi? haqiqiy: noto'g'ri;
}); // qaytadi ["yo'lbars", "o'simta"]

Kimdir sizdan JavaScript-ning funktsional dasturlash jihatlari haqida so'rasa, ushbu uchta funktsiya sizning qo'lingizda bo'lishi kerak. Ko'rib turganingizdek, ushbu funktsiyalarning tozaligini isbotlaydigan har uch holatda ham dastlabki qator o'zgarmaydi.

10) naqshlarni qayta ishlashda xatolarni tushunish

Bu ko'plab ishlab chiquvchilar tomonidan JavaScript-ning ahamiyatsiz parchasi. Men xatolar bilan ishlov berish haqida gapiradigan juda oz sonli ishlab chiquvchilarni ko'rmoqdaman. Yaxshi rivojlanish usuli har doim ehtiyotkorlik bilan JS kodini sinab ko'rish / tutish bloklariga o'rashdir.

Nikolay Zakas, Yahoo-ning UI muhandisi, 2008 yilda shunday degan edi: "Har doim kodingiz ishdan chiqadi. Hodisalar to'g'ri bajarilmasligi mumkin! Ularni serverga yozib qo'ying. O'z xatolaringni tashla. ”

Biz tasodifiy kodni kiritganimizda, JavaScript-da ishlamay qolishi mumkin. Masalan:

$ ("tugma") ni bosing. (funktsiya () {
    $ .ajax ({url: "user.json", muvaffaqiyat: funktsiya (natija) {
        updateUI (natija ["xabarlar"]);
    }});
});

Bu erda biz tuzoqqa tushmoqdamiz, natijalar har doim JSON ob'ekti bo'ladi. Ba'zan server ishdan chiqishi mumkin va natija o'rniga null qaytariladi. Bunday holda, null ("postlar") xato qiladi. To'g'ri ishlash bu bo'lishi mumkin!

$ ("tugma") ni bosing. (funktsiya () {
    $ .ajax ({url: "user.json", muvaffaqiyat: funktsiya (natija) {
    
      urinib ko'ring {
        updateUI (natija ["xabarlar"]);
       }
      qo'lga olish (e) {
        // Maxsus funktsiyalar
        logError ();
        flashInfoMessage ();
      }
    }});
});

LogError funktsiyasi xato haqida serverga xabar berish uchun mo'ljallangan. Ikkinchi vazifa FlashInfoMessage - "Xizmat hozirda mavjud emas" va hokazo kabi foydalanuvchilarga qulay xabarni namoyish etuvchi funktsiya.

Nikolayning aytishicha, kutilmagan narsa yuz berganda his qilasiz, xatolarni qo'l bilan tashlang. O'lim va o'limga olib kelmaydigan xatolarni farqlang. Yuqoridagi xato halokatli bo'lgan pastga tushadigan server serveri bilan bog'liq. U erda siz xaridorga biron bir sababga ko'ra xizmat to'xtatilganligi to'g'risida xabar berishingiz kerak. Ba'zi hollarda, o'limga olib kelmasligi mumkin, ammo bu haqda xabardor qilish yaxshiroqdir. Bunday kodni yaratish uchun birinchi navbatda xatoga yo'l qo'ying, uni ob'ekt ob'ekti darajasida xato xodisasi bilan ushlang, so'ngra ushbu xabarni serverga kirish uchun API qo'ng'iroq qiling.

reportErrorToServer = funktsiya (xato) {
  $ .ajax ({turi: "POST",
          URL manzili: "http://api.xyz.com/report",
          ma'lumotlar: xato,
          muvaffaqiyat: funktsiya (natija) {}
  });
}
// Oynadagi xato hodisasi
windows.addEventListener ('xato', funktsiya (e) {
  reportErrorToServer ({xabar: e.message})
})}
funktsiya mainLogic () {
  // Qaerdadir o'zingizni baliqday his qilasiz
  yangi xato tashlash ("foydalanuvchi tasmalari kutilganidan kam maydonlarga ega ...");
}

Ushbu kod asosan uchta narsani bajaradi:

  1. Deraza darajasida xatolarni tinglang
  2. Xatolik yuz berganda, API qo'ng'iroqini qiling
  3. Serverda ro'yxatdan o'ting!

Davom etishdan oldin o'zgaruvchining haqiqiyligini va nol (yoki) aniqlanmaganligini tekshirish uchun siz yangi Boolean funktsiyasidan (ES5, ES6) foydalanishingiz mumkin.

if (Boolean (ba'zi o'zgaruvchan)) {
// hozir o'zgaruvchini ishlatish
} else {
    yangi xatoni tashlash ("Maxsus xabar")
}

Har doim xatolarni qanday hal qilishni brauzerda emas, balki o'zingiz o'ylab ko'ring. Ishlar muvaffaqiyatsiz bo'lishi mumkin!

Bilish kerak bo'lgan boshqa narsalar (yuk ko'tarish, hodisalarni puflash)

Yuqorida keltirilgan barcha tushunchalar JavaScript tuzuvchisi uchun asosiy hisoblanadi. Ular haqiqatan ham foydali bo'lishi mumkinligini bilish uchun ichki tafsilotlar kam. Brauzerda JavaScript mexanizmi qanday ishlaydi. Yuk ko'tarish va hodisalarni puflash nima?

Yuk ko'tarish

Yuk ko'tarish - bu e'lon qilingan o'zgaruvchilarni dasturning yuqori qismiga surish jarayoni. Masalan:

doSomething (foo); oldin ishlatilgan
var foo; // keyinroq e'lon qilingan

Agar siz Python singari skriptlash tilida yuqoridagi ishni qilsangiz, xato bo'ladi. Avval siz uni aniqlab, ishlatishingiz kerak. Garchi JS skript tili bo'lsa ham, uni ko'tarish mexanizmi mavjud. Ushbu mexanizmda JavaScript VM dasturni ishga tushirishda ikkita narsani amalga oshiradi:

  1. Avval dasturni skanerlang, barcha o'zgaruvchilar va funktsiyalar to'g'risidagi deklaratsiyalarni to'plang va buning uchun xotira joylarini tayinlang.
  2. Endi biron bir tayinlangan o'zgarmas qiymatlarni to'ldirish orqali dasturni ishga tushiring, agar bo'lmasa, aniqlanmagan

Yuqoridagi kod parchasida, console.log "aniqlanmagan" ni bosib chiqaradi. Chunki birinchi o'tish paytida o'zgaruvchan foo yig'iladi. VM o'zgaruvchan foo uchun belgilangan har qanday qiymatni qidiradi. Ushbu ko'tarish ko'plab JavaScript kodlariga olib kelishi mumkin, bu erda ba'zi joylarda kodlar xatolarga yo'l qo'yishi mumkin va boshqa joyda aniqlanmagan tovushsiz ishlatiladi. Siz noaniqlikni tozalash uchun ko'tarilishni bilishingiz kerak! Bir nechta misollarga qarang!

Voqealar puflanishi

Endi voqea puflayapti! Arun Pning so'zlariga ko'ra, katta dastur muhandisi:

"Voqealar puflanishi va yozib olinishi - boshqa element ichidagi biron bir elementda voqea sodir bo'lganida, HTML DOM API-da hodisalarni tarqatishning ikki usuli va ikkala element ham ushbu voqea uchun ishlov beruvchini ro'yxatdan o'tkazgan. Hodisani targ'ib qilish rejimi voqealarni qaysi tartibda olishni belgilaydi. "

Puflash bilan hodisa dastlab ichki element tomonidan ushlanib, ishlov beriladi, so'ngra tashqi elementlarga tarqaladi. Rasmga tushirish bilan jarayon teskari. Odatda biz addEventListener funktsiyasidan foydalangan holda ishlov beruvchiga hodisani biriktiramiz.

addEventListener ("cherting", ishlov beruvchi, useCapture = noto'g'ri)

Uchinchi argument useCapture bu kalit. Standart qiymat noto'g'ri Shunday qilib, bu qabariq model bo'ladi, unda voqea avval ichki element tomonidan ko'rib chiqiladi va u ota elementga etib borguncha tashqariga tarqaladi. Agar bu dalil haqiqat bo'lsa, u namunani jalb qiladi.

Masalan: pufakchali model

    
            
  •     

Ro'yxat elementini bosganimizda, ishlov beruvchilarning ishlash tartibi buyruq (standart) modelda bo'lgani kabi bo'ladi.

ishlov beruvchi () => ulHandler () => divHandler ()

Diagrammada ishlov beruvchilar ketma-ket tashqariga qarab o'q otishadi. Shunga o'xshab, tortib olish modeli voqealarni ota-onadan bosilgan elementga o'tkazishga harakat qiladi. Endi yuqoridagi kodda ushbu bitta satrni o'zgartiring.

document.getElementById ("foo"). addEventListener ("cherting", ishlov beruvchi, haqiqiy)

Keyin ishlov beruvchilarning ishlash tartibi quyidagicha bo'ladi:

divHandler => ulHandler () => ishlov beruvchi ()

Siz istalmagan xatti-harakatlarning oldini olish uchun foydalanuvchi interfeyslarini (UI) to'g'ri ishlatish uchun voqea puflanishini (ota-onaga yoki bolaga yo'naltirilganmi) to'g'ri tushunishingiz kerak.

Bular JavaScript-dagi asosiy tushunchalar. Avval aytib o'tganimdek, ularga qo'shimcha ravishda sizning ish tajribangiz va bilimingiz, tayyorgarlik sizga JavaScript suhbatini yoritishga yordam beradi. Doim o'rganishni davom eting. So'nggi yangiliklarni (ES6) kuzatib boring. V6 dvigateli, testlar va hk kabi JavaScript-ning turli jihatlarini chuqurroq o'rganing. Bu erda sizga ko'p narsalarni o'rgatadigan bir nechta video manbalar mavjud. Va nihoyat, ma'lumotlar tuzilmalari va algoritmlarni o'zlashtirmasdan, biron bir intervyu muvaffaqiyatli bo'lmaydi. Oleksii Trexleb JS kodli intervyuga tayyorgarlikning barcha algoritmlaridan tashkil topgan ajoyib repo repattsiyasini o'tkazdi. Ulardan o'ting.

Agar sizga ushbu maqola yoqsa, rahmat! Siz meni @ Narenarya3 da kuzatib borishingiz mumkin

Menga qahva sotib olishni xohlayman!

Adabiyotlar: