Ushbu JavaScript usullari bir necha daqiqada sizning mahoratingizni oshiradi

Bugungi kunda biz yaratadigan ko'pgina dasturlar ma'lumot to'plashning bir turini talab qiladi. To'plamdagi narsalarni qayta ishlash - bu siz eng ko'p duch keladigan odatiy operatsiya. Quyidagi kabi loop uchun odatiy usulni unuting (i = 0; i

In-loop-dan foydalanib, tezkor ravishda ishga tushirish sizga xato beradi. Sababi, har bir bajarilish paytida qiymatni qayta e'lon qilishi, shu sababli i i ++ tomonidan o'zgartiriladi. Shunday qilib, siz const-ni ishlatish yoki ruxsat berish haqida o'ylaganingizda, o'zingizdan so'rang - bu qiymat qayta e'lon qilinadimi? Agar javob ha bo'lsa, ruxsat berish uchun boring, agar yo'q bo'lsa, const uchun boring. Qo'shimcha ma'lumot.

Aytaylik, siz mahsulotlar ro'yxatini ko'rsatmoqchisiz va to'plamni toifalash, filtrlash, qidirish, o'zgartirish yoki yangilash. Yoki ehtimol siz tezkor hisob-kitoblarni, masalan, ko'paytirish, ko'paytirish va hokazolarni bajarishni xohlaysiz. Bunga erishish uchun eng maqbul usul nima?

Ehtimol, siz o'q vazifalarini yoqtirmasligingiz mumkin, siz yangi narsalarni o'rganishga ko'p vaqt sarflashni xohlamaysiz yoki ular siz uchun shunchaki ahamiyatsiz. Xavotir olmang, siz yolg'iz emassiz. Buni ES5 (funktsional pasayish) va ES6 (strelka funktsiyalari) da qanday amalga oshirilganligini sizga ko'rsataman.

Ogoh bo'ling: Ok vazifalari va funktsiyalar deklaratsiyalari / iboralari teng emas va ko'r-ko'rona o'zgartirilishi mumkin emas. Shuni yodda tutingki, ushbu kalit so'z ikkala o'rtasida boshqacha ishlaydi.

Biz ko'rib chiqadigan usullar:

  1. Tarqatish operatori
  2. ... iterator uchun
  3. o'z ichiga oladi ()
  4. biroz()
  5. har ()
  6. filtr ()
  7. map ()
  8. kamaytirish()
Agar siz yanada yaxshi veb-ishlab chiqaruvchisi bo'lishni, o'z biznesingizni ochishni, boshqalarga ta'lim berishni yoki rivojlanish ko'nikmalaringizni oshirishni istasangiz, men har hafta veb-saytlarni ishlab chiqish bo'yicha so'nggi tillarga oid maslahatlar va xabarlarni e'lon qilaman.

1. Tarqatish operatori

Spread Operator o'z elementlariga qatorni kengaytiradi. Bundan tashqari, ob'ekt tom ma'noda ishlatilishi mumkin.

Nega undan foydalanishim kerak?

  • Massiv elementlarini ko'rsatishning oddiy va tezkor usuli
  • U massivlar va ob'ektlar uchun ishlaydi
  • Bu bahslarni tez va intuitiv usulda o'tkazishdir
  • Bu faqat uchta nuqta talab qiladi ...

Masalan:
Aytaylik, siz pastadir funktsiyasini yaratmasdan sevimli ovqatlaringiz ro'yxatini ko'rsatmoqchisiz. Quyidagi kabi tarqalish operatoridan foydalaning:

2. iterator uchun ... uchun

For for ... formasi to'plam orqali takrorlanadi / takrorlanadi va sizga ma'lum elementlarni o'zgartirish imkoniyatini beradi. Bu for-loopning an'anaviy usulini almashtiradi.

Nega undan foydalanishim kerak?

  • Elementni qo'shish yoki yangilashning oddiy usuli
  • Hisob-kitoblarni bajarish (yig'ish, ko'paytirish va boshqalar)
  • Shartli gaplarni ishlatganda (agar, while, switch va hokazo)
  • Toza va o'qiladigan kodga olib keladi

Masalan:
Aytaylik, sizda asboblar qutisi bor va uning tarkibidagi barcha vositalarni ko'rsatmoqchisiz. Forerator for ... ni osonlashtiradi.

uchun ... operatori uchun

3. () usulini o'z ichiga oladi

Include () usuli to'plamda ma'lum bir satr mavjudligini tekshirish uchun ishlatiladi va true yoki false ni qaytaradi. Shuni yodda tutingki, u katta harflarga bog'liq: agar to'plam ichidagi element SCHOOL bo'lsa va siz maktabni qidirsangiz, u noto'g'ri bo'ladi.

Nega undan foydalanishim kerak?

  • Oddiy qidiruv-funksionallikni yaratish
  • Bu satr mavjudligini aniqlash uchun intuitiv yondashuv
  • U o'zgartirish, filtrlash va hokazolar uchun shartli gaplarni ishlatadi
  • O'qiladigan kodga olib keladi

Masalan:
Qanday bo'lmasin, sizning garajingizda qanday mashinalar mavjudligini bilmasligingiz uchun aytaylik va sizga kerakli mashina mavjud yoki yo'qligini tekshirish uchun tizim kerak. o'z ichiga oladi () qutqaruvchiga!

o'z ichiga oladi () usul w / arrow funktsiyasi

4. Ba'zi () usul

Some () metodi ba'zi elementlarning massivda mavjudligini tekshiradi va haqiqiy yoki noto'g'ri qaytaradi. Bu o'z ichiga oladi () usuli tushunchasiga biroz o'xshaydi, argument bundan mustasno, satr emas.

Nega undan foydalanishim kerak?

  • Ba'zi bir narsalar sinovdan o'tganiga ishonch hosil qiladi
  • Funktsiyalardan foydalanib shartli bayonotlarni bajaradi
  • Kodingizni deklarativ qiling
  • Ba'zilari etarlicha yaxshi

Masalan:
Aytaylik, siz klub egasisiz va klubga kim kirishi muhim emas. Ammo ba'zilariga kirishga ruxsat berilmaydi, chunki ular juda ko'p ichishgan (mening ijodim juda yaxshi). Quyidagi ES5 va ES6 o'rtasidagi farqlarni ko'rib chiqing:

ES5:

some () usuli

ES6:

ba'zi () usul w / arrow funktsiyasi

5. Har () usul

Har () usul massiv bo'ylab aylanadi, har bir elementni tekshiradi va "true" yoki "false" ni qaytaradi. Ba'zi () kabi bir xil tushuncha. Har bir element shartli bayonotni qondirishi kerak, aks holda u noto'g'ri qaytaradi.

Nega undan foydalanishim kerak?

  • Har bir element sinovdan o'tganiga ishonch hosil qiladi
  • Siz funktsiyalar yordamida shartli bayonotlarni bajarishingiz mumkin
  • Kodingizni deklarativ qiling

Masalan:
Oxirgi marta () voyaga etmagan talabalarga klubga kirishga ruxsat berganingizda, kimdir bu haqda xabar bergan va politsiya sizni tutib olgan. Bu safar siz bunga yo'l qo'yolmaysiz va hamma () operatori bilan hamma yosh chegarasini o'tayotganiga ishonch hosil qilasiz.

ES5

har bir () usul

ES6

har bir () usul w / arrow funktsiyasi

6. Filtr () usuli

Filtr () usuli sinovdan o'tgan barcha elementlar bilan yangi qator yaratadi.

Nega undan foydalanishim kerak?

  • Shunday qilib, siz asosiy qatorni o'zgartirishdan qochishingiz mumkin
  • Bu sizga kerak bo'lmagan narsalarni filtrlash imkoniyatini beradi
  • Sizga ko'proq o'qilishi mumkin bo'lgan kodni beradi

Masalan:
Aytaylik, siz 30 dan yuqoriroq yoki unga teng narxlarni qaytarishni xohlaysiz. Boshqa barcha narxlarni o'chirib tashlang ...

ES5

filtr () usuli

ES6

filtr () usuli w / arrow funktsiyasi

7. Map () usuli

Map () metodi yangi massivni qaytarish nuqtai nazaridan filter () usuliga o'xshaydi. Biroq, yagona farq shundaki, u elementlarni o'zgartirish uchun ishlatiladi.

Nega undan foydalanishim kerak?

  • Bu sizga asosiy massivda o'zgarishlar kiritmaslikka imkon beradi
  • Siz xohlagan narsalarni o'zgartirishingiz mumkin
  • Sizga ko'proq o'qilishi mumkin bo'lgan kodni beradi

Masalan:
Aytaylik, sizda narxlari ko'rsatilgan mahsulotlar ro'yxati bor. 25% soliq to'langanidan keyin yangi narxlarni ko'rsatish uchun menejeringiz ro'yxati kerak. Map () usuli sizga yordam berishi mumkin.

ES5

map () usuli

ES6

map () usuli w / arrow funktsiyasi

8. Kamaytirish () usuli

Kamaytirish () usuli massivni boshqa narsaga almashtirish uchun ishlatilishi mumkin, bu butun son, ob'ekt, va'dalar zanjiri (va'dalarning ketma-ket bajarilishi) va hokazo bo'lishi mumkin. Amaliy sabablarga ko'ra oddiy foydalanish summasini yig'ish kerak edi. butun sonlar ro'yxati. Qisqasi, u butun massivni bitta qiymatga "kamaytiradi".

Nega undan foydalanishim kerak?

  • Hisob-kitoblarni bajaring
  • Qiymatni hisoblang
  • Dublikatlarni sanang
  • Ob'ektlarni mulk bo'yicha guruhlash
  • Va'dalarni ketma-ket bajaring
  • Bu hisob-kitoblarni amalga oshirishning tezkor usuli

Masalan:
Aytaylik, siz bir haftalik xarajatlaringizni bilmoqchisiz. Ushbu qiymatni olish uchun (() dan foydalaning.

ES5

kamaytirish () usuli

ES6

kamaytirish () usuli w / arrow funktsiyasi

Siz meni har hafta nashr etadigan Medium-dan topishingiz mumkin. Yoki siz meni Tvitterda kuzatib borishingiz mumkin, u erda veb-ishlab chiqishga tegishli maslahatlar va fokuslarni joylashtiraman.

P.S. Agar sizga ushbu maqola yoqqan bo'lsa va shunga o'xshash narsalarni xohlasangiz, iltimos ❤ ni urib do'stlaringiz bilan o'rtoqlashing, bu yaxshi karma.