3 dingen die u niet weet over JavaScript-arrays

Arrays zijn een veel gebruikte functie van programmeertalen; het zijn speciale variabelen die kunnen worden gebruikt om meerdere waarden tegelijkertijd op te slaan. Maar als het gaat om JavaScript, zo eenvoudig als het is om te leren, is er altijd meer te ontdekken.

In dit bericht bekijken we drie minder bekende maar belangrijke functies van JavaScript-arrays die u misschien nog niet eerder had gekend.

1. Voeg aangepaste eigenschappen toe aan arrays

Als u het internet zou doorzoeken op zoek naar een grondige definitie van JavaScript-arrays, zult u merken dat bijna elke bron zonder enige storing de array zal weergeven als wat het werkelijk is, een object .

Bijna alles waarmee we in JavaScript te maken hebben, zal in feite een object blijken te zijn . Er zijn twee soorten gegevenstypen in JavaScript, primitieven en objecten, maar primitieven worden altijd ingepakt in objecten .

Array, functie, datum, etc. zijn vooraf gedefinieerde JavaScript-objecten met ingebouwde methoden, eigenschappen en hun eigen gestandaardiseerde syntaxis.

JavaScript-arrays kunnen drie verschillende typen eigenschappen hebben :

1. Indices van een array zijn ook eigenschappen
2. Ingebouwde eigenschappen
3. Aangepaste eigenschappen die u zelf kunt toevoegen

De eerste twee zijn bekender, je kunt ze elke dag gebruiken, maar laten we ze snel bekijken voordat je begint met hoe je je eigen aangepaste eigenschap aan een array kunt toevoegen.

Indices als eigenschappen

JavaScript-arrays gebruiken de syntaxis van de vierkante haakjes, zoals var ary = ["orange", "apple", "lychee"]; .

Indices van arrayelementen zijn in feite eigenschappen waarbij de eigenschapnamen altijd niet-negatieve gehele getallen zijn .

Het paar index-elementen van een array is vergelijkbaar met het sleutel / waarde-paar van een object.

Indices zijn een unieke eigenschap van het object Array, en in tegenstelling tot de andere ingebouwde eigenschappen, kunnen ze worden ingesteld met alleen de syntaxis tussen haakjes, zoals ary[3] = "peach"; .

Ingebouwde eigenschappen

Arrays hebben ook ingebouwde eigenschappen, zoals array.length . De eigenschap length draagt ​​een geheel getal dat de lengte van een array aangeeft .

In het algemeen kunnen ingebouwde eigenschappen vaak worden gevonden in vooraf gedefinieerde JavaScript-objecten zoals arrays. Samen met de ingebouwde methoden helpen ze generieke objecten aanpassen zodat de objecten geschikt zijn voor verschillende behoeften .

Ingebouwde eigenschappen kunnen worden geopend met de object.key de object.key of het object["key"] . Dus je kunt ook ary["length"] om toegang te krijgen tot de lengte van een array.

Maak aangepaste eigenschappen voor het matrixobject

Laten we het nu hebben over het toevoegen van uw eigen eigenschappen aan arrays . Arrays zijn voorgedefinieerde objecten die verschillende soorten waarden opslaan op verschillende indices.

Het is meestal niet erg nodig om aangepaste eigenschappen aan een array toe te voegen; dit is een van de redenen waarom beginners meestal niet over deze functie worden onderwezen. Als u een array als een normaal object wilt behandelen door er sleutel / waarde-paren aan toe te voegen, kunt u net zo goed een normaal object gebruiken voor uw doel . Dit betekent echter niet dat er geen speciale gevallen zijn waarbij u kunt gebruikmaken van het feit dat een array een object is door er een of meer aangepaste eigenschappen aan toe te voegen.

U kunt bijvoorbeeld een aangepaste eigenschap toevoegen aan een array die de 'soort' of de 'klasse' van de elementen identificeert, zoals u deze in het onderstaande voorbeeld kunt zien.

 var ary = ["orange", "apple", "lychee"]; ary.itemClass = "fruits"; console.log (ary + "are" + ary.itemClass); // "sinaasappel, appel, lychee zijn fruit" 

Merk op dat de aangepaste eigenschap die u toevoegt aan een array opsombaar is, wat betekent dat deze wordt opgehaald door lussen, zoals de instructie for…in .

2. Loop door array-elementen

U zegt waarschijnlijk "Ik weet dat al", wat hoogstwaarschijnlijk waar is, u weet al hoe u array-elementen moet doorlopen. Maar het is ook waar dat het zeggen van "lus door array-elementen" een beetje abstract is, omdat wat we eigenlijk doorlopen de indices van de array zijn .

Omdat array-indices alleen bestaan ​​uit niet-negatieve gehele getallen, herhalen we een geheel getal dat meestal begint bij nul en eindigt bij de volledige lengte van de array. Gebruik vervolgens die geïtereerde waarde om toegang te krijgen tot het arrayelement bij een bepaalde index.

Sinds ECMAScript6 is er echter een manier om matrixwaarden direct door te lussen zonder zich te bemoeien met indexen, en dat kan gedaan worden door de for…of lus te gebruiken.

In een array loopt de lus for...of door de array-elementen in de volgorde van indices, met andere woorden, het zorgt voor iteratie over de indexen en krijgt een bestaande arraywaarde voor een bepaalde index. Deze lus is ideaal als u gewoon alle arrayelementen wilt doorlopen en ermee wilt werken.

 var ary = ["orange", "apple", "lychee"]; for (let item of ary) {console.log (item); } // "orange", "apple", "lychee" 

Ter vergelijking: met de reguliere for lus krijgen we de indices in plaats van de waarden als output.

 var ary = ["orange", "apple", "lychee"]; for (var item = 0; item <ary.length; item ++) {console.log (item); } // 0, 1, 2 

3. Het aantal elementen is niet de lengte ervan

Wanneer we het over de lengte van een array hebben, denken we meestal dat dit het aantal waarden is dat een array bevat, of de lengte die we handmatig aan de array hebben gegeven. In werkelijkheid is de lengte van een array echter afhankelijk van de grootste bestaande index erbinnen.

Lengte is een zeer flexibel eigendom . Of u de lengte van een array al van tevoren hebt vastgesteld of niet, als u waarden blijft toevoegen aan de array, blijft de lengte ervan dienovereenkomstig toenemen .

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 

In het bovenstaande voorbeeld kunt u zien dat ik de array slechts één waarde heb gegeven bij index 5 en dat de lengte 6 wordt. Nu, als u denkt dat door een waarde aan index 5 toe te voegen, de array automatisch de indexen van 0 tot 4 heeft gemaakt, dan is je aanname onjuist . Er zijn echt geen bestaande indices van 0 tot 4 in die array. U kunt dit controleren met behulp van de in operator.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 in ary); // false 

De array ary is wat we een "sparse" array noemen, een array waarbij de indexen niet continu worden gemaakt en hiaten hebben . Het tegenovergestelde van een "schaarse" array is de "dichte" array waar indices continu in de array voorkomen, en het aantal elementen is hetzelfde als de length .

De eigenschap length kan ook een array inkorten, waarbij ervoor wordt gezorgd dat de hoogste index in de array altijd minder is dan zichzelf, omdat de length altijd numeriek groter is dan de hoogste index.

In het onderstaande voorbeeld kunt u zien hoe we het element verliezen bij index 5 door de length van de ary array te verlagen.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // undefined 

Verder lezen

• 10 JavaScript-termen die u nu zou moeten kennen
• 4 niet-zo-gemeenschappelijke maar nuttige Javascript-statements die u moet weten
• Code optimalisatie met JS Hint - een hulpmiddel voor het plukken van Javascript

11 Mixin-bibliotheken voor Sass-ontwerpers moeten krijgen

Als u Sass gebruikt in uw ontwikkelworkflow, kent u het belang van mixins. Wanneer u sommige dingen ziet die herhaaldelijk en saai in CSS worden geschreven, kunnen mixins u helpen herhalend werk te voorkomen. Een mixin bevat CSS-verklaringen die u overal op uw site kunt gebruiken.Er zijn veel mixins gemaakt door ontwikkelaars om u te helpen bij het werken met Sass in uw ontwikkeling

(Technische en ontwerptips)

Integreer geanimeerde GIF's zoals Facebook met jqGifPreview

Op Twitter en Facebook hebben veel mensen dagelijks geanimeerde GIF's delen . Als deze allemaal automatisch worden afgespeeld, kunnen ze in een feed gruwelijk zijn.Beide netwerken komen hier omheen met een click-to-preview-functie voor alle GIF's. Hiermee kan de gebruiker kiezen welke animaties ze willen zien door te kiezen wanneer de animatie moet worden gestart / gestopt

(Technische en ontwerptips)