JavaScript öyrənməyə başlayanda ilk etdiyim iş mənə vaxta qənaət etməyə kömək edən fəndlərin siyahısını tərtib etmək oldu. Mən onları başqa proqramçılardan, müxtəlif saytlarda və dərsliklərdə tapdım.
Bu yazıda mən sizə JavaScript kodunuzu təkmilləşdirməyin və sürətləndirməyin 12 əla yolunu göstərəcəyəm. Əksər hallarda onlar universaldır.
Xatırladırıq: "Habr" ın bütün oxucuları üçün - "Habr" promosyon kodundan istifadə edərək hər hansı bir Skillbox kursuna yazılarkən 10 000 rubl endirim.
Skillbox tövsiyə edir: Praktik kurs .
Unikal dəyərlərin süzülməsi
MASSİVLƏR
Set obyekt növü ES6-da təqdim edilmişdir, yayılma operatoru ilə birlikdə biz ondan yalnız unikal dəyərləri ehtiva edən yeni massiv yaratmaq üçün istifadə edə bilərik.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Normal vəziyyətdə, eyni əməliyyatı yerinə yetirmək üçün daha çox kod tələb olunur.
Bu texnika primitiv tipləri olan massivlər üçün işləyir: müəyyən edilməmiş, null, boolean, sətir və nömrə. Obyektləri, funksiyaları və ya əlavə massivləri ehtiva edən massivlə işləyirsinizsə, sizə fərqli yanaşma lazımdır.
Dövrlərdə keş massivinin uzunluğu
DÖVRLƏR
For döngələrini öyrəndiyiniz zaman standart prosedura əməl edirsiniz:
for (let i = 0; i < array.length; i++){
console.log(i);
}Bununla belə, bu sintaksis ilə for döngəsi hər iterasiyada massivin uzunluğunu dəfələrlə yoxlayır.
Bəzən bu faydalı ola bilər, lakin əksər hallarda massivin uzunluğunu keşləmək daha səmərəlidir, bu isə ona bir giriş tələb edir. Bunu i dəyişənini təyin etdiyimiz uzunluq dəyişənini təyin etməklə edə bilərik, məsələn:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Prinsipcə, yuxarıdakı kimi demək olar ki, eynidir, lakin loop ölçüsünü artırmaqla biz əhəmiyyətli vaxta qənaət edəcəyik.
Qısa qapanma reytinqi (McCarthy reytinqi)
ŞƏRTLİ OPERATORLAR
Üçlü operator sadə (və bəzən o qədər də sadə olmayan) şərti ifadələri yazmaq üçün sürətli və səmərəli üsuldur:
x> 100? “100-dən çox”: “100-dən az”;
x> 100? (x>200? "200-dən çox": "100-200 arasında"): "100-dən az";
Ancaq bəzən hətta üçlü operator tələb olunandan daha mürəkkəbdir. Biz 'və' && və 'və ya' əvəzinə || istifadə edə bilərik Bəzi ifadələri daha qısa şəkildə qiymətləndirmək üçün Boolean operatorları. Tez-tez "qısa qapanma" və ya "qısa qapanma reytinqi" adlanır.
Bu necə işləyir
Tutaq ki, biz iki və ya daha çox şərtdən yalnız birini qaytarmaq istəyirik.
&& istifadə ilk yanlış dəyəri qaytaracaq. Hər bir operand doğru olaraq qiymətləndirilirsə, o zaman qiymətləndirilən sonuncu ifadə qaytarılacaq.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0|| istifadə edərək ilk həqiqi dəyəri qaytaracaq. Hər bir operand yalnış olaraq qiymətləndirilərsə, son qiymətləndirilən dəyər qaytarılacaq.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullMəsələn 1
Tutaq ki, biz dəyişənin uzunluğunu qaytarmaq istəyirik, lakin onun tipini bilmirik.
Bu halda foo-nun düzgün tip olduğunu yoxlamaq üçün if/else istifadə edə bilərsiniz, lakin bu üsul çox uzun ola bilər. Buna görə "qısa qapanma"mızı götürmək daha yaxşıdır.
return (foo || []).length;Əgər foo dəyişəni uyğun uzunluğa malikdirsə, o, qaytarılacaq. Əks halda 0 alacağıq.
Məsələn 2
Daxili obyektə daxil olmaqda probleminiz olub? Ola bilsin ki, siz obyektin və ya onun alt xassələrindən birinin mövcud olub-olmadığını bilmirsiniz və bu, problemlərə səbəb ola bilər.
Məsələn, biz this.state-də data xassəsinə daxil olmaq istəyirdik, lakin proqramımız gətirmə sorğusunu qaytarana qədər data müəyyən edilmir.
İstifadə etdiyimiz yerdən asılı olaraq this.state.data zəngi tətbiqin başlamasına mane ola bilər. Problemi həll etmək üçün bunu şərti ifadə ilə əhatə edə bilərik:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Daha yaxşı seçim "və ya" operatorundan istifadə etmək olardı.
return (this.state.data || 'Fetching Data');Biz yuxarıdakı kodu && istifadə etmək üçün dəyişə bilmərik. 'Məlumatların alınması' && this.state.data operatoru müəyyən edilməmiş olub-olmamasından asılı olmayaraq this.state.data-nı qaytaracaq.
İsteğe bağlı zəncir
Mülkiyyəti ağac quruluşuna dərindən qaytarmağa çalışarkən isteğe bağlı zəncirləmə istifadə etməyi təklif edə bilərsiniz. Beləliklə, sual işarəsi simvolu? yalnız null olmadıqda əmlakı əldə etmək üçün istifadə edilə bilər.
Məsələn, bu.state.data?..() əldə etmək üçün yuxarıdakı nümunəni refaktor edə bilərik. Yəni, məlumat yalnız dəyər sıfır olmadıqda qaytarılır.
Və ya vəziyyətin müəyyən edilib-edilməməsi vacib olsa, biz bu.state?.data-nı qaytara bilərik.
Boolean dilinə çevirin
TİP DÖNÜŞMƏSİ
Normal boolean doğru və yalan funksiyalarına əlavə olaraq, JavaScript bütün digər dəyərləri də doğru və ya yalan hesab edir.
Əksi qeyd olunana qədər, JavaScript-də bütün dəyərlər doğrudur, 0, "", null, qeyri-müəyyən, NaN və əlbəttə ki, yalandan başqa. Sonuncular yalançıdır.
Biz ! operatorundan istifadə edərək ikisi arasında asanlıqla keçid edə bilərik, o da növü booleana çevirir.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Sətirə çevirin
TİP DÖNÜŞMƏSİ
Tam ədəddən sətirə sürətli çevrilmə aşağıdakı kimi edilə bilər.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Tam ədədə çevirin
TİP DÖNÜŞMƏSİ
Ters çevrilməni belə həyata keçiririk.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Bu üsul həm də aşağıda göstərildiyi kimi boolean məlumat növünü adi rəqəmli dəyərlərə çevirmək üçün istifadə edilə bilər:
console.log(+true); // Return: 1
console.log(+false); // Return: 0+-nın əlavə operatoru deyil, birləşmə operatoru kimi şərh ediləcəyi vəziyyətlər ola bilər. Bunun qarşısını almaq üçün tilda işarələrindən istifadə etməlisiniz: ~~. Bu operator -n-1-ə bərabərdir. Məsələn, ~15 -16-ya bərabərdir.
Ardıcıl iki tildadan istifadə əməliyyatı rədd edir, çünki - (- - n - 1) - 1 = n + 1 - 1 = n. Başqa sözlə, ~-16 15-ə bərabərdir.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
Əməliyyatlar
ES7-dən başlayaraq, güclərin stenoqramı kimi eksponentasiya operatorundan ** istifadə edə bilərsiniz. Bu, Math.pow (2, 3) istifadə etməkdən daha sürətlidir. Sadə görünür, lakin bu nöqtə hər yerdə qeyd olunmadığı üçün texnikalar siyahısına daxildir.
console.log(2 ** 3); // Result: 8Onu eksponentasiya üçün adətən istifadə olunan ^ simvolu ilə qarışdırmaq olmaz. Lakin JavaScript-də bu XOR operatorudur.
ES7-dən əvvəl ** qısayolu yalnız bit istiqamətində sola sürüşdürmə operatorundan istifadə edərək 2-ci bazanın səlahiyyətləri üçün istifadə edilə bilərdi <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Məsələn, 2 << 3 = 16 2 ** 4 = 16-ya bərabərdir.
Tam ədədə sürüşdürün
ƏMƏLİYYATLAR / NÖVLƏRİN DÖNÜŞMƏSİ
Əgər floatı tam ədədə çevirmək lazımdırsa, siz Math.floor(), Math.ceil() və ya Math.round() istifadə edə bilərsiniz. Ancaq daha sürətli bir yol var, bunun üçün biz |, yəni OR operatorundan istifadə edirik.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Davranış | əsasən müsbət və ya mənfi ədədlərlə məşğul olub-olmamağınızdan asılıdır, buna görə də bu üsul yalnız etdiyiniz işdən əminsinizsə uyğun gəlir.
n | 0, ondalık ayırıcıdan sonra hər şeyi silir, floatı tam ədədə qədər kəsir.
Eyni yuvarlaqlaşdırma effektini ~~ istifadə edərək əldə edə bilərsiniz. Tam ədədə məcburi çevrilmədən sonra dəyər dəyişməz qalır.
Arxadakı nömrələrin silinməsi
OR operatoru nömrədən istənilən sayda rəqəmi silmək üçün istifadə edilə bilər. Bu o deməkdir ki, buradakı kimi növləri çevirməyə ehtiyac yoxdur:
let str = "1553";
Number(str.substring(0, str.length - 1));Bunun əvəzinə sadəcə yazırıq:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Avtomatik əlaqə
DERSLER
ES6 ox qeydləri sinif metodlarında istifadə edilə bilər və bağlama nəzərdə tutulur. Bu o deməkdir ki, this.myMethod = this.myMethod.bind(this) kimi təkrarlanan ifadələrlə vidalaşa bilərsiniz!
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>
</>
)
}
};Massivlərin kəsilməsi
MASSİVLƏR
Əgər massivdən dəyərləri silmək lazımdırsa, splice() metodundan daha sürətli üsullar var.
Məsələn, orijinal massivin ölçüsünü bilirsinizsə, onun uzunluq xassəsini aşağıdakı kimi ləğv edə bilərsiniz:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ancaq başqa bir üsul var və daha sürətli. Sürət sizin üçün önəmlidirsə, seçimlərimiz bunlardır:
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]Massivin son qiymət(lər)inin çapı
MASSİVLƏR
Bu texnika slice() metodunun istifadəsini tələb edir.
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 kodu formatlanır
JSON
Siz artıq JSON.stringify istifadə etmiş ola bilərsiniz. JSON-unuzu formatlamağa kömək etdiyini bilirdinizmi?
Stringify() metodu iki isteğe bağlı parametr götürür: göstərilən JSON-u filtrləmək üçün istifadə edilə bilən əvəzləyici funksiya və boşluq dəyəri.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Hamısı budur, ümid edirəm ki, bütün bu texnikalar faydalı oldu. Hansı fəndləri bilirsiniz? Onları şərhlərdə yazın.
Skillbox tövsiyə edir:
- İki illik praktik kurs .
- Onlayn kurs .
- Praktiki il kursu .
Mənbə: www.habr.com