Când am început să învăț JavaScript, primul lucru pe care l-am făcut a fost să fac o listă de trucuri care m-au ajutat să economisesc timp. Le-am observat de la alți programatori, pe diferite site-uri și în manuale.
În acest articol, vă voi arăta 12 modalități excelente de a îmbunătăți și de a accelera codul JavaScript. În cele mai multe cazuri, acestea sunt universale.
Amintim: pentru toți cititorii „Habr” - o reducere de 10 de ruble la înscrierea la orice curs Skillbox folosind codul promoțional „Habr”.
Skillbox recomandă: Curs practic .
Filtrarea valorilor unice
MATRICE
Tipul de obiect Set a fost introdus în ES6, împreună cu operatorul..., spread, îl putem folosi pentru a crea o nouă matrice care conține doar valori unice.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Într-o situație normală, este nevoie de mult mai mult cod pentru a efectua aceeași operațiune.
Această tehnică funcționează pentru tablouri care conțin tipuri primitive: nedefinit, nul, boolean, șir și număr. Dacă lucrați cu o matrice care conține obiecte, funcții sau matrice suplimentare, veți avea nevoie de o abordare diferită.
Lungimea matricei cache în cicluri
CICLURI
Când învățați buclele for, urmați procedura standard:
for (let i = 0; i < array.length; i++){
console.log(i);
}Cu toate acestea, cu această sintaxă, bucla for verifică în mod repetat lungimea matricei la fiecare iterație.
Uneori, acest lucru poate fi util, dar în cele mai multe cazuri este mai eficient să memorați în cache lungimea matricei, ceea ce va necesita un singur acces la acesta. Putem face acest lucru prin definirea unei variabile de lungime unde definim variabila i, astfel:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}În principiu, aproape la fel ca mai sus, dar prin creșterea dimensiunii buclei vom obține economii semnificative de timp.
Evaluare de scurtcircuit (evaluare McCarthy)
OPERATORI CONDIȚIONATI
Operatorul ternar este o modalitate rapidă și eficientă de a scrie instrucțiuni condiționate simple (și uneori nu atât de simple):
x> 100? „mai mult de 100”: „mai puțin de 100”;
x> 100? (x>200? „mai mult de 200”: „între 100-200”): „mai puțin de 100”;
Dar uneori chiar și operatorul ternar este mai complicat decât este necesar. Putem folosi în loc „și” && și „sau” || Operatori booleeni pentru a evalua anumite expresii într-un mod și mai concis. Este adesea numit „scurtcircuit” sau „evaluare de scurtcircuit”.
Cum funcționează
Să presupunem că vrem să returnăm doar una dintre două sau mai multe condiții.
Folosirea && va returna prima valoare falsă. Dacă fiecare operand este evaluat la adevărat, atunci ultima expresie evaluată va fi returnată.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Folosind || va returna prima valoare adevărată. Dacă fiecare operand este evaluat ca fals, atunci ultima valoare evaluată va fi returnată.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullExemplul 1
Să presupunem că vrem să returnăm lungimea unei variabile, dar nu știm tipul acesteia.
În acest caz, puteți utiliza if/else pentru a verifica dacă foo este tipul potrivit, dar această metodă poate fi prea lungă. Prin urmare, este mai bine să ne luăm „scurtcircuit”.
return (foo || []).length;Dacă variabila foo are o lungime adecvată, atunci aceasta va fi returnată. Altfel vom obține 0.
Exemplul 2
Ați avut probleme la accesarea unui obiect imbricat? Este posibil să nu știți dacă un obiect sau una dintre subproprietățile sale există, iar acest lucru poate duce la probleme.
De exemplu, am vrut să accesăm proprietatea data în this.state, dar datele nu sunt definite până când programul nostru returnează o solicitare de preluare.
În funcție de locul în care îl folosim, apelarea this.state.data poate împiedica pornirea aplicației. Pentru a rezolva problema, am putea include aceasta într-o expresie condiționată:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}O opțiune mai bună ar fi să folosiți operatorul „sau”.
return (this.state.data || 'Fetching Data');Nu putem schimba codul de mai sus pentru a folosi &&. Operatorul „Preluare date” && this.state.data va returna acest.state.data, indiferent dacă este nedefinit sau nu.
Lant optional
S-ar putea sugera folosirea înlănțuirii opționale atunci când încercați să returnați o proprietate adânc într-o structură arborescentă. Deci, simbolul semnului întrebării? poate fi folosit pentru a prelua o proprietate numai dacă nu este nulă.
De exemplu, am putea refactoriza exemplul de mai sus pentru a obține this.state.data?..(). Adică, datele sunt returnate numai dacă valoarea nu este nulă.
Sau, dacă contează dacă starea este definită sau nu, am putea returna this.state?.data.
Convertiți în boolean
CONVERSIE DE TIP
Pe lângă funcțiile booleene normale true și false, JavaScript tratează și toate celelalte valori ca fiind adevărate sau false.
Până nu se menționează altfel, toate valorile din JavaScript sunt adevărate, cu excepția 0, "", nul, nedefinit, NaN și, desigur, fals. Acestea din urmă sunt false.
Putem comuta cu ușurință între cele două folosind operatorul !, care convertește și tipul în boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Convertiți în șir
CONVERSIE DE TIP
O conversie rapidă dintr-un număr întreg într-un șir se poate face după cum urmează.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Convertiți în număr întreg
CONVERSIE DE TIP
Efectuăm transformarea inversă astfel.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Această metodă poate fi folosită și pentru a converti tipul de date boolean în valori numerice obișnuite, după cum se arată mai jos:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Pot exista situații în care + va fi interpretat mai degrabă ca un operator de concatenare decât ca un operator de adăugare. Pentru a evita acest lucru, ar trebui să utilizați tilde: ~~. Acest operator este echivalent cu -n-1. De exemplu, ~15 este egal cu -16.
Utilizarea a două tilde la rând anulează operația deoarece - (- - n - 1) - 1 = n + 1 - 1 = n. Cu alte cuvinte, ~-16 este egal cu 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERAȚII
Începând cu ES7, puteți utiliza operatorul de exponențiere ** ca prescurtare pentru puteri. Acest lucru este mult mai rapid decât utilizarea Math.pow(2, 3). Pare simplu, dar acest punct este inclus în lista de tehnici, deoarece nu este menționat peste tot.
console.log(2 ** 3); // Result: 8Nu trebuie confundat cu simbolul ^, care este folosit în mod obișnuit pentru exponențiere. Dar în JavaScript acesta este operatorul XOR.
Înainte de ES7, comanda rapidă ** putea fi folosită numai pentru puterile bazei 2 folosind operatorul de deplasare la stânga pe biți <<:
Math.pow(2, n);
2 << (n - 1);
2**n;De exemplu, 2 << 3 = 16 este echivalent cu 2 ** 4 = 16.
Float la număr întreg
OPERAȚII / CONVERSIE TIP
Dacă trebuie să convertiți un float într-un număr întreg, puteți utiliza Math.floor(), Math.ceil() sau Math.round(). Dar există o modalitate mai rapidă, pentru aceasta folosim |, adică operatorul SAU.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportament | depinde în mare măsură dacă aveți de-a face cu numere pozitive sau negative, așa că această metodă este potrivită doar dacă aveți încredere în ceea ce faceți.
n | 0 elimină totul după separatorul zecimal, trunchiind flota la un întreg.
Puteți obține același efect de rotunjire folosind ~~. După conversia forțată într-un număr întreg, valoarea rămâne neschimbată.
Eliminarea numerelor finale
Operatorul SAU poate fi folosit pentru a elimina orice număr de cifre dintr-un număr. Aceasta înseamnă că nu trebuie să convertim tipuri ca aici:
let str = "1553";
Number(str.substring(0, str.length - 1));În schimb, scriem pur și simplu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Conectare automată
CLASE
Notațiile cu săgeți ES6 pot fi utilizate în metodele de clasă, iar legarea este implicită. Aceasta înseamnă că poți să-ți iei rămas bun de la expresii repetitive precum this.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>
</>
)
}
};Tăierea matricei
MATRICE
Dacă trebuie să eliminați valori dintr-o matrice, există metode mai rapide decât splice().
De exemplu, dacă cunoașteți dimensiunea matricei inițiale, puteți suprascrie proprietatea de lungime după cum urmează:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Dar există o altă metodă și una mai rapidă. Dacă viteza este ceea ce contează pentru tine, iată alegerile noastre:
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]Imprimarea ultimei valori ale unei matrice
MATRICE
Această tehnică necesită utilizarea metodei slice().
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]Formatarea codului JSON
JSON
Este posibil să fi folosit deja JSON.stringify. Știați că vă ajută să vă formatați JSON?
Metoda stringify() ia doi parametri opționali: o funcție de înlocuire, care poate fi folosită pentru a filtra JSON afișat și o valoare de spațiu.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Atât, sper că toate aceste tehnici au fost utile. Ce trucuri știi? Scrie-le în comentarii.
Skillbox recomandă:
- Curs practic de doi ani .
- Curs online .
- Curs practic anual .
Sursa: www.habr.com