Foaie de ieftin de tabele pe Javascript.

Foaie de ieftin de tabele pe Javascript.

Pentru că tabele pe Javascript sunt mereu prezente în dezvoltare și sunt sursa multor întrebări pentru începători sau atunci când vine vorba de manipularea lor în profunzime, iată o scurtă listă de metode și utilizări recurente în dezvoltarea în Javascript.

Articolul va fi împărțit în grupuri de metode, de la cele mai simple și mai cunoscute până la cele mai specifice și mai incongruente. Unele trucuri necesită utilizarea unor biblioteci externe, a căror instalare este recomandată în cazuri particulare care necesită o prelucrare fină sau pentru a face codul mai ușor de citit.

La sfârșitul articolului, veți găsi, de asemenea, un link de descărcare pentru o fișă PDF care enumeră toate sfaturile și trucurile evidențiate în acest articol.

Puteți adăuga elemente la listă în orice moment, așa că nu ezitați să împărtășiți și alte tehnici, dacă doriți.

Noțiuni de bază privind manipularea tabele pe Javascript.

Creați un tabel în javascript.

Principala tehnică de instanțiere a unui tablou este utilizarea unei expresii literale. Rețeaua este instanțiată cu valori definite:

const array = [1, 3, 6, 9];
var array = [1, 3, 6, 9];

Creați o tabel în javascript cu expresia Array() și fără valoare inițială:

var array = new Array();
array[0] = 1;

Construiește o matrice javascript dintr-un obiect iterabil (de exemplu, un șir de caractere):

var string = ‘1369’;
console.log(Array.from(string)); // [‘1’, ‘3’, ‘6’, ‘9’]

Construiți un array javascript din argumente cu .of(). Aveți grijă să nu confundați această metodă cu crearea unui array cu Array(). Aici, argumentele definesc valoarea elementelor, în timp ce în cazul lui Array(), dimensiunea tabloului este definită în primul argument:

var array = Array.of(1, 3, 6, 9);
console.log(array); // [1, 3, 6, 9]

Goliți un tabel în javascript.

Utilizați o dimensiune a tabloului de zero pentru a goli conținutul unui tablou javascript:

var array =  [1, 3, 6, 9]
array.length = 0;

Golirea unui tabel în javascript prin declararea unui tablou gol și înlocuirea elementelor prezente:

var array =  [1, 3, 6, 9]
array = [];

Utilizați metoda splice() pentru a goli complet sau parțial o matrice javascript și conținutul acesteia:

var array =  [1, 3, 6, 9]
array.splice(0, array.length);

Adăugarea și ștergerea de elemente într-un tabel javascript.

Pentru a adăuga un șir de caractere, un număr, o matrice sau un alt tip de variabilă la o matrice javascript, metoda push() este cea mai frecvent utilizată:

var array =  [1, 3, 6, 9];
array.push(11); // [1, 3, 6, 9, 11];

Există o variantă cu metoda unshift(), care funcționează în mod similar, dar de data aceasta adaugă noul element la începutul tabloului:

var array =  [1, 3, 6, 9];
array.unshift(11); // [11,1, 3, 6, 9];

Rețineți că puteți utiliza .unshift() pentru a adăuga mai multe elemente sub forma unor argumente separate prin virgulă.

Rețineți că .unshift() nu numai că adaugă elemente, dar returnează și dimensiunea tabloului după adăugare.

Ștergeți ultimul element dintr-o matrice javascript utilizând metoda .pop():

var array =  [1, 3, 6, 9];
array.pop(); // [1, 3, 6, 9];

Ștergeți primul element al tabelului folosind .shift():

var array =  [1, 3, 6, 9];
array.shift(); // [3, 6, 9];

Recuperarea dimensiunii unui tabel în javascript.

Tehnica clasică de recuperare a mărimii unui tablou constă în utilizarea metodei .length():

var array =  [1, 3, 6, 9];
console.log(array.length); // 4

Recuperarea unor elemente specifice dintr-un tabel în javascript.

Găsiți elementul situat la indexul “a”, indicându-l ca argument între paranteze:

var array =  [1, 3, 6, 9];
console.log(array[1]) ; // 3

Alternativă pentru recuperarea elementului cu indexul “a” utilizând metoda .at():

var array =  [1, 3, 6, 9];
console.log(array.at(1)) ; // 3

Pentru a afla poziția unui element în matrice, utilizați metoda .indexOf(obj):

var array =  [1, 3, 6, 9];
console.log(array.indexOf(6)); // 2

O variantă cu ultima apariție a elementului în tabel este posibilă cu ajutorul funcției .lastIndexOf():

var array =  [1, 3, 6, 9];
console.log(array.lastIndexOf(6)); // 2

Pentru a prelua o parte a unui array într-un interval, abordarea standard este de a utiliza metoda .splice(startIndex, endIndex):

var array =  [1, 3, 6, 9];
array.splice(0,2); // [1, 3]

Important: Indicele de început este inclus, în timp ce indicele de sfârșit este exclus.

Găsiți indexul primului element care îndeplinește o condiție logică utilizând metoda .findIndex():

var array =  [1, 3, 6, 9];
array.findIndex(val => val > 3) // 2

Returnează primul element care satisface o condiție logică folosind metoda .find():

var array =  [1, 3, 6, 9];
array.find(val => val > 3) // 6

Găsiți cel mai mic element dintr-o matrice javascript cu .sort():

var array =  [1, 3, 6, 9];
console.log(array.sort((a, b) => return a-b)); // 6

Găsiți elemente similare în două array-uri javascript utilizând metodele .filter() și .includes():

var array =  [1, 3, 6, 9];
var array2 = [6, 9, 11, 13];
var commonElement = array.filter( el => array2.includes(el));
console.log(commonElement); // [6, 9]

Calculați suma valorilor dintr-o matrice javascript folosind .reduce():

var array =  [1, 3, 6, 9];
console.log(array.reduce((a, b) => a + b)); // 19

Preluarea listei de indici dintr-un tablou folosind .keys():

var array =  [1, 3, 6, 9];
for( const idx of array.keys()){
	console.log(idx); // 0 1 2 3
}

Validarea prezenței elementelor într-un tabel în javascript.

Verificați dacă o variabilă este prezentă într-o matrice javascript folosind .isArray():

var array =  [1, 3, 6, 9];
console.log(Array.isArray(array); // true

Verificați prezența unui element în matricea javascript folosind .includes():

var array =  [1, 3, 6, 9];
console.log(array.includes(3)); // true
console.log(array.includes(11)); // false

Verifică dacă toate elementele unei matrice javascript validează o condiție logică definită cu metoda .every():

var array =  [1, 3, 6, 9];
console.log(array.every(e => e < 10)); // true
console.log(array.every(e => e > 10)); // false

Verificați dacă există cel puțin un element într-o matrice javascript care validează o condiție logică cu .some():

var array =  [1, 3, 6, 9];
console.log(array.some(e => e < 10)); // true
console.log(array.some(e => e > 10)); // false

Găsiți cel mai mare element dintr-o matrice javascript utilizând biblioteca Math:

var array =  [1, 3, 6, 9];
console.log(Math.max.apply(null, array)); // 9

Găsiți cel mai mic element dintr-o matrice javascript utilizând biblioteca Math:

var array =  [1, 3, 6, 9];
console.log(Math.min.apply(null, array)); // 1

Manipularea tabele pe Javascript.

Păstrați doar o parte a tabelului pe baza unei condiții logice folosind .filter():

var array =  [1, 3, 6, 9];
console.log(array.filter(e => e < 6)); // [1, 3]

Uniți două array-uri într-un singur array javascript folosind metoda .concat():

var array =  [1, 3, 6, 9];
var array2 = [11, 13, 15, 17];
console.log(array.concat(array2); // [1, 3, 6, 9, 11, 13, 15, 17]

Transformă o matrice într-un șir de caractere cu un element separator folosind .join(element):

var array =  [1, 3, 6, 9];
console.log(array.join(‘or”); // “1 or 3 or 6 or 9”

Păstrează numai o secțiune a unui tablou care urmează un interval definit cu metoda .slice():

var array =  [1, 3, 6, 9];
console.log(array.slice(1, 2); // [3]

Convertiți o matrice javascript într-un șir de caractere utilizând funcția .toString():

var array =  [1, 3, 6, 9];
console.log(array.toString()); // “1, 3, 6, 9”

Conversia unuia sau mai multor elemente dintr-un tablou în mai multe elemente dintr-un tablou utilizând .flat():

var array =  [1, 3, 6, [9, 11, 13]];
console.log(array.flat(1)); // [1, 3, 6, 9, 11, 13]

Alternativ, conversia necesită, de asemenea, o transformare cu o funcție care utilizează metoda .flatMap():

var array =  [1, 3, 6, [9, ‘11’, 13]];
console.log(array.flatMap(a => a*2)); // [1, 3, 6, 18, 22, 26]

Eliminați elemente din matrice în funcție de un interval folosind metoda .splice(index, howMany):

var array =  [1, 3, 6, 9];
console.log(array.splice(2, 2)); // [1, 3]

Prin adăugarea de elemente ca argumente, este posibil să se adauge noi intrări în tabel după ștergerea acestora.

var array =  [1, 3, 6, 9];
console.log(array.splice(2, 2, 5, 7)); // [1, 3, 5, 7]

Inversează poziția elementelor dintr-o matrice folosind metoda .reverse():

var array =  [1, 3, 6, 9];
console.log(array.reverse()); // [9, 6, 3, 1]

Modificați toate elementele prin înlocuirea lor cu o singură valoare folosind metoda .fill(element):

var array =  [1, 3, 6, 9];
console.log(array.fill(1)); // [1, 1, 1, 1]

Copiați elementele dintr-o matrice javascript și adăugați-le într-o anumită poziție din matrice folosind .copyWithin():

var array =  [1, 3, 6, 9];
console.log(array.copyWithin(1, 0, 2)); // [1, 3, 1, 9]

Construiți un nou tablou javascript folosind o funcție pentru a transforma elementele unui alt tablou folosind .map():

var array =  [1, 3, 6, 9];
console.log(array.map(a => a*2)); // [2, 6, 12, 18]

Sortarea elementelor unui tabel în javascript.

Sortați elementele unui array javascript în ordine crescătoare utilizând metoda .sort():

var array =  [1, 9, 3, 6];
console.log(array.sort()); // [1, 3, 6, 9]

Amestecă aleatoriu elementele unui array javascript folosind metoda .sort():

var array =  [1, 9, 3, 6];
console.log(array.sort((a,b) => 0.5 - Math.random() )); // [9, 1, 6, 3]

Transformarea și conversia unui tabel în javascript.

Convertește o matrice javascript într-un obiect folosind:

var array =  [1, 9, 3, 6];
var obj = { …array };
console.log(obj); // { 0: 1, 1: 9, 2: 3, 3: 6} 

Parcurgeți un tabel folosind bucle:

Parcurgeți un tablou cu indicii și elementele sale folosind metoda .entries():

var array =  [1, 3, 6, 9];
for(const [index, element] of array.entries()){
	console.log(index, element); // 0 1, 1 3…
}

Parcurgeți o matrice utilizând metoda .forEach():

var array =  [1, 3, 6, 9];
array.forEach(element => console.log(element)); // 1 3 6 9

Modalitate alternativă de navigare într-un tablou folosind .values():

var array =  [1, 3, 6, 9];
for(const value of array.values()){
	console.log(value); // 1 3 6 9
}

Biblioteca Lodash pentru procesarea avansată a tabel în javascript.

Lodash este o bibliotecă care oferă o serie de instrumente foarte utile pentru procesarea variabilelor în javascript, în special a matricelor. Metodele oferite de Lodash sunt foarte modulare și sunt recomandate pentru proiectele care necesită o manipulare semnificativă a matricelor.

Loadash poate fi instalat rapid într-un proiect folosind programul de instalare a pachetelor npm. Comanda este: npm i lodash

Lista de mai jos nu include toate metodele oferite de bibliotecă. Acestea sunt doar metodele care oferă funcționalități suplimentare față de cele deja disponibile în mod nativ în vanilla js. Cu toate acestea, merită menționat faptul că Lodash oferă alternative la aproape toate manipulările de tabele native în javascript.

Împărțiți un tablou în mai multe tablouri cu un număr de elemente specificat ca argument folosind metoda .chunk():

var array =  [1, 3, 6, 9];
console.log(_.chunk(array, 2)); // [[1, 3], [6,9]]

Eliminați elementele eronate (null, undefined, ”, false, NaN) dintr-o matrice javascript utilizând metoda _.compact():

var array =  [1, undefined, 3, null, 6, ‘’, 9];
console.log(_.compact(array)); // [1, 3, 6, 9]

Șterge un număr de elemente definite ca argument, începând de la începutul tabloului folosind metoda _.drop():

var array =  [1, 3, 6, 9];
console.log(_.drop(array, 2)); // [6, 9]

Alternativ, puteți șterge elementele de la capăt folosind metoda _.dropRight():

var array =  [1, 3, 6, 9];
console.log(_.drop(array, 2)); // [1, 3]

Transformă array-urile în obiecte formate dintr-o pereche de valori și chei folosind metoda _.fromPairs():

var array =  [[1: ‘a’], [2, ‘b’], [3, ‘c’], [4, ‘d’]];
console.log(_.fromPairs(array)); // { 1:’a’, 2:’b’, 3:’c’, 4:’d’ }

Șterge toate elementele unui array javascript cu valori definite în metoda _.pull():

var array =  [1, 3, 6, 9];
console.log(_.pull(array, 1, 9)); // [3, 6]

Metoda inversă a metodei _.pull() șterge elementele care nu sunt incluse într-o matrice furnizată ca argument:

var array =  [1, 3, 6, 9];
console.log(_.pullAll(array, [1, 9])); // [1, 9]

Păstrați numai elementele cu o singură valoare într-o matrice javascript cu _.uniq():

var array =  [1, 3, 3, 6, 9];
console.log(_.sortedUniq(array)); // [1, 3, 6, 9]

Obțineți un element aleatoriu dintr-o matrice javascript folosind _.sample():

var array =  [1, 3, 6, 9];
console.log(_.sample(array)); // 6

Concluzie

Elementele prezentate în această listă acoperă multe dintre operațiile necesare pentru a utiliza tabelele în javascript. Există mai multe abordări diferite pentru a face același lucru. Intrând în detalii, unele dintre ele sunt considerate, pe bună dreptate, mai recomandabile, dar în realitate acest lucru depinde în primul rând de necesitate și de obiceiurile de dezvoltare. De aceea, acest articol nu intră în detalii.

Dacă aveți sfaturi sau tehnici pe care să le adăugați la această listă, nu ezitați să le împărtășiți în secțiunea de comentarii :-).

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer