Î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.
Conţinut
- 1 Hartă în JavaScript
- 1.1 Cum se creează și se inițializează o hartă în JavaScript
- 1.2 Cum se adaugă valori la o hartă în JavaScript
- 1.3 Cum să obțineți valori dintr-o hartă în JavaScript
- 1.4 Totul despre cheile de hartă în JavaScript
- 1.5 Proprietăți și metode ale hărții în JavaScript
- 1.6 MapIterator: chei (), valori () și intrări () în JavaScript
- 1.7 Cum să iterez peste o hartă în JavaScript
- 1.8 Cum se convertește un obiect într-o hartă în JavaScript
- 1.9 Cum se convertește o hartă într-un obiect în JavaScript
- 1.10 Cum se convertește o hartă într-o matrice în JavaScript
- 1.11 Hartă vs. Obiect: Când ar trebui să le folosiți?
- 2 Setați în JavaScript
- 2.1 Cum se creează și se inițializează un set în JavaScript
- 2.2 Setați proprietăți și metode în JavaScript
- 2.3 Cum să iterez peste un set în JavaScript
- 2.4 Cum se enumeră peste un set în JavaScript
- 2.5 Seturi și tablouri în JavaScript
- 2.6 Cum se convertește un set într-o matrice în JavaScript
- 2.7 Valori unice dintr-o matrice utilizând Setarea în JavaScript
- 2.8 Set și Obiect în JavaScript
- 3 În concluzie
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
, number
etc.) 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-unMap
: - 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 dinMap
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()
caMap
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 dimensiuneaSet
. Returnează numărul de elemente din acesta: - Folosește
add(element)
metoda pentru a adăuga un element laSet
:
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 (🥦) înSet
: - Folosește
delete(element)
metoda pentru a elimina avocado (🥑) dinSet
:
// 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-unSet
:
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.
#Cum #utilizează #colecțiile #JavaScript #hartă #și #setare
Cum se utilizează colecțiile JavaScript – hartă și setare