Amikor elkezdtem tanulni a JavaScriptet, az első dolgom az volt, hogy listát készítettem azokról a trükkökről, amelyek segítségével időt takarítottam meg. Kiszúrtam őket más programozóktól, különböző oldalakon és kézikönyvekben.
Ebben a cikkben 12 nagyszerű módszert mutatok be a JavaScript-kód javítására és felgyorsítására. A legtöbb esetben univerzálisak.
Emlékeztetünk: a "Habr" minden olvasója számára - 10 000 rubel kedvezmény, ha a "Habr" promóciós kóddal bármely Skillbox tanfolyamra jelentkezik.
A Skillbox a következőket ajánlja: Gyakorlati tanfolyam .
Egyedi értékek szűrése
TÖMBEK
A Set objektumtípust az ES6-ban vezették be, a..., spread operátorral együtt, ezzel egy új, csak egyedi értékeket tartalmazó tömböt hozhatunk létre.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Normál helyzetben sokkal több kódra van szükség ugyanazon művelet végrehajtásához.
Ez a technika primitív típusokat tartalmazó tömbök esetén működik: undefined, null, logikai érték, karakterlánc és szám. Ha objektumokat, függvényeket vagy további tömböket tartalmazó tömbbel dolgozik, más megközelítésre lesz szüksége.
A gyorsítótár tömb hossza ciklusokban
CIKLUSOK
A ciklusok megtanulásakor a szokásos eljárást kell követnie:
for (let i = 0; i < array.length; i++){
console.log(i);
}Ezzel a szintaxissal azonban a for ciklus minden iterációnál ismételten ellenőrzi a tömb hosszát.
Ez néha hasznos lehet, de a legtöbb esetben hatékonyabb a tömb hosszának gyorsítótárazása, amihez egyszeri hozzáférés szükséges. Ezt megtehetjük egy hosszúságváltozó definiálásával, ahol definiáljuk az i változót, így:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Elvileg majdnem ugyanaz, mint fent, de a hurok méretének növelésével jelentős időmegtakarítást érünk el.
Rövidzárlati minősítés (McCarthy minősítés)
FELTÉTELES KEZELŐK
A háromtagú operátor gyors és hatékony módja egyszerű (és néha nem is olyan egyszerű) feltételes utasítások írásának:
x> 100? „több mint 100”: „kevesebb, mint 100”;
x> 100? (x>200? "több mint 200": "100-200 között"): "100-nál kevesebb";
De néha még a háromtagú operátor is bonyolultabb a szükségesnél. Használhatjuk az 'and' && és az 'or' jeleket || helyett Boole-operátorok bizonyos kifejezések még tömörebb értékeléséhez. Gyakran "rövidzárlatnak" vagy "zárlati névlegesnek" nevezik.
Ez hogy működik
Tegyük fel, hogy két vagy több feltétel közül csak egyet szeretnénk visszaadni.
Az && használata az első hamis értéket adja vissza. Ha minden operandus kiértékelése igaz, akkor az utoljára kiértékelt kifejezés kerül visszaadásra.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0A || visszaadja az első valódi értéket. Ha minden operandus kiértékelése hamis, akkor az utoljára kiértékelt érték kerül visszaadásra.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPélda 1
Tegyük fel, hogy szeretnénk visszaadni egy változó hosszát, de nem ismerjük a típusát.
Ebben az esetben az if/else segítségével ellenőrizheti, hogy a foo a megfelelő típus, de ez a módszer túl hosszú lehet. Ezért jobb, ha a „zárlatunkat” vesszük.
return (foo || []).length;Ha a foo változó megfelelő hosszúságú, akkor azt a rendszer visszaadja. Ellenkező esetben 0-t kapunk.
Példa 2
Problémái voltak egy beágyazott objektum elérésével? Előfordulhat, hogy nem tudja, hogy létezik-e egy objektum vagy annak valamelyik altulajdonsága, és ez problémákhoz vezethet.
Például el akartuk érni a data tulajdonságot a this.state állapotban, de az adatok nem kerülnek meghatározásra mindaddig, amíg a programunk vissza nem ad egy lekérési kérést.
Attól függően, hogy hol használjuk, a this.state.data meghívása megakadályozhatja az alkalmazás elindulását. A probléma megoldásához ezt egy feltételes kifejezésbe csomagolhatjuk:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Jobb megoldás lenne a "vagy" operátor használata.
return (this.state.data || 'Fetching Data');A fenti kódot nem tudjuk && használatára módosítani. Az 'Adatok lekérése' && this.state.data operátor ezt a.state.data-t adja vissza, függetlenül attól, hogy meghatározatlan-e vagy sem.
Opcionális lánc
Javasolhatjuk az opcionális láncolás használatát, amikor egy tulajdonságot mélyen egy fastruktúrába próbálunk visszaadni. Szóval a kérdőjel? csak akkor használható egy tulajdonság lekérésére, ha az nem null.
Például átalakíthatjuk a fenti példát, hogy megkapjuk ezt.state.data?..(). Vagyis csak akkor ad vissza adatot, ha az érték nem null.
Vagy ha számít, hogy az állapot definiálva van-e vagy sem, visszaadhatjuk a this.state?.data-t.
Konvertálja Boolean
TÍPUSÁTALAKÍTÁS
A normál igaz és hamis logikai függvények mellett a JavaScript minden más értéket is igaznak vagy hamisnak kezel.
Amíg másképp nem jelezzük, a JavaScriptben minden érték igaz, kivéve a 0, "", null, undefined, NaN és természetesen hamis értéket. Az utóbbiak hamisak.
Könnyedén válthatunk a kettő között a ! operátor segítségével, amely szintén logikai értékre konvertálja a típust.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konvertálás karakterláncra
TÍPUSÁTALAKÍTÁS
A gyors konverzió egész számról karakterláncra a következőképpen hajtható végre.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertálás egész számmá
TÍPUSÁTALAKÍTÁS
A fordított transzformációt így hajtjuk végre.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Ez a módszer használható a logikai adattípusok normál numerikus értékekké történő átalakítására is, az alábbiak szerint:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Előfordulhatnak olyan helyzetek, amikor a + összefűzési operátorként, nem pedig összeadás operátorként lesz értelmezve. Ennek elkerülése érdekében használjon tildákat: ~~. Ez az operátor egyenértékű az -n-1-gyel. Például ~15 egyenlő -16-tal.
Ha egymás után két tildét használunk, akkor ez a művelet tagadható, mert - (- - n - 1) - 1 = n + 1 - 1 = n. Más szavakkal, ~-16 egyenlő 15-tel.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
TEVÉKENYSÉGEK
Az ES7-től kezdve használhatja a hatványozási operátort ** a hatványok rövidítéseként. Ez sokkal gyorsabb, mint a Math.pow(2, 3) használata. Egyszerűnek tűnik, de ez a pont benne van a technikák listájában, mivel nem mindenhol említik.
console.log(2 ** 3); // Result: 8Nem szabad összetéveszteni a ^ szimbólummal, amelyet általában a hatványozáshoz használnak. De JavaScriptben ez az XOR operátor.
Az ES7 előtt a ** parancsikont csak a 2. bázis hatványaihoz lehetett használni a bitenkénti balra eltolás operátorával <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Például 2 << 3 = 16 egyenértékű a 2 ** 4 = 16-tal.
Lebegtetés egész számra
MŰVELETEK / TÍPUSÁTALAKÍTÁS
Ha egy lebegőpontot egész számmá kell konvertálnia, használhatja a Math.floor(), a Math.ceil() vagy a Math.round(). De van egy gyorsabb mód is, erre használjuk a |-t, vagyis az OR operátort.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Viselkedés | nagyban függ attól, hogy pozitív vagy negatív számokkal van dolgunk, ezért ez a módszer csak akkor megfelelő, ha magabiztos abban, amit csinál.
n | A 0 mindent eltávolít a decimális elválasztó után, és a lebegőpontot egész számra csonkolja.
Ugyanezt a kerekítési hatást a ~~ használatával érheti el. Egész számmá való kényszerített átalakítás után az érték változatlan marad.
A záró számok eltávolítása
A VAGY operátor használható tetszőleges számú számjegy eltávolítására egy számból. Ez azt jelenti, hogy nem kell konvertálnunk az alábbi típusokat:
let str = "1553";
Number(str.substring(0, str.length - 1));Ehelyett egyszerűen ezt írjuk:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatikus összekapcsolás
OSZTÁLYOK
Az ES6 nyíl jelölései használhatók az osztálymetódusokban, és ez magában foglalja a kötést. Ez azt jelenti, hogy búcsút mondhat az ismétlődő kifejezéseknek, mint ez.myMethod = this.myMethod.bind(this)!
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>
</>
)
}
};Egy tömb kivágása
TÖMBEK
Ha értékeket kell kivonnia egy tömbből, vannak gyorsabb módszerek, mint a splice().
Például, ha ismeri az eredeti tömb méretét, felülírhatja a hossz tulajdonságát az alábbiak szerint:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]De van egy másik módszer, és egy gyorsabb. Ha számodra a gyorsaság számít, íme a mi választásunk:
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]Egy tömb utolsó értékének kinyomtatása
TÖMBEK
Ez a technika a slice() metódus használatát igényli.
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-kód formázása
JSON
Lehet, hogy már használta a JSON.stringify fájlt. Tudta, hogy ez segít formázni a JSON-ját?
A stringify() metódus két opcionális paramétert igényel: egy helyettesítő függvényt, amely a megjelenített JSON szűrésére használható, és egy szóközértéket.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Ez minden, remélem, hogy ezek a technikák hasznosak voltak. Milyen trükköket ismersz? Írd meg őket a megjegyzésekben.
A Skillbox a következőket ajánlja:
- Két éves gyakorlati tanfolyam .
- Online tanfolyam .
- Gyakorlati évfolyam .
Forrás: will.com