ProHoster > Blog > internet yangiliklari > Ko'pchilik o'quv qo'llanmalari o'tkazib yuboradigan 12 ta JavaScript hiylasi

Ko'pchilik o'quv qo'llanmalari o'tkazib yuboradigan 12 ta JavaScript hiylasi

Ko'pchilik o'quv qo'llanmalari o'tkazib yuboradigan 12 ta JavaScript hiylasi

JavaScript-ni o'rganishni boshlaganimda, birinchi qilgan ishim vaqtni tejashga yordam beradigan fokuslar ro'yxatini tuzish edi. Men ularni boshqa dasturchilardan, turli saytlarda va qo'llanmalarda ko'rdim.

Ushbu maqolada men sizga JavaScript kodingizni yaxshilash va tezlashtirishning 12 ta ajoyib usulini ko'rsataman. Aksariyat hollarda ular universaldir.

Sizga eslatib o'tamiz: "Habr" ning barcha o'quvchilari uchun - "Habr" promo-kodidan foydalangan holda har qanday Skillbox kursiga yozilishda 10 000 rubl chegirma.

Skillbox tavsiya qiladi: Amaliy kurs "Mobil dasturchi PRO".

Noyob qiymatlarni filtrlash

MASΔ°VLAR

Set obyekti turi ES6 da joriy qilingan, tarqalish operatori bilan bir qatorda biz undan faqat noyob qiymatlarni oβ€˜z ichiga olgan yangi massiv yaratish uchun foydalanishimiz mumkin.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Oddiy holatda, xuddi shu operatsiyani bajarish uchun ko'proq kod kerak bo'ladi.

Ushbu uslub ibtidoiy turlarni o'z ichiga olgan massivlar uchun ishlaydi: aniqlanmagan, null, mantiqiy, satr va raqam. Agar siz ob'ektlar, funktsiyalar yoki qo'shimcha massivlarni o'z ichiga olgan massiv bilan ishlayotgan bo'lsangiz, sizga boshqacha yondashuv kerak bo'ladi.

Tsikllardagi kesh massivining uzunligi

SIKILLAR

For looplarini o'rganganingizda, siz standart protseduraga amal qilasiz:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Biroq, bu sintaksis bilan for tsikli har bir iteratsiyada massiv uzunligini qayta-qayta tekshiradi.

Ba'zan bu foydali bo'lishi mumkin, lekin ko'p hollarda massiv uzunligini keshlash samaraliroq bo'ladi, bu unga bir marta kirishni talab qiladi. Buni uzunlik o'zgaruvchisini aniqlash orqali amalga oshirishimiz mumkin, bu erda biz i o'zgaruvchisini quyidagicha aniqlaymiz:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Aslida, yuqoridagi kabi deyarli bir xil, lekin pastadir hajmini oshirish orqali biz vaqtni sezilarli darajada tejashga erishamiz.

Qisqa tutashuv reytingi (McCarthy reytingi)

SHARTLI OPERATORLAR

Uchlik operator oddiy (va ba'zan unchalik oddiy bo'lmagan) shartli gaplarni yozishning tez va samarali usulidir:

x> 100? β€œ100 dan ortiq”: β€œ100 dan kam”;
x> 100? (x>200? "200 dan ortiq": "100-200 orasida"): "100 dan kam";

Ammo ba'zida hatto uchlik operator ham talab qilinganidan ko'ra murakkabroq. Biz || o'rniga "va" && va "yoki" dan foydalanishimiz mumkin Ba'zi ifodalarni yanada ixchamroq baholash uchun mantiqiy operatorlar. Ko'pincha "qisqa tutashuv" yoki "qisqa tutashuv reytingi" deb ataladi.

U qanday ishlaydi

Aytaylik, biz ikki yoki undan ortiq shartlardan faqat bittasini qaytarmoqchimiz.

&& dan foydalanish birinchi noto'g'ri qiymatni qaytaradi. Agar har bir operand rost deb baholansa, oxirgi baholangan ifoda qaytariladi.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

|| yordamida birinchi haqiqiy qiymatni qaytaradi. Agar har bir operand noto'g'ri deb baholansa, oxirgi baholangan qiymat qaytariladi.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

misol 1

Aytaylik, biz o'zgaruvchining uzunligini qaytarmoqchimiz, lekin uning turini bilmaymiz.

Bunday holda, foo ning to'g'ri turi ekanligini tekshirish uchun if/else dan foydalanishingiz mumkin, ammo bu usul juda uzun bo'lishi mumkin. Shuning uchun, bizning "qisqa tutashuv" ni olish yaxshiroqdir.

return (foo || []).length;

Agar foo o'zgaruvchisi mos uzunlikka ega bo'lsa, u qaytariladi. Aks holda biz 0 ni olamiz.

misol 2

Ichki ob'ektga kirishda muammolarga duch keldingizmi? Ob'ekt yoki uning pastki xususiyatlaridan biri mavjudligini bilmasligingiz mumkin va bu muammolarga olib kelishi mumkin.

Misol uchun, biz this.state-dagi ma'lumotlar xususiyatiga kirmoqchi edik, ammo dasturimiz olish so'rovini qaytarmaguncha ma'lumotlar aniqlanmaydi.

Biz uni qayerda ishlatishimizga qarab this.state.data deb chaqirish dasturni ishga tushirishga xalaqit berishi mumkin. Muammoni hal qilish uchun biz buni shartli ifoda bilan o'rashimiz mumkin:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Eng yaxshi variant "yoki" operatoridan foydalanish bo'ladi.

return (this.state.data || 'Fetching Data');

Yuqoridagi kodni && ishlatish uchun oΚ»zgartira olmaymiz. "Ma'lumotlarni olish" && this.state.data operatori aniqlanmagan yoki aniqlanmaganligidan qat'iy nazar this.state.data ni qaytaradi.

Ixtiyoriy zanjir

Mulkni daraxt tuzilishiga qaytarishga urinayotganda ixtiyoriy zanjirdan foydalanishni taklif qilish mumkin. Xo'sh, savol belgisi belgisi? faqat null bo'lmasa, xususiyatni olish uchun ishlatilishi mumkin.

Masalan, this.state.data?..() olish uchun yuqoridagi misolni qayta tahrirlashimiz mumkin. Ya'ni, agar qiymat null bo'lmasa, ma'lumotlar qaytariladi.

Yoki holat aniqlanganmi yoki aniqlanmaganligi muhim bo'lsa, biz this.state?.data-ni qaytarishimiz mumkin.

Booleanga aylantiring

TUR AYLANTIRISH

Oddiy mantiqiy funktsiyalar rost va yolg'ondan tashqari, JavaScript boshqa barcha qiymatlarni ham haqiqat yoki yolg'on deb hisoblaydi.

Aksi qayd etilmaguncha, JavaScript-dagi barcha qiymatlar haqiqatdir, 0, "", null, aniqlanmagan, NaN va, albatta, yolg'ondan tashqari. Ikkinchisi soxta.

Biz ! operatori yordamida ikkalasini osongina almashtirishimiz mumkin, u ham turni mantiqiyga aylantiradi.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

Stringga aylantirish

TUR AYLANTIRISH

Butun sondan satrga tez o'tkazish quyidagi tarzda amalga oshirilishi mumkin.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Butun songa aylantirish

TUR AYLANTIRISH

Biz shunga o'xshash teskari konvertatsiya qilamiz.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Bu usuldan quyida ko'rsatilganidek, mantiqiy ma'lumotlar turini oddiy raqamli qiymatlarga aylantirish uchun ham foydalanish mumkin:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Vaziyatlar bo'lishi mumkinki, + qo'shish operatori emas, balki birlashtiruvchi operator sifatida talqin qilinadi. Bunga yo'l qo'ymaslik uchun tildalardan foydalanish kerak: ~~. Bu operator -n-1 ga ekvivalent. Masalan, ~15 -16 ga teng.

Ketma-ket ikkita tildadan foydalanish operatsiyani inkor etadi, chunki - (- - n - 1) - 1 = n + 1 - 1 = n. Boshqacha qilib aytganda, ~-16 15 ga teng.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

Operatsiyalar

ES7-dan boshlab, siz ** ko'rsatkich operatoridan quvvatlarning qisqartmasi sifatida foydalanishingiz mumkin. Bu Math.pow (2, 3) dan foydalanishdan ancha tezroq. Bu oddiy ko'rinadi, ammo bu nuqta texnikalar ro'yxatiga kiritilgan, chunki u hamma joyda eslatilmaydi.

console.log(2 ** 3); // Result: 8

Uni eksponentsiya uchun keng tarqalgan ^ belgisi bilan aralashtirib yubormaslik kerak. Ammo JavaScript-da bu XOR operatori.

ES7 dan oldin ** yorlig'i faqat 2-bazaning quvvatlari uchun bit bo'yicha chapga siljitish operatori << yordamida ishlatilishi mumkin edi:

Math.pow(2, n);
2 << (n - 1);
2**n;

Masalan, 2 << 3 = 16 2 ** 4 = 16 ga teng.

Butun songa suzish

AMALIYATLAR / TURNI AYLANTIRISH

Agar floatni butun songa aylantirish kerak bo'lsa, siz Math.floor(), Math.ceil() yoki Math.round() dan foydalanishingiz mumkin. Lekin tezroq yo'li bor, buning uchun biz |, ya'ni OR operatoridan foydalanamiz.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Xulq-atvor | ko'p jihatdan siz ijobiy yoki salbiy raqamlar bilan shug'ullanayotganingizga bog'liq, shuning uchun bu usul faqat qilayotgan ishingizga ishonchingiz komil bo'lsa mos keladi.

n | 0 o'nlik ajratgichdan keyin hamma narsani olib tashlaydi, floatni butun songa qisqartiradi.

~~ yordamida bir xil yaxlitlash effektini olishingiz mumkin. Butun songa majburiy aylantirilgandan so'ng, qiymat o'zgarishsiz qoladi.

Keyingi raqamlarni olib tashlash

OR operatori raqamdan istalgan sondagi raqamlarni olib tashlash uchun ishlatilishi mumkin. Bu shuni anglatadiki, biz bu erdagi kabi turlarni aylantirishimiz shart emas:

let str = "1553";
Number(str.substring(0, str.length - 1));

Buning o'rniga biz shunchaki yozamiz:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

Avtomatik ulanish

SINFLAR

ES6 o'q belgilaridan sinf usullarida foydalanish mumkin va bog'lash nazarda tutilgan. Bu shuni anglatadiki, siz this.myMethod = this.myMethod.bind(this) kabi takrorlanuvchi iboralar bilan xayrlashishingiz mumkin!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Massivni kesish

MASΔ°VLAR

Agar siz massivdan qiymatlarni ajratib olishingiz kerak bo'lsa, splice() ga qaraganda tezroq usullar mavjud.

Misol uchun, agar siz asl massivning o'lchamini bilsangiz, uning uzunlik xususiyatini quyidagicha bekor qilishingiz mumkin:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

Ammo yana bir usul bor va tezroq. Agar siz uchun tezlik muhim bo'lsa, bizning tanlovimiz:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

Massivning oxirgi qiymat(lar)ini chop etish

MASΔ°VLAR
Ushbu texnika slice() usulidan foydalanishni talab qiladi.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

JSON kodi formatlanmoqda

JSON

Siz allaqachon JSON.stringify-dan foydalangan bo'lishingiz mumkin. Bu sizning JSON-ni formatlashda yordam berishini bilasizmi?

Stringify() usuli ikkita ixtiyoriy parametrni oladi: ko'rsatilgan JSONni filtrlash uchun ishlatilishi mumkin bo'lgan almashtiruvchi funksiya va bo'sh joy qiymati.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Hammasi shu, umid qilamanki, bu usullarning barchasi foydali bo'ldi. Qanday nayranglarni bilasiz? Ularni izohlarda yozing.

Skillbox tavsiya qiladi:

Manba: www.habr.com

a Izoh qo'shish