Fragmentul de cod JavaScript pentru probleme comune

Ultima actualizare pe 27 iulie 2021

Fiecare limbaj de programare are defectele și ciudateniile sale. Limbajul JavaScript și chiar și fragmentul de cod JavaScript utilizat nu este o excepție. Limbajul scriptului s-a comportat ciudat în ultimii ani, dar este una dintre cele mai utilizate limbi în ziua de azi. În cea mai mare parte, se datorează faptului că este limba interactivă principală a browserelor de internet.

Există momente, ca programatori și programatori, în care avem probleme repetitive, cu sarcini simple, în care avem nevoie de fragmente de cod simple. În acest blog, voi prezenta câteva probleme comune care pot fi rezolvate cu ușurință folosind script-ul ES6 ca parte a unor fragmente de cod JavaScript.

Sfat pentru fragment de cod JavaScript: utilizați „let” în loc de „var”

let este ca var , dar let are scope. let este accesibil doar la nivelul blocului, este declarat și atribuită o valoare. var este accesibil la orice nivel în ceea ce privește domeniul de aplicare al blocului pe care îl definește. În exemplul următor, variabila „num1” este definită în interiorul unei instrucțiuni If și, prin urmare, nu este accesibilă în afara funcției.

 daca e adevarat) {
  fie num1 = 40;
}

fie num2 = 20;

console.log(num2, num1);
console.log(num1);

Ieșire:
20
nedefinit

 fie a = 25;
fie b = 50;

daca e adevarat) {
  fie a = 100;
  var c = 5;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log(a);

Ieșire:
20
10
5
25

Utilizați „const” când o valoare variabilă nu se modifică

const atribuie o valoare constantă unei variabile care nu poate fi modificată. Ori de câte ori este definită o variabilă const, JavaScript face referire la adresa valorii la variabilă.

Funcția săgeată a fragmentului de cod JavaScript, o nouă sintaxă pentru funcții

Funcțiile fragmentelor de cod JavaScript din ES6 s-au schimbat la o expresie mai simplă, „() => {}”.

 // Sintaxă veche
function myHello() {
  console.log("Bună lume...!");
}

// Sintaxă nouă
var myHello = () => {
  console.log("Bună lume...!");
}

Noua sintaxă poate fi puțin confuză inițial. Există două părți ale sintaxei.

 var myHello = ()

Prima parte a fragmentului de cod JavaScript declară o variabilă și îi atribuie funcția (). Spune doar că variabila este o funcție.

 => { //fa ceva } 

A doua parte declară partea corpului a funcției. Partea săgeată cu bretele definește partea corpului.

Alte exemple dar cu parametri.

 fie withParameters = (a, b) => {
  console.log(a+b);
}

cuParametri(10, 20);

Ieșire:
30

 fie sumOfNum = (a, b = 10) => {
  returnează a + b;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Ieșire:
30
50

Nou' pentru... din...' Buclă

for…of este foarte asemănător cu for…in cu ușoare modificări. for...of iterează printr-o listă de elemente precum un Array și returnează elementele (nu indexul lor) unul câte unul. Rețineți că variabila „num” emite fiecare element din matrice, nu indexul.

 fie numere = [5,6,7,8];

pentru (fie număr de numere) {
  console.log(valoare);
}

Ieșire:
5
6
7
8

 let str = 'Arturo';

for (let char of str) {
  console.log(char);
}

Ieșire:
A
r
t
u
r
o

Distrugerea atribuirii variabilelor

Alocarea variabilelor dintr-o matrice una câte una este consumatoare de timp și o prostie. Utilizați doar atribuirea destructorului pentru a realiza acest lucru mai rapid și mai ușor:

 let profile = ['Ioan', 32, 'inginer'];

let [nume, vârstă, job] = profil;

console.log(nume);

Ieșire:
Ioan

Găsiți un obiect specific într-o matrice de obiecte

Una dintre cele mai comune sarcini pe care ar trebui să le îndepliniți în JavaScript este iterarea printr-o serie de obiecte pentru a găsi unul anume. Metoda de găsire este o soluție simplă aici. Pur și simplu conectați criteriile de selecție folosind o funcție anonimă ca argument și sunteți setat:

 lasa personalul = [
  { id: 0, nume: „Nina” },
  { id: 1, nume: „Kevin”},
  { id: 2, nume: „Ioan” }
]

let employee = staff.find(emp => emp.name === 'Ioan');

console.log(client);

Ieșire:
{ id: 2, nume: „Ioan” }

Buclă peste un obiect chei și valori

Structura noastră de date poate fi un obiect complex care conține diverse perechi cheie/valoare. Repetarea fiecărei perechi poate fi puțin ciudată, dar este simplă odată ce ajungem să folosim funcția Object.

După ce cheile obiectului sunt preluate, putem parcurge cheile și valorile în același timp. În soluția care urmează, accesăm fiecare pereche folosind variabilele cheie și valoare în timpul buclei.

 lasă myObject = { Petru: 15, Ioan: 20, Ana: 35};

Object.keys(myObject).forEach((cheie, valoare) => {
  //...Fă ceva
  console.log(cheie, valoare);
});

Ieșire:
Petru 15
Ioan 20
Ana 35

Filtrați o matrice de obiecte pe baza unei condiții

Uneori avem o gamă largă de date pe care dorim să le filtram elemente în funcție de o anumită condiție. Putem o funcție de filtrare pentru a realiza acest lucru. Următoarea soluție are o serie de căi de fișiere. Unele fișiere se află în directorul „data1”, în timp ce altele se află în directorul „data2”. Să credem că vrem să filtram doar pentru un anumit director:

 lasă locația = [
  "fișiere/date1/fișier",
  „fișiere/date1/fișier2”,
  "fișiere/date2/fișier",
  „fișiere/date2/fișier2”
];

let filter = location.filter(cale => cale.includes('data2'));

console.log(filtru);

Ieșire:
[ „fișiere/dir2/fișier”, „fișiere/dir2/fișier2”]

Specificând că șirul de cale trebuie să includă șirul 'data2′, filtrăm toate căile care nu conțin 'data2' în ele. Rețineți, orice funcție pe care o treceți la filtrare trebuie să returneze true pentru ca elementul să fie inclus în rezultat.

Atribuiți chei unui obiect cu același nume

Când atribuiți chei unui obiect dacă cheia are același nume cu variabila care deține valoarea pe care doriți să o atribuiți, puteți omite total atribuirea valorii. Acest lucru vă împiedică să fiți nevoit să vă repetați, lucru pe care toți urăm să facem. Aruncă o privire la acest exemplu:

 let name = „Ioan”;
lasa varsta = 32;
let job = 'inginer';

// in loc de asta
let profile1 = { nume: nume, vârstă: vârstă, job: job };

// fa asta
let profile2 = { nume, vârstă, job };

console.log(profil2);

Ieșire:
{ nume: „John”, vârsta: 32, job: „inginer” }

Utilizarea operatorului de răspândire ES6 „…”

Operatorul de răspândire vă permite să „împrăștiați” literalmente o matrice. Aceasta poate fi folosită pentru a transforma o matrice într-o listă de argumente sau chiar pentru a combina două matrice. L-ați putea folosi și pentru a forma o listă de argumente pentru o funcție.

În primul exemplu, arătăm cum funcționează operatorul de răspândire pe o matrice și transformă fiecare element într-un element individual.

 fie numere1 = [1,2,3,4,5];

console.log(...numerele1);

Ieșire:
1 2 3 4 5

Al doilea exemplu combină conținutul a două matrice prin crearea unei noi matrice temporare care conține ambele conținuturi.

 fie numere2 = [6,7,8,9,10];

fie combinat = [...numbers1, ...numbers2];

console.log(...combinat);

Ieșire:
1 2 3 4 5 6 7 8 9 10

Ultimul exemplu ilustrează modul în care operatorul de răspândire poate transforma o matrice într-o listă de argumente pentru o funcție. Math.max returnează cel mai mare număr dintr-o listă de argumente transmise acestuia. Unul dintre aceste argumente a fost 10, care este cel mai mare.

 fie numere1 = [1,2,3,4,5];

fie numere2 = [6,7,8,9,10];

fie combinat = [...numbers1, ...numbers2];

console.log(Math.max(...combinat));

Ieșire:
10

Noi funcții Getters și Setters

Getters și setters sunt una dintre caracteristicile utile introduse în ES6. Este util dacă folosim clase în JavaScript.

 clasa PersonName {
  constructor(nume) {
    this.name = nume;
  }
  obține Nume() {
    returnează acest.nume;
  }
  set Nume(nume) {
    this.name = nume;
  }
}

let person = new PersonName ("Jon Snow");
console.log(persoană.Nume); // (A)

person.Name = „Dany”; // (B)
console.log(persoană.Nume);

Ieșire:
Jon Snow
Dany

Putem vedea că există două funcții în interiorul clasei PersonName cu proprietăți „get” și „set”. Proprietatea „get” este folosită pentru a obține valoarea variabilei, iar proprietatea „set” este folosită pentru a seta valoarea variabilei. Putem vedea, de asemenea, că funcția get Name (A) este apelată fără paranteză, iar funcția set Name (B) este apelată fără paranteză și este ca și cum ai atribui o valoare variabilei.