Dacă vă optimizați codul JavaScript cu aceste hacks, acesta vă poate ajuta să scrieți un cod mai curat, să economisiți resurse și să vă optimizați timpul de programare.

Conform RedMonk, JavaScript este cel mai popular limbaj de programare. Mai mult, SlashData estimează că în jur 12,4 milioane de dezvoltatori utilizați JavaScript, care include și CoffeeScript și TypeScript de la Microsoft.

Aceasta înseamnă că milioane de oameni folosesc JavaScript pentru a lucra ca programatori, pentru a participa la concerte independente prin site-uri precum UpWork și Liber profesionist, sau chiar să înceapă propriile lor afaceri de dezvoltare web.

Routech are un curs de bază excelent pe JavaScript. Dar, dacă sunteți deja familiarizați cu elementele fundamentale și doriți să vă avansați competența în JavaScript, atunci iată zece hack-uri pe care ar trebui să le învățați și să le integrați în fluxul de lucru.

1. Cum se utilizează comenzile rapide pentru condiționare

JavaScript vă permite să utilizați anumite comenzi rapide pentru a vă ușura codul. În unele cazuri simple puteți utiliza operatori logici && și || în loc de if și else.

Să ne uităm la && operator în acțiune.

Exemplu de fragment:

// instead of
if (accessible) {
  console.log("It’s open!");
}

// use
accessible && console.log("It’s open!");

|| operatorul funcționează ca o clauză „sau”. Acum, utilizarea acestui operator este puțin mai complicată, deoarece poate împiedica executarea aplicației. Cu toate acestea, putem adăuga o condiție pentru a o rezolva.

Exemplu de fragment:

// instead of
if (price.data) {
  return price.data;
} else {
  return 'Getting the price’';
}

// use
return (price.data || 'Getting the price');

2. Cum se convertește în cel mai mare număr întreg folosind operatorul ~~

Folosind Math.floor pentru a returna cel mai mare număr întreg care este mai mic sau egal cu un anumit număr din ecuație ocupă resurse, ca să nu mai vorbim că este un șir destul de lung de reținut. O modalitate mai eficientă este utilizarea ~~ operator

Iată un exemplu:

// instead of
Math.floor(Math.random() * 50);

// use
~~(Math.random() * 50);

// You can also use the ~~ operator to convert anything into a number value.
// Example snippet:
~~('whitedress') // returns 0
~~(NaN) // returns 0

3. Redimensionați sau goliți o matrice utilizând array.length

Uneori trebuie să ajustați dimensiunea matricei sau să o goliți. Cel mai eficient mod de a face acest lucru este utilizarea Array.length.

Exemplu de fragment:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

console.log(array.length); // returns the length as 10

array.length = 4;

console.log(array.length); // returns the length as 4
console.log(array); // returns ['a', 'b', 'c', 'd']

Puteți utiliza, de asemenea Array.length pentru a elimina toate valorile dintr-o matrice specificată.

Exemplu de fragment:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

array.length = 0;

console.log(array.length); // returns the length as 0
console.log(array); // returns []

4. Cum se îmbină matricele fără a provoca supraîncărcarea serverului

Ar putea fi o problemă serioasă asupra serverului la îmbinarea matricelor, mai ales dacă aveți de-a face cu seturi de date mari. Pentru a menține lucrurile simple și pentru a menține nivelurile de performanță, utilizați Array.concat() și Array.push.apply(arr1, arr2) funcții.

Utilizarea oricăreia dintre aceste funcții depinde de mărimea matricelor.

Să ne uităm la modul de tratare a matricelor mai mici.

Exemplu de fragment:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.concat(list2)); // returns the merged values of both arrays, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

Când utilizați Array.concat() funcționează pe seturi de date mai mari, va consuma multă memorie în timp ce creează o nouă matrice. Pentru a rezolva scăderea performanței, utilizați Array.push.apply(arr1, arr2) care consolidează a doua matrice în prima fără a crea o matrice nouă.

Exemplu de fragment:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.push.apply(list1, list2)); // returns 10, the new length of list1
console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

5. Cum se utilizează filtrele cu matrice

Filtrarea unui tablou este utilă atunci când lucrați cu mai multe coloane de date corespunzătoare. În acest caz, puteți include și exclude date pe baza oricărei caracteristici care descrie un grup din matrice.

Pentru a filtra o matrice, utilizați filter() funcţie.

Exemplu de fragment:

const cars = [
  { make: 'Opel', class: 'Regular' },
  { make: 'Bugatti', class: 'Supercar' },
  { make: 'Ferrari', class: 'Supercar' },
  { make: 'Ford', class: 'Regular' },
  { make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(car => car.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

Puteți utiliza, de asemenea filter() impreuna cu Boolean pentru a elimina toate null sau undefined valorile din matricea dvs.

Exemplu de fragment:

const cars = [
  { make: 'Opel', class: 'Regular' },
  null,
  undefined
]

cars.filter(Boolean); // returns [{ make: 'Opel', class: 'Regular' }] 

6. Cum se extrag valori unice

Să presupunem că aveți un set de date cu valori repetate și că trebuie să produceți valori unice din acest set. Puteți face acest lucru cu o combinație de sintaxă răspândită ... și tipul obiectului Set. Această abordare funcționează atât cu cuvinte, cât și cu cifre.

Exemplu de fragment:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
const unrepeated_cars = [...new Set(cars)];

console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari

7. Cum se utilizează comanda rapidă pentru funcția Înlocuire

Ar trebui să fiți familiarizați cu String.replace() funcţie. Cu toate acestea, înlocuiește un șir cu o linie specificată o singură dată și se oprește de acolo. Să presupunem că aveți un set de date mai mare și că trebuie să tastați această funcție de mai multe ori. Devine frustrant după un timp.

Pentru a vă ușura viața, puteți adăuga /g la sfârșitul regexului, astfel funcția rulează și înlocuiește toate condițiile de potrivire fără a se opri la prima.

Exemplu de fragment:

const grammar="synonym synonym";

console.log(grammar.replace(/syno/, 'anto')); // this returns 'antonym synonym'
console.log(grammar.replace(/syno/g, 'anto')); // this returns 'antonym antonym'

8. Cum să cache valori

Când lucrați cu tablouri mari și trebuie să solicitați elemente prin ID folosind getElementById(), sau după numele clasei folosind getElementsByClassName(), apoi JavaScript rulează prin matrice pe o buclă cu fiecare cerere de element similar. Acest lucru ar putea ocupa o mulțime de resurse.

Cu toate acestea, puteți crește performanța memorând în cache o valoare dacă știți că utilizați în mod regulat o selecție specificată.

Exemplu de fragment:

const carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

9. Cum se verifică dacă un obiect are valori

Când lucrați cu mai multe obiecte, devine dificil să urmăriți care dintre ele conțin valori reale și pe care le puteți șterge.

Iată un hack rapid despre cum să verificați dacă un obiect este gol sau are o valoare cu Object.keys() funcţie.

Exemplu de fragment:

Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values

10. Cum să minimizați fișierele JavaScript

Fișierele JS mari afectează performanțele de încărcare și răspuns ale paginii dvs. În timp ce scrieți codul, puteți rămâne cu linii, comentarii și coduri inutile inutile. În funcție de dimensiunea fișierului dvs., acesta se poate acumula și poate deveni un blocaj redundant.

Există câteva instrumente care vă ajută să curățați codul și să faceți fișierele JS mai ușoare – sau să le reduceți, în termenii dezvoltatorilor. Chiar dacă reducerea fișierului JS nu este un hack în sine, este totuși benefic pentru dezvoltatori să știe și să implementeze.

Unul este Compilator de închidere Google, care analizează JavaScript-ul, îl analizează, elimină codul mort și rescrie și minimizează ceea ce a mai rămas. Celălalt este Microsoft Ajax Minifier, care vă permite să îmbunătățiți performanța aplicației dvs. web prin reducerea dimensiunii fișierelor dvs. JavaScript.

Iată-l. Utilizați aceste zece hacks pentru a vă curăța codul, pentru a salva resursele serverului și pentru a păstra timpul de programare.

Mulțumesc pentru lectură!

Sunt un scriitor pasionat de marketingul digital, dezvoltarea web și securitatea cibernetică. Puteți ajunge la mine mai departe LinkedIn aici.

S-ar putea să vă bucurați și de alte articole pe care le-am scris: