JavaScript: arrays versus objecten. Drie geheimen van arrays in JavaScript die u misschien nog niet kent

• Vertaling

• I. Itereren over echte arrays
  1. voorElke methode en gerelateerde methoden
  2. voor lus
  3. Correct gebruik voor...in lus
  4. for...of loop (impliciet gebruik van iterator)
  5. Expliciet gebruik van iterator
• 1. Methoden gebruiken om over echte arrays te itereren
  2. Converteren naar een echte array
  3. Een opmerking over runtime-objecten

I. Itereren over echte arrays

1. methode Array.prototype.forEach ;
2. klassiek voor lus
3. een “correct” geconstrueerde for...in-lus.

1. for...of loop (impliciet gebruik van iterator);
2. expliciet gebruik van iterator.

1. De forEach-methode en gerelateerde methoden

Gebruiksvoorbeeld:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
IN algemeen geval het gebruik van forEach vereist verbinding met de es5-shim-emulatiebibliotheek voor browsers die deze methode niet standaard ondersteunen. Deze omvatten IE 8 en hoger vroege versies, die hier en daar nog steeds in gebruik zijn.

Het voordeel van forEach is dat het niet nodig is om lokale variabelen te declareren om de index en waarde van het huidige array-element op te slaan, omdat deze automatisch worden doorgegeven aan de functie terugbellen(callback) als argumenten.

Als u zich zorgen maakt over de mogelijke kosten van het terugbellen voor elk element, hoeft u zich geen zorgen te maken en dit te lezen.

ForEach is ontworpen om alle elementen van een array te doorlopen, maar daarnaast biedt ES5 nog een aantal handige methoden om alle of enkele elementen te doorlopen en er enkele acties op uit te voeren:

• every-retourneert true als de callback voor elk element van de array een waarde retourneert die naar true kan worden geconverteerd.
• some - retourneert waar als voor ten minste één element van de array de callback een waarde retourneert die naar waar kan worden geconverteerd.
• filteren - creëert nieuwe reeks, inclusief deze elementen bronarray, waarvoor de callback true retourneert.
• map - creëert een nieuwe array bestaande uit de waarden die worden geretourneerd door de callback.
• reduce - reduceert een array tot één enkele waarde, waarbij op zijn beurt een callback wordt toegepast op elk array-element, te beginnen met het eerste (kan handig zijn voor het berekenen van de som van array-elementen en andere samenvattingsfuncties).
• reduceRight - werkt op dezelfde manier als reduceren, maar doorloopt de elementen in omgekeerde volgorde.

2. Voor lus

Var a = ["a", "b", "c"]; var-index; voor (index = 0; index< a.length; ++index) { console.log(a); }
Als de lengte van de array constant is gedurende de hele lus, en de lus zelf tot een prestatiekritisch codegedeelte behoort (wat onwaarschijnlijk is), dan kun je een “meer optimale” versie van gebruiken, waarin de lengte van de array wordt opgeslagen. :

Var a = ["a", "b", "c"]; var-index, len; voor (index = 0, len = a.lengte; index< len; ++index) { console.log(a); }
In theorie zou deze code iets sneller moeten werken dan de vorige.

Als de volgorde van de elementen niet belangrijk is, kun je nog verder gaan in termen van optimalisatie en de variabele verwijderen voor het opslaan van de lengte van de array, door de volgorde van de zoekopdracht in omgekeerde volgorde te veranderen:

Var a = ["a", "b", "c"]; var-index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
In moderne JavaScript-engines betekenen dergelijke optimalisatiespellen echter meestal niets.

3. Correct gebruik van de for...in-lus

In sommige gevallen kan for...in echter nuttig zijn, bijvoorbeeld bij het herhalen van verspreide arrays, zolang u voorzorgsmaatregelen neemt, zoals weergegeven in het onderstaande voorbeeld:

// a - schaarse array var a = ; een = "een"; een = "b"; een = "c"; for (var sleutel in a) ( if (a.hasOwnProperty(sleutel) && /^0$|^\d*$/.test(sleutel) && sleutel<= 4294967294) { console.log(a); } }
In dit voorbeeld worden bij elke iteratie van de lus twee controles uitgevoerd:

1. dat de array zijn eigen eigenschap heeft, genaamd key (niet geërfd van het prototype).
2. die sleutel is een tekenreeks die de decimale representatie bevat van een geheel getal waarvan de waarde kleiner is dan 4294967294 . Waar komt het laatste getal vandaan? Uit de definitie van een array-index in ES5, waaruit blijkt dat de hoogste index die een element in een array kan hebben, is: (2^32 - 2) = 4294967294 .

Om niet elke keer zo'n omslachtige controlecode te schrijven als je door een array moet itereren, kun je deze als een aparte functie schrijven:

Functie arrayHasOwnIndex(array, sleutel) ( return array.hasOwnProperty(sleutel) && /^0$|^\d*$/.test(sleutel) && sleutel<= 4294967294; }
Dan wordt het lichaam van de lus uit het voorbeeld aanzienlijk verkleind:

For (toets a in) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
De hierboven besproken controlecode is universeel en geschikt voor alle gevallen. Maar in plaats daarvan kunt u een kortere versie gebruiken, hoewel formeel niet helemaal correct, maar toch geschikt voor de meeste gevallen:

For (toets a in) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === sleutel) ( console.log(a); ) )

4. For...of loop (impliciet gebruik van iterator)

Iterator is een protocol geïmplementeerd door een object dat een standaardmanier definieert om een ​​reeks waarden te verkrijgen (eindig of oneindig).
Een iterator is een object dat een next()-methode definieert: een functie zonder argumenten die een object retourneert met twee eigenschappen:

1. done (boolean) - waar als de iterator het einde van de itereerbare reeks heeft bereikt. Anders is de waarde false .
2. waarde - definieert de waarde die door de iterator wordt geretourneerd. Kan ongedefinieerd zijn (ontbreekt) als de eigenschap done waar is.

Voorbeeld van gebruik voor...van:

Varval; var a = ["a", "b", "c"]; voor (val van a) ( console.log(val); )
In het bovenstaande voorbeeld roept de for...of-lus impliciet de iterator van het Array-object aan om elke waarde van de array te verkrijgen.

5. Expliciet gebruik van iterator

Var a = ["a", "b", "c"]; var it = a.entries(); var-invoer; while (!(entry = it.next()).done) ( console.log(entry.value); )
In dit voorbeeld retourneert de methode Array.prototype.entries een iterator die wordt gebruikt om de waarden van de array weer te geven. Bij elke iteratie bevat entry.value een array van de vorm [key, value] .

II. Itereren over array-achtige objecten

1. Methoden gebruiken om echte arrays te herhalen

De for en for...in-constructies kunnen op precies dezelfde manier worden toegepast op array-achtige objecten als op echte arrays.

ForEach en andere Array.prototype-methoden zijn ook van toepassing op array-achtige objecten. Om dit te doen, moet u Function.call of Function.apply gebruiken.

Als u bijvoorbeeld forEach wilt toepassen op de eigenschap childNodes van een Node-object, doet u dat als volgt:

Array.prototype.forEach.call(node.childNodes, function(child) (//doe iets met het onderliggende object));
Om deze truc gemakkelijker te kunnen hergebruiken, kun je een verwijzing naar de methode Array.prototype.forEach in een afzonderlijke variabele declareren en deze als snelkoppeling gebruiken:

// (Ervan uitgaande dat alle onderstaande code binnen hetzelfde bereik valt) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // doe iets met het onderliggende object));
Als een array-achtig object een iterator heeft, kan deze expliciet of impliciet worden gebruikt om over het object te itereren op dezelfde manier als voor echte arrays.

2. Converteer naar een echte array

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Als u bijvoorbeeld een NodeList-verzameling naar een daadwerkelijke array wilt converteren, heeft u zoiets als deze code nodig:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update: Zoals vermeld in de opmerkingen

Arrays

Array is een geordende verzameling waarden. De waarden in een array worden elementen genoemd en elk element wordt gekenmerkt door een numerieke positie in de array, een zogenaamde index. Arrays in JavaScript zijn niet getypeerd: elementen van een array kunnen van elk type zijn, en verschillende elementen van dezelfde array kunnen verschillende typen hebben. Array-elementen kunnen zelfs objecten of andere arrays zijn, waardoor u complexe datastructuren kunt maken, zoals arrays van objecten en arrays van arrays.

JavaScript-array-indexen beginnen bij nul en gebruiken 32-bit gehele getallen - het eerste element van de array heeft index 0. JavaScript-arrays zijn dynamisch: ze kunnen naar behoefte groter en kleiner worden; het is niet nodig om vaste arraygroottes te declareren bij het maken ervan, of om geheugen opnieuw toe te wijzen wanneer hun grootte verandert.

Arrays in JavaScript zijn een gespecialiseerde vorm van objecten, en array-indexen betekenen weinig meer dan alleen eigenschapsnamen, die toevallig gehele getallen zijn.

Arrays maken

De eenvoudigste manier om een ​​array te maken is door een letterlijke te gebruiken. Dit is een eenvoudige, door komma's gescheiden lijst met array-elementen omgeven door vierkante haken. De waarden in een array-letterlijke waarde hoeven geen constanten te zijn; het kunnen elke expressie zijn, inclusief objectletterlijke waarden:

Var leeg = ; // Lege array var-nummers = ; // Array met vijf numerieke elementen var misc = [ 1.1, true, "a", ]; // 3 elementen van verschillende typen + achterliggende komma var base = 1024; var tabel = ; // Array met variabelen var arrObj = [, ]; // 2 arrays met daarin objecten

Met de letterlijke array-syntaxis kunt u een optionele volgkomma invoegen, d.w.z. de letterlijke [,] komt overeen met een array met twee elementen, niet drie.

Een andere manier om een ​​array te maken is door de constructor aan te roepen Array(). Je kunt de constructor op drie verschillende manieren aanroepen:

Roep de constructor aan zonder argumenten:

Var arr = nieuwe Array();

In dit geval wordt een lege array gemaakt, gelijk aan de letterlijke.

Roep de constructor aan met een enkel numeriek argument dat de lengte van de array specificeert:

Var arr = nieuwe Array(10);

In dit geval wordt een lege array met de opgegeven lengte gemaakt. Deze vorm van aanroepen van de Array()-constructor kan worden gebruikt om geheugen vooraf toe te wijzen aan een array als het aantal elementen ervan vooraf bekend is. Merk op dat hierdoor geen waarden in de array worden opgeslagen.

Specificeer expliciet de waarden van de eerste twee of meer array-elementen of één niet-numeriek element in de constructoraanroep:

Var arr = nieuwe Array(5, 4, 3, 2, 1, "test");

In dit geval worden de argumenten voor de constructor de waarden van de elementen van de nieuwe array. Het gebruik van array-literals is bijna altijd eenvoudiger dan het gebruik van de Array()-constructor.

Array-elementen lezen en schrijven

Array-elementen zijn toegankelijk via de operator. Links van de haakjes moet een arrayreferentie staan. Binnen de haakjes moet er een willekeurige expressie staan ​​die een niet-negatieve gehele waarde retourneert. Deze syntaxis is nuttig voor zowel het lezen als schrijven van de waarde van een array-element. Daarom zijn alle volgende JavaScript-instructies geldig:

// Maak een array met één element var arr = ["wereld"]; // Lees element 0 var waarde = arr; // Schrijf de waarde naar element 1 arr = 3.14; // Schrijf de waarde naar element 2 i = 2; arr[i] = 3; // Schrijf de waarde naar element 3 arr = "hello"; // Lees elementen 0 en 2, schrijf de waarde naar element 3 arr] = arr;

Laat me u eraan herinneren dat arrays een gespecialiseerd type object zijn. Vierkante haakjes die worden gebruikt om toegang te krijgen tot array-elementen werken precies hetzelfde als vierkante haakjes die worden gebruikt om toegang te krijgen tot objecteigenschappen. De JavaScript-interpreter converteert de numerieke indexen tussen haakjes naar tekenreeksen (index 1 wordt de tekenreeks '1') en gebruikt de tekenreeksen vervolgens als eigenschapsnamen.

Er is niets speciaals aan het converteren van numerieke indexen naar strings: je kunt hetzelfde doen met gewone objecten:

Var obj = (); // Maak een eenvoudig object obj = "één"; // Indexeer het met gehele getallen

Het probleem met arrays is dat wanneer je eigenschapsnamen gebruikt die niet-negatieve gehele getallen zijn, arrays automatisch de waarde van de eigenschap bepalen. lengte. Hierboven hebben we bijvoorbeeld een array arr gemaakt met één enkel element. Vervolgens kende het waarden toe aan de elementen op de indexen 1, 2 en 3. Als gevolg van deze bewerkingen veranderde de waarde van de lengte-eigenschap van de array in 4.

U moet indexen in een array duidelijk onderscheiden van namen van objecteigenschappen. Alle indices zijn eigenschapsnamen, maar alleen eigenschappen waarvan de namen worden weergegeven door gehele getallen zijn indices. Alle arrays zijn objecten en u kunt er eigenschappen met elke gewenste naam aan toevoegen. Als u echter eigenschappen aanraakt die array-indices zijn, reageren arrays door indien nodig de waarde van de lengte-eigenschap bij te werken.

Houd er rekening mee dat negatieve en niet-gehele getallen kunnen worden gebruikt als array-indexen. In dit geval worden getallen geconverteerd naar tekenreeksen, die worden gebruikt als eigenschapsnamen.

Array-elementen toevoegen en verwijderen

We hebben al gezien dat de eenvoudigste manier om elementen aan een array toe te voegen, is door waarden aan nieuwe indices toe te wijzen. U kunt de methode ook gebruiken om een ​​of meer elementen aan het einde van de array toe te voegen. duw():

Var arr = ; // Maak een lege array arr.push("zero"); // Voeg een waarde toe aan het einde arr.push("one",2); // Voeg nog twee waarden toe

U kunt ook een element aan het einde van de array toevoegen door een waarde aan het arr-element toe te wijzen. Om een ​​element aan het begin van een array in te voegen, kun je de methode gebruiken ongedaan maken(), waarmee bestaande elementen in de array naar posities met hogere indexen worden verplaatst.

U kunt array-elementen verwijderen met behulp van de verwijderoperator, net als gewone objecteigenschappen:

Var arr = ; verwijder arr; 2 in arr; // false, index 2 in de array is niet gedefinieerd arr.length; // 3: de verwijderoperator verandert de lengte-eigenschap van de array niet

Het verwijderen van een element is vergelijkbaar (maar iets anders) met het toekennen van de waarde ongedefinieerd aan dat element. Houd er rekening mee dat het toepassen van de verwijderoperator op een array-element de waarde van de lengte-eigenschap niet verandert, noch elementen met hogere indexen naar beneden verschuift om de leegte op te vullen die is ontstaan ​​door het verwijderen van het element.

Het is ook mogelijk om elementen aan het einde van de array te verwijderen door eenvoudigweg een nieuwe waarde aan de lengte-eigenschap toe te kennen. Arrays hebben een methode knal()(het tegenovergestelde van de push()-methode), die de lengte van de array met 1 verkleint en de waarde van het verwijderde element retourneert. Er is ook een methode verschuiving()(het tegenovergestelde van unshift()), waarbij het element aan het begin van de array wordt verwijderd. In tegenstelling tot de delete-operator verschuift de shift()-methode alle elementen naar een positie onder hun huidige index.

Tenslotte is er een multifunctionele methode splitsen(), waarmee u array-elementen kunt invoegen, verwijderen en vervangen. Het verandert de waarde van de lengte-eigenschap en verschuift indien nodig array-elementen naar lagere of hogere indexen. We zullen al deze methoden iets later bekijken.

Multidimensionale arrays

JavaScript ondersteunt geen "echte" multidimensionale arrays, maar biedt wel een goede manier om ze te simuleren met behulp van arrays van arrays. Om toegang te krijgen tot een data-element in een array van arrays, gebruikt u de operator eenvoudigweg twee keer.

Stel bijvoorbeeld dat de variabele matrix een reeks reeksen getallen is. Elk element van matrix[x] is een array van getallen. Om toegang te krijgen tot een specifiek getal in een array, kunt u de uitdrukkingsmatrix[x][y] gebruiken. Hieronder ziet u een specifiek voorbeeld waarbij een tweedimensionale array wordt gebruikt als tafel van vermenigvuldiging:

// Maak een multidimensionale array var table = new Array(10); // Er zijn 10 rijen in de tabel for(var i = 0; i

Methoden van de klasse Array

De ECMAScript 3-standaard definieert Array.prototype als een reeks handige functies voor het werken met arrays, die als methoden op elke array beschikbaar zijn. Deze methoden worden in de volgende subsecties gepresenteerd.

join() methode

De methode Array.join() converteert alle array-elementen naar strings, voegt ze samen en retourneert de resulterende string. Als optioneel argument kunt u een tekenreeks doorgeven aan de methode die wordt gebruikt om de elementen in de resultaatreeks te scheiden. Als er geen scheidingstekenreeks is opgegeven, wordt een komma gebruikt. Het volgende fragment resulteert bijvoorbeeld in de tekenreeks "1,2,3":

Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // "1-2-3"

omgekeerde() methode

De methode Array.reverse() keert de volgorde van de elementen in een array om en retourneert een opnieuw geordende array. De permutatie wordt rechtstreeks in de originele array uitgevoerd, d.w.z. Deze methode creëert geen nieuwe array met de opnieuw geordende elementen, maar herschikt ze in een reeds bestaande array. Het volgende fragment resulteert bijvoorbeeld, met behulp van de methoden reverse() en join(), in de tekenreeks "3,2,1":

Var arr = ; arr.reverse().join(); // "3,2,1"

sort() methode

De methode Array.sort() sorteert de elementen in de bronarray en retourneert de gesorteerde array. Als de methode sort() zonder argumenten wordt aangeroepen, wordt het sorteren in alfabetische volgorde uitgevoerd (elementen worden indien nodig tijdelijk omgezet in tekenreeksen ter vergelijking). Ongedefinieerde elementen worden naar het einde van de array verplaatst.

Om in een andere volgorde dan alfabetisch te sorteren, kunt u een vergelijkingsfunctie als argument doorgeven aan de methode sort(). Deze functie bepaalt welke van de twee argumenten op de eerste plaats moet komen in de gesorteerde lijst. Als het eerste argument vóór het tweede moet komen, moet de vergelijkingsfunctie een negatief getal retourneren. Als het eerste argument het tweede argument in een gesorteerde array moet volgen, moet de functie een getal retourneren dat groter is dan nul. En als twee waarden equivalent zijn (dat wil zeggen dat hun volgorde er niet toe doet), zou de vergelijkingsfunctie 0 moeten retourneren:

Var arr = ; arr.sort(); // Alfabetische volgorde: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Numerieke volgorde: 4, 33, 222, 1111 return a-b; // Geeft 0 terug // afhankelijk van de sorteervolgorde a en b)); // Sorteer in de tegenovergestelde richting, van groot naar klein arr.sort(function(a,b) (return b-a));

Merk op hoe handig het is om een ​​naamloze functie in dit fragment te gebruiken. De vergelijkingsfunctie wordt hier alleen gebruikt, dus het is niet nodig om deze een naam te geven.

concat() methode

De methode Array.concat() maakt en retourneert een nieuwe array met de elementen van de oorspronkelijke array waarop concat() werd aangeroepen en de waarden van eventuele argumenten die aan concat() zijn doorgegeven. Als een van deze argumenten zelf een array is, worden de elementen ervan toegevoegd aan de geretourneerde array. Er moet echter worden opgemerkt dat er geen recursieve transformatie van een array van arrays naar een eendimensionale array plaatsvindt. De methode concat() verandert de oorspronkelijke array niet. Hieronder staan ​​enkele voorbeelden:

Var arr = ; arr.concat(4, 5); // Return arr.concat(); // Retourneer arr.concat(,) // Retourneer arr.concat(4, ]) // Retourneer ]

slice() methode

De methode Array.slice() retourneert een segment of subarray van de opgegeven array. De twee methodeargumenten specificeren het begin en het einde van het geretourneerde fragment. De geretourneerde array bevat het element waarvan het nummer is opgegeven in het eerste argument, plus alle daaropvolgende elementen, tot (maar niet inclusief) het element waarvan het nummer is opgegeven in het tweede argument.

Als er slechts één argument wordt opgegeven, bevat de geretourneerde array alle elementen vanaf de beginpositie tot het einde van de array. Als een van de argumenten negatief is, wordt het elementnummer bepaald ten opzichte van het einde van de array. Argument -1 komt dus overeen met het laatste element van de array, en argument -3 komt overeen met het derde element van de array vanaf het einde. Hier zijn enkele voorbeelden:

Var arr = ; arr.slice(0,3); // Return arr.slice(3); // Return arr.slice(1,-1); // Return arr.slice(-3,-2); // Opbrengst

splice()-methode

De methode Array.splice() is een algemene methode waarmee array-elementen kunnen worden ingevoegd of verwijderd. In tegenstelling tot de methoden slice() en concat() wijzigt de methode splice() de oorspronkelijke array waarop deze is aangeroepen. Merk op dat de methoden splice() en slice() zeer vergelijkbare namen hebben, maar totaal verschillende bewerkingen uitvoeren.

De methode splice() kan elementen uit een array verwijderen, nieuwe elementen invoegen of beide tegelijk doen. Array-elementen worden indien nodig verschoven om na het invoegen of verwijderen een doorlopende reeks te creëren.

Het eerste argument van de splice()-methode specificeert de positie in de array van waaruit invoeging en/of verwijdering zal worden uitgevoerd. Het tweede argument specificeert het aantal elementen dat uit de array moet worden verwijderd (geknipt). Als het tweede argument wordt weggelaten, worden alle array-elementen vanaf de opgegeven array tot het einde van de array verwijderd. De methode splice() retourneert een array met de verwijderde elementen of (als er geen elementen zijn verwijderd) een lege array.

De eerste twee argumenten voor de methode splice() specificeren de array-elementen die moeten worden verwijderd. Deze argumenten kunnen worden gevolgd door een willekeurig aantal aanvullende argumenten die de elementen specificeren die in de array moeten worden ingevoegd, te beginnen op de positie die is opgegeven in het eerste argument.

Var arr = ; arr.splice(4); // Return, arr = arr.splice(1,2); // Return, arr = arr.splice(1,1); // Opbrengst ; arr = arr = ; arr.splice(2,0,"a", "b"); // Opbrengst ; arr =

push() en pop() methoden

Met de methoden push() en pop() kunt u met arrays werken alsof het stapels zijn. De methode push() voegt een of meer nieuwe elementen toe aan het einde van de array en retourneert de nieuwe lengte. De methode pop() voert de omgekeerde bewerking uit: het verwijdert het laatste element van de array, verkleint de lengte van de array en retourneert de waarde die is verwijderd. Merk op dat beide methoden de originele array wijzigen in plaats van er een aangepaste kopie van te maken.

unshift() en shift() methoden

De methoden unshift() en shift() gedragen zich vrijwel precies hetzelfde als push() en pop(), behalve dat ze elementen aan het begin van de array invoegen en verwijderen in plaats van aan het einde. De methode unshift() verplaatst bestaande elementen naar grotere indices om ruimte vrij te maken, voegt het element of de elementen toe aan het begin van de array en retourneert de nieuwe lengte van de array. De methode shift() verwijdert het eerste element van de array en retourneert het, waarbij alle volgende elementen één positie naar beneden worden verschoven om de ruimte in te nemen die aan het begin van de array is vrijgekomen.

JavaScript is ontworpen op basis van een eenvoudig paradigma. Het concept is gebaseerd op eenvoudige objecten. Een object is een verzameling eigenschappen en elke eigenschap bestaat uit een naam en een waarde die aan die naam is gekoppeld. De eigenschapswaarde kan een functie zijn, die kan worden aangeroepen methode voorwerp. Naast de ingebouwde objecten van de browser kunt u uw eigen objecten definiëren. In dit hoofdstuk wordt beschreven hoe u objecten, eigenschappen, functies en methoden kunt gebruiken, en hoe u uw eigen objecten kunt maken.

Overzicht van objecten

Objecten in JavaScript zijn, net als in veel andere programmeertalen, vergelijkbaar met objecten uit het echte leven. Het concept van JavaScript-objecten is gemakkelijker te begrijpen door parallellen te trekken met objecten uit het echte leven.

In JavaScript is een object een onafhankelijke eenheid met eigenschappen en een specifiek type. Laten we het bijvoorbeeld vergelijken met een kopje. Een beker heeft een kleur, vorm, gewicht, materiaal waarvan hij gemaakt is, etc. Op dezelfde manier hebben JavaScript-objecten eigenschappen die hun kenmerken definiëren.

Objecten en eigenschappen

In JavaScript zijn aan een object eigenschappen gekoppeld. Een objecteigenschap kan worden opgevat als een variabele die aan een object is toegewezen. Objecteigenschappen zijn in wezen hetzelfde als JavaScript-variabelen, behalve dat ze aan het object worden toegewezen. De eigenschappen van een object bepalen de kenmerken ervan. U kunt toegang krijgen tot een eigenschap van een object met behulp van puntnotatie:

Objectnaam.eigenschapnaam

Zoals alle JavaScript-variabelen zijn de objectnaam (die ook een variabele kan zijn) en de eigenschapsnaam hoofdlettergevoelig. U kunt een eigenschap definiëren door de waarde ervan op te geven. Laten we bijvoorbeeld een object myCar maken en de eigenschappen merk , model en jaar als volgt definiëren:

Var myCar = nieuw object(); mijnCar.make = "Ford"; mijnCar.model = "Mustang"; mijnAuto.jaar = 1969;

Ongedefinieerde objecteigenschappen zijn ongedefinieerd (niet null).

Mijn Auto. kleur; // ongedefinieerd

Eigenschappen van JavaScript-objecten kunnen ook worden geopend of ingesteld met behulp van haakjesnotatie (zie voor meer details). Objecten worden soms genoemd associatieve arrays, omdat elke eigenschap is gekoppeld aan een tekenreekswaarde die kan worden gebruikt om er toegang toe te krijgen. U kunt bijvoorbeeld als volgt toegang krijgen tot de eigenschappen van het myCar-object:

MyCar["merk"] = "Ford"; mijnCar["model"] = "Mustang"; mijnauto["jaar"] = 1969;

Namen van objecteigenschappen kunnen JavaScript-tekenreeksen zijn, of iets anders dat naar een tekenreeks kan worden geconverteerd, inclusief de lege tekenreeks. Elke eigenschapsnaam die een ongeldige JavaScript-ID bevat (bijvoorbeeld een eigenschapsnaam die een spatie en een streepje bevat, of begint met een cijfer) is echter toegankelijk via vierkante haken. Deze notatie is ook handig wanneer eigenschapsnamen dynamisch moeten worden bepaald (wanneer de eigenschapsnaam pas tijdens runtime wordt bepaald). Voorbeelden hieronder:

Var myObj = nieuw Object(), str = "mijnString", rand = Math.random(), obj = nieuw Object(); myObj.type = "Puntsyntaxis"; myObj["aanmaakdatum"] = "String met spatie"; myObj = "Stringwaarde"; myObj = "Willekeurig getal"; mijnObj = "Object"; myObj[""] = "Zelfs een lege string"; console.log(mijnObj);

Houd er rekening mee dat alle sleutels met vierkante haken worden geconverteerd naar een String-type, omdat objecten in JavaScript alleen een String-type als sleutel kunnen hebben. Als in de bovenstaande code bijvoorbeeld de sleutel obj wordt toegevoegd aan myObj , roept JavaScript de methode obj.toString() aan en gebruikt die resulterende tekenreeks als de nieuwe sleutel.

U kunt ook toegang krijgen tot eigenschappen met behulp van een tekenreekswaarde die is opgeslagen in een variabele:

Var eigenschapNaam = "maken"; mijnCar = "Ford"; propertyName = "model"; mijnCar = "Mustang";

U kunt vierkante haakjes in een for...in-clausule gebruiken om alle eigenschappen van een object te doorlopen waarvoor dit is toegestaan. Om te laten zien hoe dit werkt, toont de volgende functie alle eigenschappen van een object wanneer u het object zelf en de naam ervan als argumenten aan de functie doorgeeft:

Functie showProps(obj, objName) ( var resultaat = ""; for (var i in obj) ( if (obj.hasOwnProperty(i)) ( resultaat += objName + "." + i + " = " + obj[i ] + "\n"; ) ) retourneert resultaat;

Dus als we deze functie zo noemen showProps(myCar, "myCar"), krijgen we het resultaat:

MyCar.make = Ford myCar.model = Mustang myCar.jaar = 1969

Alle eigenschappen van een object weergeven

De constructorfunctie gebruiken

Hieronder wordt een andere manier beschreven om een ​​object in twee stappen te maken:

1. Bepaal het type van een object door een constructorfunctie te schrijven. De naam van zo’n functie begint meestal met een hoofdletter.
2. Maak een exemplaar van een object met het nieuwe trefwoord.

Om het type van een object te bepalen, maakt u een functie die het type van het object, de naam, eigenschappen en methoden bepaalt. Stel dat u een objecttype wilt maken om machines te beschrijven. U wilt dat een object van dit type auto heet, en u wilt dat het de eigenschappen merk, model en jaar heeft. Om dit te doen, schrijft u de volgende functie:

Functie Auto(merk, model, jaar) ( dit.merk = merk; dit.model = model; dit.jaar = jaar; )

Merk op dat dit wordt gebruikt om waarden (doorgegeven als functieargumenten) toe te wijzen aan de eigenschappen van het object.

Nu kunt u als volgt een object met de naam mycar maken:

Var mycar = nieuwe auto("Eagle", "Talon TSi", 1993);

Deze verklaring creëert een object van het type Auto met de referentie mycar en kent bepaalde waarden toe aan de eigenschappen ervan. De waarde van mycar.make zal de string "Eagle" zijn, mycar.year zal het gehele getal 1993 zijn, enzovoort.

U kunt zoveel auto-objecten maken als u nodig heeft door simpelweg new te bellen. Bijvoorbeeld:

Var kenscar = nieuwe auto("Nissan", "300ZX", 1992); var vpgscar = nieuwe auto("Mazda", "Miata", 1990);

Een object kan een eigenschap hebben die een ander object zal zijn. Het volgende definieert bijvoorbeeld een object van het type Persoon als volgt:

Functie Persoon(naam, leeftijd, geslacht) ( this.name = naam; this.age = leeftijd; this.sex = geslacht; )

en maak vervolgens als volgt twee nieuwe Person-objectinstanties:

Var rand = nieuwe persoon("Rand McKinnon", 33, "M"); var ken = nieuwe persoon("Ken Jones", 39, "M");

Vervolgens kunt u de definitie van auto herschrijven en er een eigendom van de eigenaar in opnemen, waaraan een persoonsobject als volgt is toegewezen:

Functie Auto(merk, model, jaar, eigenaar) ( dit.merk = merk; dit.model = model; dit.jaar = jaar; deze.eigenaar = eigenaar; )

Volg vervolgens deze instructies om de nieuwe objecten te instantiëren:

Var auto1 = nieuwe auto("Eagle", "Talon TSi", 1993, rand); var car2 = nieuwe auto("Nissan", "300ZX", 1992, ken);

Houd er rekening mee dat in plaats van een tekenreeks, letterlijk getal of geheel getal door te geven bij het maken van nieuwe objecten, de bovenstaande expressies rand- en ken-objecten als argumenten aan de functie doorgeven. Als u nu de naam van de eigenaar van car2 wilt achterhalen, kunt u dit als volgt doen:

Auto2.eigenaar

Houd er rekening mee dat u op elk moment een nieuwe eigenschap aan een eerder gemaakt object kunt toevoegen. De uitdrukking bijvoorbeeld

Auto1.color = "zwart";

voegt een kleureigenschap toe aan car1 en stelt de waarde ervan in op 'zwart'. Dit heeft echter geen invloed op andere objecten. Om een ​​nieuwe eigenschap aan alle objecten van hetzelfde type toe te voegen, moet u de eigenschap toevoegen aan de typedefinitie van het auto-object.

Met behulp van de Object.create-methode

Objecten kunnen ook worden gemaakt met behulp van de Object.create-methode. Deze methode is erg handig omdat u hiermee een prototypeobject voor een nieuw object van uzelf kunt opgeven zonder een constructorfunctie te definiëren.

// lijst met eigenschappen en methoden voor Animal var Animal = ( type: "Invertebrates", // Standaardwaarde van het type displayType: function() ( // Methode die het type Animal-object weergeeft console.log(this.type); )); // Maak een Animal-object var animal1 = Object.create(Animal); dier1.displayType(); // Uitgangen: ongewervelde dieren // Maak een Animal-object en wijs het toe type = Fishes var fish = Object.create(Animal); fish.type = "Vissen"; vis.displayType(); // Uitgangen: Vissen

Erfenis

Alle objecten in JavaScript erven van ten minste een ander object. Het object waarvan de overerving plaatsvond, wordt het prototype genoemd, en de overgeërfde eigenschappen zijn te vinden in het prototypeobject van de constructor.

Objecteigenschapsindexen

In JavaScript 1.0 kunt u naar de eigenschappen van een object verwijzen via de naam of via de ordinale index. Als u in JavaScript 1.1 en hoger een eigenschap in eerste instantie op naam hebt gedefinieerd, moet u er altijd naar verwijzen met de naam ervan, en als u een eigenschap in eerste instantie met index hebt gedefinieerd, moet u ernaar verwijzen met de index.

Deze beperking wordt opgelegd wanneer u een object en zijn eigenschappen maakt met behulp van de constructorfunctie (zoals we eerder deden met het type Auto) en wanneer u individuele eigenschappen expliciet definieert (bijv. myCar.color = "rood"). Als u in eerste instantie een objecteigenschap via een index hebt gedefinieerd, bijvoorbeeld myCar = "25 mpg" , dan kunt u deze eigenschap later alleen nog myCar noemen.

De uitzondering op de regel vormen objecten die vanuit HTML worden weergegeven, zoals de formulierenarray. U kunt altijd naar de objecten in deze arrays verwijzen via hun index (die is gebaseerd op de volgorde waarin ze in het HTML-document verschijnen) of via hun naam (als ze zijn gedefinieerd). Als de tweede html-tag bijvoorbeeld