12 metode de lucru cu JavaScript care nu se regăsesc în majoritatea tutorialelor

Când am început să învăț JavaScript, primul lucru pe care l-am făcut a fost să îmi fac o listă de metode care m-au ajutat să economisesc timp. Le-am observat 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 accelera codul dvs. JavaScript. În cele mai multe cazuri, acestea sunt universale.

Vă reamintim: pentru toți cititorii „Habr” — reducere de 10.000 de ruble la înscrierea la orice curs Skillbox cu codul de promovare „Habr”.

Skillbox recomandă: Curs practic «Dezvoltator mobil PRO».

Filtrarea valorilor unice

TABELE

Tipul de obiect Set a fost introdus în ES6, împreună cu …, operatorul spread, putem să-l folosim pentru a crea un nou tablou care conține doar valori unice.

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

Într-o situație obișnuită, ar fi necesar mult mai mult cod pentru a realiza aceeași operațiune.

Această metodă funcționează pentru tablouri care conțin tipuri primitive: undefined, null, boolean, string și number. Dacă lucrați cu un tablou care conține obiecte, funcții sau tablouri suplimentare, va fi nevoie de o altă abordare.

Lungimea tabloului cache în bucle

BUCLE

Când studiați for pentru bucle, urmați procedura standard:

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

Cu toate acestea, cu o astfel de sintaxă, bucla for verifică din nou lungimea tabloului la fiecare iterație.

Uneori, acest lucru poate fi util, dar în cele mai multe cazuri este mai eficient să stocați lungimea tabloului, ceea ce necesită o singură accesare a acestuia. Putem face asta definind o variabilă lungime, unde setăm variabila i, de exemplu, așa:

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

Practic, aproape același lucru ca mai sus, dar pe măsură ce dimensiunea buclei crește, vom obține o economie semnificativă de timp.

Evaluarea scurtcircuitului (evaluarea lui McCarthy)

OPERATORI CONDITIONALI

Operatorul ternar este o modalitate rapidă și eficientă de a scrie declarații condiționale simple (iar uneori nu chiar 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 complex decât este necesar. În locul lui, putem folosi operatorii logici 'and' && și 'or' || pentru a evalua unele expresii într-un mod și mai concis. Este adesea numit "scurtcircuitare" sau "evaluarea scurtcircuitului".

Cum funcționează

Să spunem că dorim să returnăm doar unul dintre cele două sau mai multe condiții.

Utilizarea && va returna primul fals. Dacă fiecare operand este evaluat ca adevărat, se va returna ultima expresie evaluată.

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

console.log(0 && null); // Rezultat: 0

Utilizarea || va permite returnarea primei valori adevărate. Dacă fiecare operand este evaluat ca fals, se va returna ultimul rezultat evaluat.

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

console.log(0 || null); // Rezultat: null

Exemplu 1

Să spunem că dorim să returnăm lungimea variabilei, dar nu știm tipul ei.

În acest caz, am putea folosi if/else pentru a verifica dacă foo este tipul corect, dar această abordare poate fi prea lentă. Prin urmare, mai bine să folosim „scurtcircuitarea”.

return (foo || []).length;

Dacă variabila foo are lungimea corespunzătoare, aceasta va fi returnată. În caz contrar, vom obține 0.

Exemplu 2

Ați avut probleme cu accesarea unui obiect înnodat? S-ar putea să nu știți dacă obiectul sau oricare dintre subproprietățile sale există, iar acest lucru poate crea probleme.

De exemplu, am dorit să accesăm proprietatea data din this.state, dar data nu este definită până când programul nostru nu returnează cererea de interogare.

În funcție de locul în care îl folosim, apelul this.state.data poate împiedica rularea aplicației. Pentru a rezolva problema, am putea învârti acesta într-o expresie condițională:

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

O variantă mai potrivită ar fi utilizarea operatorului „sau”.

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

Nu putem modifica codul de mai sus pentru a folosi &&. Operatorul 'Fetching Data' && this.state.data va returna this.state.data indiferent dacă este undefined sau nu.

Încercare opțională

Propunerea este să folosim încercarea opțională când încercăm să returnăm o proprietate adânc în structura arborească. Astfel, simbolul semnului întrebării? poate fi folosit pentru a extrage proprietatea, doar dacă aceasta nu este zero (null).

De exemplu, am putea face refactorizarea exemplului de mai sus, obținând this.state.data?... (). Adică, data este returnată doar dacă valoarea nu este null.

Sau, dacă este important dacă starea este definită sau nu, am putea returna this.state?.data.

Conversia în Boolean

CONVERSIA TIPURILOR

Pe lângă funcțiile logice obișnuite true și false, JavaScript consideră de asemenea toate celelalte valori drept truthy sau falsy.

Până la o altă indicație, toate valorile în JavaScript sunt truthy, cu excepția lui 0, „”, null, undefined, NaN și, desigur, false. Cele din urmă sunt falsy.

Putem comuta cu ușurință între acestea, folosind operatorul !, care de asemenea transformă tipul într-unul logic.

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

Conversie în string

CONVERSIA TIPURILOR

Conversia rapidă a unui întreg în string se poate face astfel.

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

Conversie în întreg

CONVERSIA TIPURILOR

Conversia inversă se face astfel.

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

Această metodă poate fi folosită și pentru a converti tipul de date boolean în valori numerice obișnuite, așa cum este arătat mai jos:

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

Pot exista situații în care + va fi interpretat ca un operator de concatenare, nu de adunare. Pentru a evita acest lucru, este bine să folosiți tilde: ~~. Acest operator este echivalent cu expresia -n-1. De exemplu, ~ 15 este egal cu -16.

Folosirea a două tilde consecutiv 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); // Rezultatul: 15
console.log(typeof int); // Rezultatul: "number"

<Quick Powers

OPERATII

Începând cu ES7, se poate folosi operatorul de ridicare la putere ** ca o abreviere pentru puteri. Acest lucru este mult mai rapid decât utilizarea Math.pow(2, 3). Părea simplu, dar acest aspect este inclus în lista trucurilor, deoarece nu este menționat asiduu.

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

Nu trebuie confundat cu simbolul ^, care este folosit în mod obișnuit pentru ridicarea la putere. Dar, în JavaScript, acesta este operatorul XOR.

Până la ES7, abrevierea ** putea fi aplicată doar pentru puteri cu baza 2 folosind operatorul de deplasare pe biți la stânga <<:

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

De exemplu, 2 << 3 = 16 este echivalent cu expresia 2 ** 4 = 16.

Float în întreg

OPERATII / CONVERSIE TIPURI

Dacă este necesar să convertiți float în întreg, puteți utiliza Math.floor(), Math.ceil() sau Math.round(). Dar există și o metodă mai rapidă, utilizând |, adică operatorul OR.

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

Mediul | depinde în mare măsură de faptul dacă lucrați cu numere pozitive sau negative, așa că această metodă este potrivită doar dacă sunteți sigur de ce faceți.

n | 0 elimină tot ce este după separatorul zecimal, truncând numărul zecimal la un întreg.

Puteți obține același efect de rotunjire utilizând ~~. După conversia forțată la un număr întreg, valoarea rămâne neschimbată.

Eliminarea numerelor de închidere

Operatorul OR poate fi folosit pentru a elimina orice număr de cifre dintr-un număr. Asta înseamnă că nu trebuie să convertiți tipurile, așa cum este aici:

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

În schimb, pur și simplu scriem:

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

Îmbinarea automată

CLASE

Notările arrow ES6 pot fi utilizate în metodele de clasă, implicând astfel legătura. Datorită acestui lucru, vă puteți lua rămas bun de la expresiile repetitive, cum ar fi this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // Această metodă este legată implicit!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Scurtarea array-ului

TABELE

Dacă trebuie să eliminați valori dintr-un array, există metode mai rapide decât splice().

De exemplu, dacă cunoașteți dimensiunea array-ului original, puteți suprascrie proprietatea length astfel:

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

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

Dar există și o altă metodă, și anume una mai rapidă. Dacă pentru dumneavoastră contează viteza, iată alegerea noastră:

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

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

Afisarea ultimei valori (valori) din array

TABELE
Această tehnică necesită utilizarea metodei slice().

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

console.log(array.slice(-1)); // Rezultatul: [9]
console.log(array.slice(-2)); // Rezultatul: [8, 9]
console.log(array.slice(-3)); // Rezultatul: [7, 8, 9]

Formatarea codului JSON

JSON

Probabil ați folosit deja JSON.stringify. Știați că acesta ajută la formatarea JSON-ului dumneavoastră?

Metoda stringify() acceptă doi parametri opționali: o funcție replacer, care poate fi folosită pentru a filtra JSON-ul afișat, și o valoare space.

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

// Rezultatul:
// '{
//     "alpha": A,
//     "beta": B
// }'

Și asta este tot, sper că toate tehnicile menționate au fost utile. Ce trucuri cunoașteți? Scrieți-le în comentarii.

Skillbox recomandă:

• Curs practic de doi ani „Sunt un dezvoltator web PRO”.
• Curs online „Dezvoltator C# cu 0”.
• Curs practic anual «Dezvoltator PHP de la 0 la PRO».

Sursa: habr.com