Cum se utilizează colecțiile JavaScript – hartă și setare

În JavaScript, objects sunt utilizate pentru a stoca mai multe valori ca o structură complexă de date.

Un obiect este creat cu acolade {…} și o listă de proprietăți. O proprietate este o pereche cheie-valoare în care key trebuie să fie un șir și value poate fi de orice tip.

Pe de altă parte, arrays sunt o colecție comandată care poate conține date de orice tip. În JavaScript, tablourile sunt create cu paranteze pătrate [...] și permite elemente duplicate.

Până la ES6 (ECMAScript 2015), JavaScript objects și arrays au fost cele mai importante structuri de date pentru a gestiona colecțiile de date. Comunitatea dezvoltatorilor nu a avut multe opțiuni în afara acestui lucru. Chiar și așa, o combinație de obiecte și tablouri a reușit să gestioneze datele în multe scenarii.

Cu toate acestea, au existat câteva neajunsuri,

• Cheile obiect pot fi doar de tip string.
• Obiectele nu mențin ordinea elementelor inserate în ele.
• Obiectelor le lipsește unele metode utile, ceea ce le face dificil de utilizat în anumite situații. De exemplu, nu puteți calcula dimensiunea (length) a unui obiect cu ușurință. De asemenea, enumerarea unui obiect nu este atât de simplă.
• Tablourile sunt colecții de elemente care permit duplicate. Suportarea matricilor care au numai elemente distincte necesită logică și cod suplimentar.

Odată cu introducerea ES6, am obținut două noi structuri de date care soluționează deficiențele menționate mai sus: Map și Set. În acest articol, vom analiza amândouă îndeaproape și vom înțelege cum să le folosim în diferite situații.

Hartă în JavaScript

Map este o colecție de perechi cheie-valoare în care cheia poate fi de orice tip. Map își amintește ordinea inițială în care au fost adăugate elementele, ceea ce înseamnă că datele pot fi recuperate în aceeași ordine în care au fost inserate.

Cu alte cuvinte, Map are caracteristici ale ambelor Object și Array:

• La fel ca un obiect, acceptă structura perechii cheie-valoare.
• La fel ca o matrice, își amintește ordinea de inserare.

Cum se creează și se inițializează o hartă în JavaScript

Un nou Map poate fi creat astfel:

const map = new Map();

Care returnează un gol Map:

Map(0) {}

Un alt mod de a crea un Map este cu valori inițiale. Iată cum să creați un Map cu trei perechi cheie-valoare:

const RoutechBlog = new Map([
  ['name', 'Routech'],
  ['type', 'blog'],
  ['writer', 'Tapas Adhikary'],
]);

Care returnează un Map cu trei elemente:

Map(3) {"name" => "Routech", "type" => "blog", "writer" => "Tapas Adhikary"}

Cum se adaugă valori la o hartă în JavaScript

Pentru a adăuga valoare unei hărți, utilizați set(key, value) metodă.

set(key, value) metoda are doi parametri, key și value, unde cheia și valoarea pot fi de orice tip, o primitivă (boolean, string, numberetc.) sau un obiect:

// create a map
const map = new Map();

// Add values to the map
map.set('name', 'Routech');
map.set('type', 'blog');
map.set('writer', 'Tapas Adhikary');

Ieșire:

Map(3) {"name" => "Routech", "type" => "blog", "writer" => "Tapas Adhikary"}

Vă rugăm să rețineți, dacă utilizați aceeași cheie pentru a adăuga o valoare la un Map de mai multe ori, va înlocui întotdeauna valoarea anterioară:

// Add a different writer
map.set('writer', 'Someone else!');

Deci rezultatul ar fi:

Map(3) 
{"name" => "Routech", "type" => "blog", "writer" => "Someone else!"}

Cum să obțineți valori dintr-o hartă în JavaScript

Pentru a obține o valoare de la un Map, folosește get(key) metodă:

map.get('name'); // returns Routech

Totul despre cheile de hartă în JavaScript

Map tastele pot fi de orice tip, primitive sau obiecte. Aceasta este una dintre diferențele majore dintre Map și obiecte JavaScript obișnuite în care cheia poate fi doar un șir:

// create a Map
const funMap = new Map();

funMap.set(360, 'My House Number'); // number as key
funMap.set(true, 'I write blogs!'); // boolean as key

let obj = {'name': 'tapas'}
funMap.set(obj, true); // object as key

console.log(funMap);

Iată rezultatul:

Map(3) 
{
  360 => "My House Number", 
  true => "I write blogs!", 
  {…} => true
}

Un obiect JavaScript obișnuit tratează întotdeauna cheia ca un șir. Chiar și atunci când îi trimiți un primitiv sau un obiect, acesta transformă intern cheia într-un șir:

// Create an empty object
const funObj = {};

// add a property. Note, passing the key as a number.
funObj[360] = 'My House Number';

// It returns true because the number 360 got converted into the string '360' internally!
console.log(funObj[360] === funObj['360']);

Proprietăți și metode ale hărții în JavaScript

JavaScript Map are proprietăți și metode încorporate care îl fac ușor de utilizat. Iată câteva dintre cele mai comune:

• Folosește size proprietate de a ști câte elemente sunt într-un Map:
• Căutați un element cu has(key) metodă:
• Eliminați un element cu delete(key) metodă:
• Folosește clear() metodă pentru a elimina toate elementele din Map o dată:

console.log('size of the map is', map.size);

// returns true, if map has an element with the key, 'John'
console.log(map.has('John')); 


// returns false, if map doesn't have an element with the key, 'Tapas'
console.log(map.has('Tapas')); 

map.delete('Sam'); // removes the element with key, 'Sam'.

// Clear the map by removing all the elements
map.clear(); 

map.size // It will return, 0

MapIterator: chei (), valori () și intrări () în JavaScript

Metodele keys(), values() și entries() metodele returnează a MapIterator, ceea ce este excelent, deoarece puteți utiliza un for-of sau forEach bucla direct pe ea.

În primul rând, creați un simplu Map:

const ageMap = new Map([
  ['Jack', 20],
  ['Alan', 34],
  ['Bill', 10],
  ['Sam', 9]
]);

• Obțineți toate cheile:
• Obțineți toate valorile:
• Obțineți toate intrările (perechi cheie-valoare):

console.log(ageMap.keys());

// Output:

// MapIterator {"Jack", "Alan", "Bill", "Sam"}

console.log(ageMap.values());

// Output

// MapIterator {20, 34, 10, 9}

console.log(ageMap.entries());

// Output

// MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}

Cum să iterez peste o hartă în JavaScript

Puteți utiliza fie forEach sau for-of bucla pentru a itera peste un Map:

// with forEach
ageMap.forEach((value, key) => {
   console.log(`${key} is ${value} years old!`);
});

// with for-of
for(const [key, value] of ageMap) {
  console.log(`${key} is ${value} years old!`);
}

Rezultatul va fi același în ambele cazuri:

Jack is 20 years old!
Alan is 34 years old!
Bill is 10 years old!
Sam is 9 years old!

Cum se convertește un obiect într-o hartă în JavaScript

Este posibil să întâlniți o situație în care trebuie să convertiți un object la o Map-com structura. Puteți utiliza metoda entries de Object pentru a face asta:

const address = {
  'Tapas': 'Bangalore',
  'James': 'Huston',
  'Selva': 'Srilanka'
};

const addressMap = new Map(Object.entries(address));

Cum se convertește o hartă într-un obiect în JavaScript

Dacă doriți să faceți invers, puteți utiliza fromEntries metodă:

Object.fromEntries(map)

Cum se convertește o hartă într-o matrice în JavaScript

Există câteva moduri de a converti o hartă într-o matrice:

• Folosind Array.from(map):
• Utilizarea operatorului spread:

const map = new Map();
map.set('milk', 200);
map.set("tea", 300);
map.set('coffee', 500);

console.log(Array.from(map));

console.log([...map]);

Hartă vs. Obiect: Când ar trebui să le folosiți?

Map are caracteristici ale ambelor object și array. In orice caz, Map este mai mult ca un object decât array datorită naturii stocării datelor în key-value format.

Similitudinea cu obiectele se termină însă aici. După cum ați văzut, Map este diferit în multe feluri. Deci, care ar trebui să utilizați și când? Cum decizi?

Utilizare Map cand:

• Nevoile tale nu sunt atât de simple. Poate doriți să creați chei care nu sunt șiruri. Stocarea unui obiect ca cheie este o abordare foarte puternică. Map vă oferă această abilitate în mod implicit.
• Aveți nevoie de o structură de date în care elementele să poată fi comandate. Obiectele obișnuite nu mențin ordinea intrărilor lor.
• Căutați flexibilitate fără a vă baza pe o bibliotecă externă precum Lodash. Puteți ajunge să utilizați o bibliotecă precum Lodash, deoarece nu găsim metode precum has (), values ​​(), delete () sau o proprietate precum dimensiunea cu un obiect obișnuit. Harta vă ușurează acest lucru, oferind în mod prestabilit toate aceste metode.

Folosiți un obiect când:

• Nu aveți niciuna dintre nevoile enumerate mai sus.
• Te bazezi pe JSON.parse() ca Map nu poate fi analizat cu el.

Setați în JavaScript

A Set este o colecție de elemente unice care pot fi de orice tip. Set este, de asemenea, o colecție ordonată de elemente, ceea ce înseamnă că elementele vor fi recuperate în aceeași ordine în care au fost inserate.

A Set în JavaScript se comportă la fel ca un set matematic.

Cum se creează și se inițializează un set în JavaScript

Un nou Set poate fi creat astfel:

const set = new Set();
console.log(set);

Iar rezultatul va fi gol Set:

Set(0) {}

Iată cum să creați un Set cu câteva valori inițiale:

const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruteSet);

Ieșire:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Setați proprietăți și metode în JavaScript

Set are metode pentru a adăuga un element la acesta, a șterge elemente din acesta, a verifica dacă există un element în el și a-l șterge complet:

• Folosește size proprietate pentru a cunoaște dimensiunea Set. Returnează numărul de elemente din acesta:
• Folosește add(element) metoda pentru a adăuga un element la Set:

set.size

// Create a set - saladSet
const saladSet = new Set();

// Add some vegetables to it
saladSet.add('🍅'); // tomato
saladSet.add('🥑'); // avocado
saladSet.add('🥕'); // carrot
saladSet.add('🥒'); // cucumber

console.log(saladSet);


// Output

// Set(4) {"🍅", "🥑", "🥕", "🥒"}

Ador castraveții! Ce zici de adăugarea a încă unul?

Oh, nu pot – Set este o colecție de unic elemente:

saladSet.add('🥒');
console.log(saladSet);

Rezultatul este același ca înainte – nimic nu a fost adăugat la saladSet.

• Folosește has(element) metoda de căutare dacă avem un morcov (🥕) sau broccoli (🥦) în Set:
• Folosește delete(element) metoda pentru a elimina avocado (🥑) din Set:

// The salad has a🥕, so returns true
console.log('Does the salad have a carrot?', saladSet.has('🥕'));

// The salad doesn't have a🥦, so returns false
console.log('Does the salad have broccoli?', saladSet.has('🥦'));

saladSet.delete('🥑');
console.log('I do not like 🥑, remove from the salad:', saladSet);

Acum salata noastră Set este după cum urmează:

Set(3) {"🍅", "🥕", "🥒"}

• Folosește clear() metoda de eliminare a tuturor elementelor dintr-un Set:

saladSet.clear();

Cum să iterez peste un set în JavaScript

Set are o metodă numită values() care returnează un SetIterator pentru a obține toate valorile sale:

// Create a Set
const houseNos = new Set([360, 567, 101]);

// Get the SetIterator using the `values()` method
console.log(houseNos.values());

Ieșire:

SetIterator {360, 567, 101}

Putem folosi un forEach sau for-of bucla pe aceasta pentru a recupera valorile.

Interesant este că JavaScript încearcă să facă Set compatibil cu Map. De aceea găsim două dintre aceleași metode ca Map, keys() și entries().

La fel de Set nu are chei, keys() metoda returnează a SetIterator pentru a-și recupera valorile:

console.log(houseNos.keys());

// Output

// console.log(houseNos.keys());

Cu Map, entries() metoda returnează un iterator pentru a recupera perechi cheie-valoare. Din nou, nu există chei într-un Set, asa de entries() returnează un SetIterator pentru a recupera perechile valoare-valoare:

console.log(houseNos.entries());

// Output

// SetIterator {360 => 360, 567 => 567, 101 => 101}

Cum se enumeră peste un set în JavaScript

Putem enumera peste un set folosind forEach și for-of bucle:

// with forEach

houseNos.forEach((value) => {
   console.log(value);
});


// with for-of

for(const value of houseNos) {
   console.log(value);
 }

Rezultatul ambelor este:

360
567
101

Seturi și tablouri în JavaScript

O matrice, ca un Set, vă permite să adăugați și să eliminați elemente. Dar Set este destul de diferit și nu este menit să înlocuiască tablourile.

Diferența majoră între o matrice și o Set este că matricele vă permit să aveți elemente duplicate. De asemenea, unele dintre Set operațiuni precum delete() sunt mai rapide decât operațiile de matrice ca shift() sau splice().

A se gandi la Set ca o extensie a unei matrice obișnuite, doar cu mai mulți mușchi. Set structura datelor nu este o înlocuire a array. Ambele pot rezolva probleme interesante.

Cum se convertește un set într-o matrice în JavaScript

Conversia a Set într-o matrice este simplu:

const arr = [...houseNos];
console.log(arr);

Valori unice dintr-o matrice utilizând Setarea în JavaScript

Crearea unui Set este o modalitate foarte simplă de a elimina valorile duplicate dintr-o matrice:

// Create a mixedFruit array with a few duplicate fruits
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈'];

// Pass the array to create a set of unique fruits
const mixedFruitSet = new Set(mixedFruit);

console.log(mixedFruitSet);

Ieșire:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Set și Obiect în JavaScript

A Set poate avea elemente de orice tip, chiar și obiecte:

// Create a person object
const person = {
   'name': 'Alex',
   'age': 32
 };

// Create a set and add the object to it
const pSet = new Set();
pSet.add(person);
console.log(pSet);

Ieșire:

Nicio surpriză aici – Set conține un element care este un obiect.

Să schimbăm o proprietate a obiectului și să o adăugăm din nou la set:

// Change the name of the person
person.name="Bob";

// Add the person object to the set again
pSet.add(person);
console.log(pSet);

Care credeți că va fi rezultatul? Două person obiecte sau doar unul?

Iată rezultatul:

Set este o colecție de elemente unice. Prin schimbarea proprietății obiectului, nu am schimbat obiectul în sine. Prin urmare Set nu va permite elemente duplicate.

Set este o structură de date excelentă de utilizat pe lângă matricile JavaScript. Totuși, nu are un avantaj imens față de matricele obișnuite.

Utilizare Set atunci când trebuie să mențineți un set distinct de date pentru a efectua operațiuni de setare pe like union, intersection, difference, si asa mai departe.

În concluzie

Iată un depozit GitHub pentru a găsi tot codul sursă utilizat în acest articol. Dacă vi s-a părut de ajutor, vă rugăm să vă arătați sprijinul oferindu-i o stea: https://github.com/atapas/js-collections-map-set

S-ar putea să vă placă și unele dintre celelalte articole ale mele:

• Sfaturi și trucuri JavaScript preferate
• Egalitatea și similitudinea JavaScript cu ==, === și Object.is ()

Dacă acest articol a fost util, vă rugăm să îl împărtășiți, astfel încât și alții să îl poată citi. Puteți să mă @ pe Twitter (@tapasadhikary) cu comentarii sau nu ezitați să mă urmați.