Qachon (va nima uchun) siz ES6 strelka funktsiyalaridan foydalanishingiz kerak va qachon bo'lmasin

Ok funktsiyalari (shuningdek, "semiz strelka funktsiyalari" deb nomlanadi), shubhasiz ES6-ning eng mashhur xususiyatlaridan biridir. Ular qisqa funktsiyalarni yozishning yangi usulini taqdim etdilar.

Bu erda ES5 sintaksisida yozilgan funktsiya mavjud:

funktsiya martaTwo (parametrlar) {
  qaytish parametrlari * 2
}
martaTwo (4); // 8

Endi, bu erda strelka funktsiyasi bilan ifodalangan bir xil funktsiya:

var timesTwo = params => params * 2
martaTwo (4); // 8

Bu juda qisqa! Belgilangan qaytish tufayli biz jingalak qavslarni va qaytish bayonotini olib tashlay olamiz (lekin hech qanday blok yo'q bo'lsa - quyida bu haqida ko'proq).

O'q funktsiyasi odatdagi ES5 funktsiyalariga nisbatan boshqacha harakat qilishini tushunish muhimdir.

O'zgarishlar

Xilma-xillik - bu hayotning ziravoridir

Siz tezda sezadigan bir narsa - bu o'q funktsiyalarida mavjud bo'lgan sintaksislarning xilma-xilligi. Keling, ba'zi keng tarqalganlarni ko'rib chiqaylik:

1. Parametrlar yo'q

Agar parametrlar bo'lmasa, siz bo'sh qavslarni qo'yishingiz mumkin =>.

() => 42

Aslida, siz hatto qavslarga ham muhtoj emassiz!

_ => 42

2. Yagona parametr

Ushbu funktsiyalar bilan qavslar ixtiyoriy:

x => 42 || (x) => 42

3. Ko'p parametrlar

Ushbu funktsiyalar uchun qavslar talab qilinadi:

(x, y) => 42

4. Bayonotlar (iboralardan farqli o'laroq)

Uning eng asosiy shaklida funktsiya ifodasi qiymatni hosil qiladi, funktsiya to'g'risida esa harakat bajariladi.

O'q funktsiyasi bilan, iboralar jingalak qavslarga ega bo'lishi kerakligini yodda tutish kerak. Jingalak qavslar mavjud bo'lganda, siz ham qaytishni yozishingiz kerak.

Bu erda if if bilan ishlatilgan strelka funktsiyasiga misol:

var feedTheCat = (mushuk) => {
  if (mushuk === "och") {
    return 'mushukni boqish';
  } else {
    return 'Mushukni ovqatlantirmang';
  }
}

5. "Tana bloki"

Agar sizning funktsiyangiz blokda bo'lsa, siz shuningdek aniq qaytish bayonotidan foydalanishingiz kerak:

var addValues ​​= (x, y) => {
  x + y ni qaytaring
}

6. Ob’ekt adabiyoti

Agar siz ob'ektni so'zma-so'z qaytarayotgan bo'lsangiz, uni qavs ichiga o'ralgan bo'lishingiz kerak. Bu tarjimonni qavs ichida nima borligini baholashga majbur qiladi va ob'ekt tom ma'noda qaytariladi.

x => ({y: x})

Sintaktik jihatdan anonim

Shuni ta'kidlash kerakki, strelka funktsiyalari noma'lum, ya'ni ular nomlanmagan.

Ushbu anonimlik ba'zi muammolarni keltirib chiqaradi:

  1. Tuzatish qiyinroq

Xatolik yuz berganda, siz funktsiyaning nomini yoki u sodir bo'lgan chiziq raqamini aniqlay olmaysiz.

2. O'z-o'zidan murojaat qilinmaydi

Agar sizning funktsiyangiz istalgan vaqtda o'z-o'zidan ma'lumotga ega bo'lishi kerak bo'lsa (masalan, rekursiya, ajratib qo'yilishi kerak bo'lgan voqealarni qayta ishlash vositasi), u ishlamaydi.

Asosiy foyda: "bu" majburiy emas

Surat davide ragusa Unsplash-da

Klassik funktsiya iboralarida ushbu kalit so'z chaqiriladigan kontekst asosida turli xil qiymatlarga bog'langan. Biroq o'q vazifalari bilan bu leksik jihatdan bog'langan. Bu o'q vazifasini o'z ichiga olgan koddan usesthis degan ma'noni anglatadi.

Masalan, quyidagi setTimeout funktsiyasiga qarang:

// ES5
var obj = {
  id: 42,
  counter: function counter () {
    setTimeout (funktsiya () {
      console.log (this.id);
    } .bind (bu), 1000);
  }
};

ES5 misolida ushbu kontekstni funktsiyaga o'tkazish uchun .bind (bu) talab qilinadi. Aks holda, sukut bo'yicha bu aniqlanmaydi.

// ES6
var obj = {
  id: 42,
  counter: function counter () {
    setTimeout (() => {
      console.log (this.id);
    }, 1000);
  }
};

ES6 strelka funktsiyalari ushbu kalit so'z bilan bog'lanishi mumkin emas, shuning uchun u leksik ravishda kengayadi va uning qiymatini u belgilangan doirada ishlatadi.

Ok funktsiyalaridan foydalanmaslik kerak bo'lganda

O'q funktsiyalari haqida bir oz ko'proq ma'lumotga ega bo'lganingizdan so'ng, ular odatdagi funktsiyalarni almashtirmasligini tushunasiz deb umid qilaman.

Siz ulardan foydalanishni xohlamasligingiz mumkin bo'lgan ba'zi misollar:

  1. Ob'ekt usullari

Siz cat.jumps deb nomlaganingizda, hayotlar soni kamaymaydi. Bu hech narsa bilan bog'lanmaganligi sababli va uning qiymatini ota-ona doirasidan meros qilib oladi.

var cat = {
  yashaydi: 9,
  sakrashlar: () => {
    this.lives--;
  }
}

2. Dinamik kontekstda qayta qo'ng'iroq qilish funktsiyalari

Agar sizning kontekstingiz dinamik bo'lishi uchun sizga kerak bo'lsa, o'q vazifalari to'g'ri tanlov emas. Quyida ushbu tadbirlarni qayta ko'rib chiquvchini ko'rib chiqing:

var tugmasi = document.getElementById ('press');
button.addEventListener ('cherting', () => {
  this.classList.toggle ('yoqilgan');
});

Agar biz tugmani bossak, biz TypeError-ni olamiz. Chunki bu tugmachaga bog'lanmagan, aksincha uning ota-ona doirasiga bog'langan.

3. U sizning kodingizni kamroq o'qiladigan holga keltirganda

Avvalroq biz ko'rib chiqqan sintaksisning xilma-xilligini hisobga olish kerak. Doimiy funktsiyalar bilan odamlar nimani kutishlarini bilishadi. O'q funktsiyalari yordamida darhol qarab turgan narsangizni aniqlash qiyin bo'lishi mumkin.

Qachon ularni ishlatishingiz kerak

Ok funktsiyalari bu funktsiyaning o'zi emas, balki kontekst bilan bog'lanishini talab qiladigan har qanday narsa bilan eng yaxshi porlaydi.

Ular anonim bo'lishlariga qaramay, men ularni xaritalar va kamaytirish kabi usullardan foydalanishni yaxshi ko'raman, chunki bu mening kodimni o'qishga imkon beradi. Menga nisbatan ijobiy tomonlardan ustun.

Mening maqolamni o'qiganingiz uchun rahmat va agar sizga yoqsa, qarsak chaling! Pomodoro Clock ilovasini qanday yaratganligim va yo'l davomida o'rgangan darslarim kabi maqolalarimni ko'rib chiqing va JavaScript-ning "yangi" kalit so'zini demistifikatsiya qilaylik.