🥇12 JavaScript-trükk, amit a legtöbb oktatóanyagban nem találsz

Amikor elkezdtem tanulmányozni a JavaScriptet, először is összeállítottam egy listát a trükkökről, amelyek segítettek időt megtakarítani. Más programozóktól, különböző weboldalakról és kézikönyvekből lestem el őket.

Ebben a cikkben bemutatom a 12 kiváló módot, amelyek javíthatják és felgyorsíthatják a JavaScript kódot. A legtöbb esetben ezek univerzálisak.

Emlékeztetjük: minden «Habr» olvasónak 10 000 rubeles kedvezmény jár bármely Skillbox kurzus jelentkezésekor a «Habr» promóciós kód felhasználásával.

A Skillbox ajánlja: Gyakorlati kurzus «Mobilfejlesztő PRO».

Egyedi értékek szűrése

Tömbök

Az ES6-ban bevezetett Set objektum típussal együtt a … spread operátorral új tömböt hozhatunk létre, amely csak egyedi értékeket tartalmaz.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Eredmény: [1, 2, 3, 5]

Normál esetben ugyanazzal a művelettel sokkal több kódra lenne szükség.

Ez a trükk a primitív típusú értékeket tartalmazó tömbök esetén működik: undefined, null, boolean, string és number. Ha olyan tömbbel dolgozik, amely objektumokat, funkciókat vagy további tömböket tartalmaz, akkor más megközelítésre lesz szüksége.

Tömbhossz tárolása ciklusokban

CICLUSOK

Amikor a for ciklust tanulmányozza, a szokásos eljárási szekvenciát követi:

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

Ugyanakkor ezzel a szintaxissal a for ciklus újra ellenőrzi a tömb hosszát minden iterációnál.

Néha ez hasznos lehet, de a legtöbb esetben hatékonyabb a tömb hosszának tárolása, ami egyetlen hozzáférést igényel. Ezt úgy végezhetjük el, hogy definiálunk egy hosszú változót, például így:

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

Elvileg szinte ugyanaz, mint az előbb, de a ciklus méretének növelésével jelentős időt takaríthatunk meg.

Rövidzárás kiértékelése (McCarthy értékelés)

FELTÉTELES OPERÁTOROK

A ternáris operátor egy gyors és hatékony módja az egyszerű (és néha nem olyan egyszerű) feltételes állí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") : "kevesebb mint 100";

De néha a ternáris operátor bonyolultabb, mint amire szükség van. Ehelyett használhatjuk az 'and' && és 'or' || logikai operátorokat, hogy még tömörebben értékeljünk ki egyes kifejezéseket. Ezt gyakran "rövidzárás" vagy "rövidzárásos értékelés" néven emlegetik.

Hogyan működik ez

Tegyük fel, hogy csak egyet szeretnénk visszaadni a két vagy több feltételből.

Az && használata visszaadja az első false értéket. Ha minden operandus true-ként értékelődik ki, akkor az utolsó számított kifejezés lesz visszaadva.

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

A || használata lehetővé teszi az első true érték visszaadását. Ha minden operandus false-ként értékelődik ki, akkor az utolsó számított érték lesz visszaadva.

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

1. példa

Tegyük fel, hogy szeretnénk visszaadni a length változót, de nem tudjuk a típusát.

Ebben az esetben használhatjuk az if/else-t, hogy ellenőrizzük, hogy a foo megfelelő típusú-e, de ez a módszer túl hosszú lehet. Ezért inkább válasszuk a "rövid zárásunkat".

return (foo || []).length;

Ha a foo változónak van megfelelő length értéke, akkor azt fogjuk visszaadni. Ellenkező esetben 0-t kapunk.

Példa 2

Volt problémája a beágyazott objektumhoz való hozzáféréssel? Nem tudhatja, hogy létezik-e az objektum vagy az egyik alkategóriája, és ez problémákhoz vezethet.

Például hozzá akartunk férni a this.state data tulajdonságához, de a data nem definiált, amíg a programunk nem küldött lekérdezést.

Attól függően, hogy hol használjuk, a this.state.data hívás megzavarhatja az alkalmazás indítását. A probléma megoldásához becsomagolhatnánk egy feltételes kifejezésbe:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Adatok lekérése';
}

Sokkal megfelelőbb lenne az 'or' operátor használata.

return (this.state.data || 'Adatok lekérése');

A fenti kódot nem tudjuk módosítani, hogy használja a &&-t. A 'Adatok lekérése' && this.state.data mindig visszaadja a this.state.data-t, függetlenül attól, hogy undefined-e vagy sem.

Opcionális láncolás

Javasolt az opcionális láncolás használata, amikor egy mélyen beágyazott struktúrában próbálunk visszaadni egy tulajdonságot. Tehát a kérdőjel ? használható a tulajdonság kinyerésére, csak akkor, ha az nem null (null).

Például refaktorálhatnánk a fenti példát, így kapva: this.state.data?.. (). Ez azt jelenti, hogy a data csak akkor adódik vissza, ha az értéke nem null.

Vagy ha fontos, hogy definált állapotban vagyunk-e, akkor visszaadhatnánk this.state?.data.

Booleanra alakítás

TIPUSOK ÁTALAKÍTÁSA

A sima true és false logikai értékeken kívül a JavaScript minden más értéket truthyként vagy falsyként kezel.

Általában, ha nincs másképp megadva, minden JavaScript érték igaznak számít, kivéve a 0-t, az üres karakterláncot, a null-t, a nem meghatározottat, a NaN-t és persze a hamisat. Az utóbbiak hamis értékűek.

Könnyen válthatunk az egyik és a másik között az ! operátor segítségével, amely típusát is logikai típusra alakítja.

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

Átalakítás karakterlánccá

TIPUSOK ÁTALAKÍTÁSA

Az egész szám gyors átalakítását karakterlánccá az alábbiak szerint végezhetjük el.

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

Átalakítás egész számmá

TIPUSOK ÁTALAKÍTÁSA

A fordított átalakítást így végezzük el.

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

Ez a módszer a logikai típusú boolean átváltására is használható, amint az alább látható:

console.log(+true);  // Eredmény: 1
console.log(+false); // Eredmény: 0

Előfordulhat, hogy a + operátort concatenáló operátorként értelmezi, nem pedig összeadási operátorként. Ennek elkerülése érdekében érdemes a hullámjeleket használni: ~~, amely kifejezés -n-1-nek felel meg. Például, ~ 15 egyenlő -16-tal.

Két hullámjel egymás után nullázza az operációt, mert - (- — n — 1) — 1 = n + 1 — 1 = n. Más szóval, ~ -16 egyenlő 15-tel.

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

<Quick Powers

MŰVELETEK

Az ES7-től kezdve a ** hatványozó operátor használható, mint a hatványok rövidítése. Ez sokkal gyorsabb, mint a Math.pow (2, 3) használata. S valóban egyszerű, de ezen trükkök közé tartozik, mivel nem mindenhol említik.

console.log(2 ** 3); // Eredmény: 8

Ne keverje össze a ^ jellel, amelyet általában hatványozásra használnak. De JavaScriptben ez az XOR operátor.

Az ES7 előtt a ** rövidítést csak a 2-es alapú hatványoknál lehetett alkalmazni a balra eltoló bitoperátor használatával <<:

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

Például, 2 << 3 = 16, ami egyenlő a kifejezéssel 2 ** 4 = 16.

Float egész számra

MŰVELETEK / TÍPUS ÁTALAKÍTÁS

Ha szükséges a float egész számra alakítása, használhatja a Math.floor(), Math.ceil() vagy Math.round() függvényeket. De van egy gyorsabb módja is, ehhez a |, azaz az OR operátor használata szükséges.

console.log(23.9 | 0);  // Eredmény: 23
console.log(-23.9 | 0); // Eredmény: -23

A viselkedés | nagymértékben attól függ, hogy pozitív vagy negatív számokkal van-e dolgod, így ez a módszer csak akkor alkalmas, ha biztos vagy abban, amit csinálsz.

n | 0 eltávolít mindent a tizedesvessző után, egész számra kerekítve a lebegőpontos számot.

Ugyanezt a kerekítési hatást is elérheted ~~ használatával. A kényszerített egész számra alakítás után az érték változatlan marad.

Befejező számok eltávolítása

Az OR operátor használható bármennyi számjegy eltávolítására a számokból. Ez azt jelenti, hogy nem kell típusokat átkonvertálni, mint itt:

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

Ehelyett egyszerűen beírjuk:

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

Automatikus kötés

OSZTÁLYOK

Az ES6 nyíljelöléseket osztálymetódusokban használhatjuk, és ez automatikus kötést feltételez. Így búcsút inthetünk az olyan ismétlődő kifejezéseknek, mint például this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Ez a módszer implicit módon van hozzárendelve!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Tömb levágása

Tömbök

Ha értékeket kell eltávolítanod a tömbből, akkor vannak gyorsabb módszerek is, mint a splice().

Például, ha tudod az eredeti tömb méretét, akkor az alábbi módon átírhatod a length tulajdonságát:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Eredmény: [0, 1, 2, 3]

De van egy másik módszer is, amely gyorsabb. Ha a sebesség számodra fontos, itt van 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); // Eredmény: [0, 1, 2, 3]

Az utolsó érték(ek) kiírása a tömbből

Tömbök
Ez a trükk 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)); // Eredmény: [9]
console.log(array.slice(-2)); // Eredmény: [8, 9]
console.log(array.slice(-3)); // Eredmény: [7, 8, 9]

JSON-kód formázása

JSON

Valószínűleg már használtad a JSON.stringify-t. Tudtad, hogy ez segít formázni a JSON-odat?

A stringify() metódus két opcionális paramétert fogad: egy replacer függvényt, amely a megjelenített JSON szűrésére használható, valamint egy space értéket.

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

// Eredmény:
// '{
//     "alpha": A,
//     "beta": B
// }'

Ennyi volt, remélem, hogy az összes említett trükk hasznos volt. Te milyen fortélyokat ismersz? Írd meg őket a kommentekben.

A Skillbox ajánlja:

Kétéves gyakorlati tanfolyam „Webfejlesztő PRO”.

Online kurzus „C#-fejlesztő 0-ról”.

Gyakorlati éves kurzus „PHP fejlesztő a nullától a PROig”.

Forrás: habr.com