Sizga yoqadigan JavaScript-ga uchta yaqinda kiritilgan o'zgarishlar

Keling, JavaScript-dagi ba'zi foydali xususiyatlarni ko'rib chiqaylik. Siz ularning sintaksisini, ularning taraqqiyoti haqida xabardor bo'lish uchun havolalarni ko'rasiz va biz bugungi kunda ushbu takliflardan qanday foydalanishni boshlashni ko'rsatadigan kichik test to'plamini yozamiz.

JavaScript qanday o'zgaradi

Agar siz Ecma TC39 qo'mitasining qarorini qabul qilsangiz va JavaScript tiliga o'zgartirishlar kiritishni oldindan bilsangiz, ushbu qismni o'tkazib yuborishingiz mumkin.

JavaScript dasturlash tili qanday rivojlanishini bilmoqchi bo'lganlar uchun, men bu jarayon haqida qisqacha ma'lumot bermoqchiman.

JavaScript bu veb-brauzerlarning dastlabki yillarida paydo bo'lganligi sababli tilning barcha qo'llanilishlarini standartlashtirish uchun yaratilgan ECMAScript nomli til standartining tatbiqi.

ECMAScript standartining sakkizta nashri mavjud bo'lib, ularning ettitasi chiqarilgan (to'rtinchi nashr bekor qilingan).

Har bir JavaScript mexanizmi har bir chiqarilganidan keyin ko'rsatilgan o'zgarishlarni amalga oshirishni boshlaydi. Ushbu jadval har bir vosita har bir xususiyatni amalga oshiravermasligini va ba'zi dvigatellar ushbu xususiyatlarni amalga oshirish uchun boshqalariga qaraganda ko'proq vaqt talab qilishini ko'rsatadi. Garchi bu juda maqbul ko'rinishi mumkin bo'lsa-da, menimcha, bu umuman standart bo'lmaganidan afzal!

Takliflar

Har bir ECMAScript nashri takliflarni tekshirish jarayonidan o'tadi. Agar taklif foydali va orqaga mos bo'lsa, u keyingi nashrga kiritiladi.

Takliflar ushbu hujjatda keltirilgan besh bosqichdan iborat. Har bir taklif dastlab "somonchi" yoki 0-bosqichdan boshlanadi. Ushbu darajada, ular hali texnik qo'mitaga taqdim etilmagan yoki ular hali rad etilmagan, ammo hali ham keyingi bosqichga o'tish mezonlariga javob bermaganlar.

Quyida keltirilgan takliflarning hech biri 0-bosqichga kiritilmagan.

Shaxsiy tavsiyanoma sifatida men o'quvchilarni bosqichli 0 takliflarini ishlab chiqarish ilovalarida kamroq o'zgaruvchan bosqichga o'tguncha ishlatmaslikka undashni istayman. Ushbu tavsiyanomaning maqsadi shunchaki taklif tark etilganda yoki tubdan o'zgartirilganda sizni qiyinchiliklardan xalos qilishdir.

Sinov to'plami

Dasturlash funktsiyalari bilan tanishish ko'pincha kod parchalarini kontekstdan tashqarida ko'rsatadi yoki dasturni tuzishda ushbu funktsiyalardan foydalanadi. Men TDD-ning katta muxlisi bo'lganim sababli, xususiyatning nima ekanligini o'rganishning eng yaxshi usuli - bu sinovdir.

Buni amalga oshirish uchun biz Jim Nyukirkni o'rganish testlari sifatida foydalangan narsalardan foydalanamiz. Biz yozgan testlar o'zimizning kodimiz haqida emas, balki dasturlash tilining o'zi to'g'risida ishonch hosil qiladi. Xuddi shu tushuncha uchinchi tomon API yoki boshqa til xususiyatlarini o'rganishda foydali bo'lishi mumkin.

Transpillerlar

Agar siz transpillerlar bilan tanish bo'lsangiz, ushbu qismni o'tkazib yuborishingiz mumkin.

Ba'zilaringiz, biz hali amalga oshirilmagan til xususiyatlaridan qanday foydalanamiz, deb hayron bo'lishlari mumkin!

JavaScript, bu doimo rivojlanib borayotgan til bo'lib, JavaScript-ni JavaScript-ni tuzadigan bir nechta tarjimonlar bilan birga keladi. Sirtda bu juda foydali ko'rinmasligi mumkin, ammo ishontirib aytamanki, bu sizga yordam beradi!

Bu bizga JavaScript-ning eng so'nggi versiyasini, shu jumladan bosqich-0 takliflarini ham yozishga imkon beradi va hanuzgacha uni veb-brauzerlar va Node.js kabi muhitda bajarishga imkon beradi. Buni bizning kodimizni eski JavaScript versiyasi uchun yozilgan kabi o'zgartirish orqali amalga oshiradi.

Eng mashhur JavaScript translyatorlaridan biri bu Babel. Biz uni bir daqiqada ishlatamiz.

Sozlash

Agar siz kod bilan birga borishni istasangiz, unda bepul bo'ling. Siz bir npm loyihasini o'rnatishingiz va kerakli qaramlikni o'rnatishingiz kerak bo'ladi.

Sizga Node.js va NPM dasturlari o'rnatilishi kerak.

Buni amalga oshirish uchun siz quyidagi buyruqni yangi katalogda ishlatishingiz mumkin:

npm init -f && npm i ava@1.0.0-beta.3 @ babel / preset-env @ 7.0.0-beta.42 @ babel / oldindan belgilangan bosqich-0 @ 7.0.0-beta.42 @ babel / ro'yxatdan o'ting @ 7.0.0-beta.42 @ babel / polyfill @ 7.0.0-beta.42 @ babel / plagin-transform-ish vaqti @ 7.0.0-beta.42 @ babel / ish vaqti @ 7.0.0-beta.42 - saqlash-dev

Keyin pack.json faylingizga quyidagilarni qo'shishni xohlaysiz:

"skriptlar": {
  "sinov": "ava"
},
"ava": {
  "talab qilish": [
    "@ babel / ro'yxatdan o'ting",
    "@ babel / polyfill"
  ]
}

Va nihoyat .babelrc faylini yarating:

{
  "oldindan sozlash": [
    ["@ babel / preset-env", {
      "maqsadlar": {
        "tugun": "hozirgi"
      }
    }],
    "@ babel / oldindan belgilab qo'yilgan bosqich-0"
  ],
  "plaginlar": [
    "@ babel / plagin-transform-ish vaqti"
  ]
}

Endi siz bir nechta testlarni yozishga tayyormiz!

1. Ixtiyoriy zanjir

JavaScript-da biz doimo Ob'ektlar bilan ishlaymiz. Ba'zan ushbu ob'ektlar biz kutgan aniq shaklga ega emas. Quyida ma'lumotlar ob'ekti haqida o'ylab topilgan misol topasiz - ehtimol u ma'lumotlar bazasidan yoki API qo'ng'irog'idan olingan.

const data = {
  foydalanuvchi: {
    manzil: {
      ko'chasi: 'Pensilvaniya prospekti',
    },
  },
};

Ushbu foydalanuvchi ro‘yxatdan o‘tmaganga o‘xshaydi:

const data = {
  foydalanuvchi: {},
};

Gipotetik ravishda, dasturning boshqaruv panelida ko'chaga kirishga harakat qilganda, men quyidagi xatoga yo'l qo'yaman:

konsol.log (data.user.address.street); // Uncught TypeError: Noma'lum "Street" xususiyatini o'qib bo'lmadi

Bunga yo'l qo'ymaslik uchun biz hozirda "ko'cha" mulkiga kirishimiz kerak:

const street = data && data.user && data.user.address && data.user.address.street;
konsol.log (ko'cha); // aniqlanmagan

Menimcha, bu usul:

  1. Yomon
  2. Og'ir yuk
  3. Verboza

Ixtiyoriy ravishda zanjirband qilinadigan joy bu erda foydalanishingiz mumkin:

konsol.log (data.user? .address? .street); // aniqlanmagan

Bu juda oson, to'g'rimi? Endi biz ushbu xususiyatning foydaliligini ko'rib, oldinga borishimiz va chuqurroq qarashimiz mumkin.

Shunday qilib, test yozishga imkon bering!

Endi biz ixtiyoriy zanjir nuqta notasining oldingi funktsiyalarini saqlab turishini ko'rmoqdamiz. Keyin, baxtsiz yo'l uchun sinovni qo'shaylik.

Massiv mulkiga kirish uchun ixtiyoriy zanjirning ishlashi quyidagicha:

Ba'zan biron bir ob'ekt ob'ekt ichida bajarilishini bilmaymiz.

Veb-brauzerdan foydalanayotganingizda bunga umumiy misol. Ba'zi eski brauzerlarda ba'zi funktsiyalar bo'lmasligi mumkin. Baxtimizga biz biron bir funktsiyaning bajarilishini aniqlash uchun ixtiyoriy zanjirdan foydalanishimiz mumkin!

Agar zanjir buzilmagan bo'lsa, iboralar bajarilmaydi. Kaput ostida bu iboralar deyarli o'zgargan:

qiymati == nol? qiymat [bu erda ba'zi iboralar]: aniqlanmagan;

Shunday qilib, ixtiyoriy zanjir operatoridan keyin hech narsa yo'qmi? qiymati aniqlanmagan yoki nol bo'lsa, bajariladi. Ushbu qoidani amalda quyidagi sinovda ko'rishimiz mumkin:

Va sizda bor! Ixtiyoriy zanjir, bayonotlar, lodash kabi import qilingan kutubxonalar va && bilan bog'lanish zaruratini kamaytiradi.

Ogohlantirish so'zi

Ushbu ixtiyoriy zanjirdan foydalanish minimal minimal xarajatlar bilan ta'minlanishiga umid qilamiz. Siz tekshirgan har bir daraja? kaput ostida qandaydir shartli mantiq bilan o'ralgan bo'lishi kerak. Agar u haddan tashqari ishlatilgan bo'lsa, unumdorlikka olib keladi.

Ob'ektni qabul qilish yoki yaratishda uni biron bir ob'ektni tekshirish bilan foydalanishni tavsiya qilaman. Bu ushbu tekshiruvlarga bo'lgan ehtiyojni kamaytiradi va shuning uchun ishlashni cheklaydi.

Aloqa

Bu erda taklif uchun havola. Shuningdek, men ushbu xabarning pastki qismiga ko'chiraman, shunda siz barcha taklif havolalarini bir joyda ko'rishingiz mumkin!

2. Nullish birlashishi

Siqish: aralashtirish yoki birga bo'lish

Mana biz JavaScriptda ko'radigan bir nechta umumiy operatsiyalar:

  1. Belgilanmagan yoki nol qiymatlari tekshirilmoqda
  2. Standart qiymatlar
  3. 0, "false" va "" tom ma'nodagi qiymatlarni berish standart emas.

Siz buni shunday qilganini ko'rgan bo'lsangiz kerak:

qiymati! = nol? qiymati: 'standart qiymat';

Yoki siz buni noto'g'ri bajarganini ko'rgansiz:

qiymati || "standart qiymat"

Muammo shundaki, ikkinchi amalga oshirishda bizning uchinchi operatsiya shartimiz bajarilmaydi. Ushbu stsenariyda nol raqami, buoriyalik noto'g'ri va bo'sh satrlarning barchasi noto'g'ri deb hisoblanadi. Shuning uchun aniq va aniqlanmaganligini tekshirishimiz kerak.

qiymati! = nol

Qaysi bilan bir xil:

value! == null && value! == aniqlanmagan

Bu erda yangi taklif keladi, noaniq birlashma. Endi biz quyidagilarni amalga oshirishimiz mumkin:

qiymati ?? 'standart qiymat';

Bu bizni soxta qiymatlarni tasodifiy ravishda sukut saqlashdan himoya qiladi, ammo baribir uchlik va! = Null tekshiruvisiz nol va aniqlanmagan narsalarni ushlab turadi.

Endi biz sintaksisni ko'rib, qanday ishlashini tekshirish uchun oddiy test yozamiz.

Sinovlarda siz nol, aniqlanmagan va bo'sh 0 uchun standart qiymatlarni ishlatishini ko'rishingiz mumkin (u aniqlanmagan deb baholaydi). U 0, '' va noto'g'ri kabi soxta qiymatlarni standart qilmaydi. Buni GitHub-da ko'rib chiqing.

3. Quvur liniyasi operatori

Funktsional dasturlashda biz "kompozitsiya" atamasiga egamiz, bu ko'p funktsiyali chaqiruvlarni birlashtirish zanjiri. Har bir funktsiya o'zining kiritilishi sifatida oldingi funktsiyani chiqaradi. Mana biz oddiy JavaScript-da nima haqida gaplashayotganimizga misol:

funktsiya doubleSay (str) {
  qaytish str + "," + str;
}
funktsiya kapitallashtirmoq (str) {
  return str [0] .toUpperCase () + str.substring (1);
}
funktsiya exclaim (str) {
  return str + '!';
}
let result = exclaim (bosh harf bilan yozish (doubleSay ("salom")));
natija // => "Salom, salom!"

Birgalikda chizilganlik shunchalik keng tarqalganki, kompozitsion funktsiyalar lodash va ramda kabi ko'p funktsional kutubxonalarda mavjud.

Yangi quvur liniyasi operatori bilan siz uchinchi tomon kutubxonasini o'tkazib yuborishingiz va yuqoridagi kabi yozishingiz mumkin:

natijaga ruxsat bering = "salom"
  |> doubleSay
  |> bosh harf bilan yozing
  |> undov;

natija // => "Salom, salom!"

Maqsad zanjirni o'qishga imkon berishdir. Kelgusida u qisman qo'llanilishi bilan ham yaxshi ishlaydi yoki hozircha uni quyidagicha amalga oshirish mumkin:

natija = 1 ga ruxsat bering
  |> (_ => Math.max (0, _));

natija // => 1
natijaga ruxsat bering--5
  |> (_ => Math.max (0, _));

natija // => 0

Endi biz sintaksisni ko'rib, testlarni yozishni boshlashimiz mumkin!

Siz sezishingiz mumkin bo'lgan bir narsa, quvur liniyasiga asinx funktsiyasi qo'shilgandan keyin siz kutishingiz kerak. Buning sababi, va'da qilingan narsaga aylandi. AsyncFunction-ni kutish uchun qo'llab-quvvatlash uchun bir nechta takliflar mavjud, ammo ularning hech biri amalga oshirilmagan yoki hal qilinmagan.

Xo'sh, endi siz ushbu takliflarni amalda ko'rganingizdan umid qilamanki, siz ularni sinab ko'rish uchun o'zingizni qulay his qilasiz!

O'qish testlarining to'liq kodini bu erda topishingiz mumkin.

Bu erda to'rtta taklif havolasi mavjud (bonus!):

Salom, men Jastin Flererman. Mening postimni o'qiganingizdan juda xursandman! Sizga shuni aytishim kerakki, bu erda yozganlarimning barchasi mening shaxsiy fikrim va mening ish beruvchimni biron-bir tarzda himoya qilish uchun mo'ljallanmagan. Barcha kod namunalari mennikidir va Bank Of America kodi bilan mutlaqo bog'liq emas.

Men sizdan ham eshitishni istardim, iltimos, men bilan LinkedIn, Github yoki Medium-da bog'laning. O'qiganingiz uchun yana bir bor rahmat!