In dit bericht wordt het verschil tussen kaart en object in JavaScript uitgelegd.
Hoe een object in JavaScript te definiëren?
In JavaScript is een object een verzameling eigenschappen, elk met een sleutel-waardepaar. De ' sleutel ' is de ' naam ', en een ' waarde ' is de 'waarde' tegen de sleutel. Objecten kunnen objecten uit de echte wereld vertegenwoordigen, zoals een auto, een persoon of een bankrekening. Ze kunnen ook meer abstracte objecten vertegenwoordigen, zoals een wiskundig punt in de ruimte, een kleur of een datum.
Syntaxis
Een object kan worden gemaakt met behulp van letterlijke objectnotatie {} haakjes of de objectconstructor. Gebruik de onderstaande syntaxis met behulp van de letterlijke notatie of haakjes:
const voorwerp = {
sleutel : waarde,
sleutel : waarde
}
Een object maken met behulp van de Object-constructor of de ' nieuw ” zoekwoord, gebruik dan de volgende syntaxis:
const voorwerp = nieuw Voorwerp ( ) ;
voorwerp. sleutel = waarde ;
Opmerking: Houd er rekening mee dat de sleutels of namen van de objecteigenschappen een tekenreeks moeten zijn.
Voorbeeld 1: maak een object met behulp van letterlijke notatie in JavaScript
In het volgende voorbeeld maken we een object met de naam ' stdObject ” met behulp van letterlijke notatie of haakjes:
var stdObject = {
naam : 'John' ,
leeftijd : 18 ,
rolnr : 25 ,
standaard : 9
}
Print het object op de console:
troosten. loggen ( stdObject ) ;Uitgang
Voorbeeld 2: maak een object met Object Constructor in JavaScript
Hier zullen we een object maken met behulp van de Object-constructor met behulp van de ' nieuw ” trefwoord:
const stdObject = nieuw Voorwerp ( ) ;Voeg nu de eigenschappen (sleutelwaarde) van objecten toe met behulp van de punt(.)-notatie:
stdObject. naam = 'neuken' ;stdObject. leeftijd = 19 ;
stdObject. rolnr = vijftien ;
stdObject. standaard = 10 ;
Geef ten slotte het object weer op de console met behulp van de ' console.log() ” methode:
troosten. loggen ( stdObject ) ;Uitgang
Hoe de kaart in JavaScript te definiëren?
In JavaScript is een ' Kaart ” is een gegevensstructuur die sleutel-waardeparen bevat, vergelijkbaar met een object. Hiermee kunt u gegevens koppelen aan sleutels en de gegevens later ophalen met behulp van de sleutels. Kaarten kunnen worden gebruikt om woordenboeken, hashtabellen en andere gegevensstructuren te implementeren die sleutels aan waarden toewijzen.
Syntaxis
Gebruik de volgende syntaxis om een kaart te initialiseren:
const kaart = nieuw Kaart ( [[ 'sleutel' , 'waarde' ] ,
[ 'sleutel' , 'waarde' ]
] ) ;
U kunt ook een kaart maken met behulp van de kaartconstructor of door de nieuwe operator te gebruiken, en waarden instellen met behulp van de ' set() ” methode:
const kaart = nieuw Kaart ( ) ;kaart. set ( 'sleutel' , 'waarde' ) ;
Voorbeeld: maak een kaart in JavaScript
In het gegeven voorbeeld zullen we een kaart maken met beide syntaxis.
Maak een kaart met behulp van de initialisatiemethode. Hier zullen we sleutels instellen als een tekenreeks, terwijl u sleutels in een kaart in elk type kunt instellen:
const kaartStd = nieuweKaart ( [[ 'naam' , 'John' ] ,
[ 'leeftijd' , 18 ] ,
[ 'rollno' , 25 ] ,
[ 'standaard' , 9 ] ,
] ) ;
Of maak een kaart door de kaartconstructor of het nieuwe trefwoord/operator aan te roepen:
const kaartStd = nieuw Kaart ( ) ;Stel waarden in Map in een sleutel-waardepaar in met behulp van de ' set() ” methode:
kaartStd. set ( 'naam' , 'John' ) ;kaartStd. set ( 'leeftijd' , 18 ) ;
kaartStd. set ( 'rollno' , 25 ) ;
kaartStd. set ( 'standaard' , 9 ) ;
Om de kaart op de console af te drukken, gebruikt u de ' inzendingen() ” methode met de “ voor-van ” lus:
voor ( const [ sleutel waarde ] van mapStd. inzendingen ( ) ) {troosten. loggen ( `$ { sleutel } : $ { waarde } ` ) ;
}
Of gebruik de ' krijgen() ” methode:
troosten. loggen ( 'De rollno van ' + kaartStd. krijgen ( 'naam' ) + ' is ' + kaartStd. krijgen ( 'rollno' ) ) ;De uitvoer geeft alle eigenschappen van de kaart weer en de waarde van de specifieke eigenschap:
Kaart versus object in JavaScript
Het belangrijkste verschil tussen de kaart en het object is als volgt:
| Kaart | Voorwerp |
| Het werd geïntroduceerd in ECMAScript 6 in 2015. | JavaScript introduceerde het gegevenstype Object in de eerste versie (ECMAScript 1) die in 1997 werd uitgebracht. |
| Kaart maakt toetsen van elk gegevenstype mogelijk (bijv. Objecten, functies, getallen, enz.). | Objectsleutels moeten strings zijn. |
| De eigenschappen van een kaart zijn toegankelijk met behulp van de get() methode. | Objecteigenschappen zijn toegankelijk met behulp van puntnotatie of vierkante haaknotatie. |
| Kaart heeft een ingebouwde grootte-eigenschap om het aantal sleutel-waardeparen te retourneren | Object heeft deze functie niet. |
| Kaart is herhaalbaar. Hiermee kunt u alle sleutel-waardeparen doorlopen met behulp van enkele ingebouwde methoden, zoals forEach(), keys(), values() en entries(). | Het object is niet itereerbaar. Het is nodig om 'for-in'-lussen of de methode Object.entries() te gebruiken voor het herhalen van sleutel-waardeparen. |
| Kaart is besteld. | Object is ongeordend. |
Bij het werken met kleine gegevenssets is het prestatieverschil tussen Kaarten en objecten te verwaarlozen, maar bij het werken met grotere gegevenssets kan Kaarten sneller zijn omdat ze zijn geoptimaliseerd voor prestaties.
Wanneer heeft Map de voorkeur boven objecten in JavaScript?
Gebruik de ' Kaart ' data structuur. Objecten worden gebruikt wanneer u tekenreeksen als sleutels moet gebruiken en wanneer u geen van de functies van Kaarten nodig hebt. Het prestatieverschil tussen Maps en objecten is verwaarloosbaar bij het werken met kleine datasets, maar bij het werken met grotere datasets kan Maps sneller zijn omdat ze zijn geoptimaliseerd voor prestaties.
Conclusie
Kaart en Object worden beide gebruikt om gegevens op te slaan als sleutel-waardeparen in JavaScript, maar ze hebben enkele verschillen. Kaart is een krachtigere en flexibelere gegevensstructuur dan Object en is de voorkeurskeuze wanneer u sleutel-waardeparen moet opslaan die moeten worden geordend, sleutels van verschillende gegevenstypen moeten hebben of een grootte-eigenschap hebben. Dit bericht legde het verschil uit tussen kaart en object in JavaScript.