Top 10 JavaScript-aanduidingen voor beginners

JavaScript- snelheden versnellen niet alleen het coderingsproces, maar maken ook scripts korter, wat leidt tot snellere pagina's . Shorthand-codes zijn net zo geldig als hun versies met een lange hand; ze staan ​​in essentie voor hetzelfde - alleen in een compacter formaat. Ze zijn een van de eenvoudigste codeoptimalisatietechnieken.

Er zijn verschillende JavaScript-coderingen, maar deze bevatten geen officiële referentiegids . Sommige zijn heel eenvoudig, terwijl andere zelfs voor ervaren ontwikkelaars behoorlijk intimiderend zijn. In dit artikel vind je 10 JavaScript-shorthands voor beginners waarmee je kunt beginnen met code-optimalisatie en meer beknopte code kunt schrijven.

1. Decimale nummers

Als u regelmatig met grote decimalen werkt, kan deze steno een uitkomst zijn, omdat u niet alle nullen meer hoeft te typen, maar gewoon kunt vervangen door de notatie. Bijvoorbeeld, 1e8 betekent de toevoeging van acht nullen na het 1 cijfer, het is gelijk aan 100000000 .

Het cijfer achter de letter e geeft het aantal nullen aan dat na het cijfer (s) vóór e . Evenzo is 16e4 de afkorting voor 160000, enz.

 / * Shorthand * / var myVar = 1e8; / * Longhand * / var myVar = 100000000; 

2. Verhogen, verlagen

De increment-afkorting bestaat uit twee + -tekens, dit betekent dat de waarde van een variabele met één moet worden verhoogd . Evenzo bestaat de afkorting steno uit twee tekens en betekent dit dat de variabele met één moet worden verlaagd .

Deze twee shorthands kunnen alleen op numerieke gegevenstypen worden gebruikt. Ze hebben een onmisbare rol in loops, hun meest voorkomende use-case is de for loop .

 / * Shorthand * / i ++; j--; / * Longhand * / i = i + 1; j = j-1; 

3. Toevoegen, afleiden, vermenigvuldigen, delen

Er is een afkorting voor elk van de vier elementaire wiskundige bewerkingen : optellen, afleiden, vermenigvuldigen en delen. Ze werken op dezelfde manier als de operators voor het verhogen en verlagen, alleen hier kunt u de waarde van een variabele op elk getal wijzigen (niet alleen met één).

In het onderstaande voorbeeld wordt de i variabele verhoogd met 5, j wordt verlaagd met 3, k wordt vermenigvuldigd met 10 en l wordt gedeeld door 2 .

 / * Shorthand * / i + = 5; j- = 3; * k = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = l / 2; 

4. Bepaal de positie van het karakter

De methode charAt() is een van de meest gebruikte tekenreeksmethoden en retourneert het teken op een opgegeven positie (bijvoorbeeld het 5e teken van een tekenreeks). Er is een eenvoudige afkorting die u kunt gebruiken: u voegt de tekenpositie tussen vierkante haken achter de tekenreeks in.

Let erop dat de methode charAt() nul gebaseerd is . Daarom geeft myString[4] het ^vijfde teken in de tekenreeks terug ( "y" in het voorbeeld).

 var myString = "Gefeliciteerd met je verjaardag"; / * Shorthand * / myString [4]; / * Longhand * / myString.charAt (4); 

5. Declareer variabelen in bulk

Als u meerdere variabelen tegelijkertijd wilt maken, hoeft u ze niet één voor één te typen. Het is voldoende om het var (of let ) sleutelwoord slechts één keer te gebruiken, dan kunt u gewoon de variabelen weergeven die u wilt creëren, gescheiden door een komma .

Met deze afkorting kunt u zowel ongedefinieerde variabelen als variabelen met een waarde declareren.

 / * Shorthand * / var i, j = 5, k = "Goedemorgen", l, m = onjuist; / * Longhand * / var i; var j = 5; var k = "Goedemorgen"; var l; var m = false; 

6. Declareer een associatieve array

Het declareren van een array in JavaScript is een relatief eenvoudige taak, door de var myArray = ["apple", "pear", "orange"] . Het declareren van een associatieve array is echter iets gecompliceerder, omdat je hier niet alleen de waarden, maar ook de sleutels hoeft te definiëren (in het geval van reguliere arrays zijn de sleutels 0, 1, 2, 3, etc. ).

Een associatieve array is een verzameling sleutel / waarde-paren . De lange manier is om de array te declareren en vervolgens elk element één voor één toe te voegen. Met de onderstaande afkorting kunt u echter ook de associatieve array plus alle bijbehorende elementen tegelijkertijd declareren .

In het onderstaande voorbeeld wijst de associatieve array myArray hun geboorteplaats (waarden) toe aan beroemde personen (sleutels).

 / * Shorthand * / var myArray = {"Grace Kelly": "Philadelphia", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "New York City", "Sophia Loren": "Rome", "Ingrid Bergman ":" Stockholm "} / * Longhand * / var myArray = new Array (); myArray ["Grace Kelly"] = "Philadelphia"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "New York City"; myArray ["Sophia Loren"] = "Rome"; myArray ["Ingrid Bergman"] = "Stockholm"; 

7. Declareer een object

De afkorting voor objectverklaring werkt op dezelfde manier als die voor associatieve matrices. Hier zijn echter geen sleutel / waarde-paren maar paar / waarde-paren die u tussen de accolades {} .

Het enige verschil in de syntaxis voor steno's is dat objecteigenschappen niet tussen aanhalingstekens staan ( name, placeOfBirth, age, wasJamesBond in het onderstaande voorbeeld).

 / * Shorthand * / var myObj = {name: "Sean Connery", placeOfBirth: "Edinburgh", leeftijd: 86, wasJamesBond: true}; / * Longhand * / var myObj = nieuw object (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = true; 

8. Gebruik de voorwaardelijke operator

De voorwaardelijke (ternaire) operator wordt vaak gebruikt als de snelkoppeling voor de if-else instructie . Het bestaat uit drie delen :

1. de toestand
2. wat gebeurt er als de voorwaarde waar is ( if )
3. wat gebeurt er als de voorwaarde onwaar is ( else )

In het onderstaande voorbeeld sturen we een eenvoudig bericht (binnen de message ) naar mensen die een club willen betreden. Met behulp van de steno-vorm is het slechts één regel code om de evaluatie uit te voeren .

 var leeftijd = 17; / * Shorthand * / var message = age> = 18? "Toegestaan": "Geweigerd"; / * Longhand * / if (age> = 18) {var message = "Allowed"; } else {var message = "Geweigerd"; } 

Als u het wilt testen, kopieert u de code gewoon naar de webconsole (F12 in de meeste browsers) en past u de waarde van de age enkele keren aan.

9. Controleer aanwezigheid

Het komt regelmatig voor dat je moet controleren of een variabele aanwezig is of niet . De "if presence" steno helpt je om dit te doen met veel minder code.

Pas op dat de meeste artikelen op JavaScript-shorthands niet de juiste longhand-vorm geven, omdat de if( myVar ) -notatie niet eenvoudig controleert of de variabele niet onwaar is, maar ook een handvol andere dingen. De variabele kan namelijk niet ongedefinieerd, leeg, null en false zijn .

 var myVar = 99; / * Shorthand * / if (myVar) {console.log ("De variabele myVar is gedefinieerd EN deze is niet leeg EN niet null AND not false."); } / * Longhand * / if (type van myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) {console.log ("The myVar variabele is gedefinieerd EN het is niet leeg EN niet nul EN niet onwaar. "); } 

U kunt testen hoe de "indien aanwezig" -afkorting werkt door het volgende codefragment in de webconsole in te voegen en de waarde van myVar een paar keer te wijzigen.

Om te begrijpen hoe deze steno werkt, is het de moeite waard om hem te testen met de waarden "" (lege string), false, 0, true, een niet-lege string (bijv. "Hi" ), een getal (bijv. 99 ), en wanneer de variabele is undefined (gewoon var myVar; ).

10. Controleer afwezigheid

De "indien aanwezig" steno kan worden gebruikt om de afwezigheid van een variabele te controleren door er een uitroepteken voor te plaatsen . Het uitroepteken is de logische not-operator in JavaScript (en in de meeste programmeertalen).

Daarom kunt u met de if( !myVar ) -notatie controleren of de variabele myVar niet ongedefinieerd, leeg, null of false is .

 var myVar; / * Shorthand * / if (! MyVar) {console.warn ("De variabele myVar is undefined (OR) leeg (OR) null (OR) false."); } / * Longhand * / if (type van myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) {console.warn ("De variabele myVar is undefined (OR) empty (OR) null (OR) false."); } 

29 WordPress Tweaks om berichten en pagina's te verbeteren

We zijn dol op WordPress - maar niet iedereen is klaar om genoegen te nemen met alle standaardinstellingen en weergaven, met name hoe berichten worden weergegeven. Omdat we geleerd hebben dat het unieke van de branding van een website belangrijk is, wat de bezoekers een geweldige indruk geeft, hebben bloggers en ontwikkelaars in de loop van de jaren ernaar gestreefd het berichtenscherm aan te passen om het zo uniek mogelijk te maken

(Technische en ontwerptips)

Hoe een refactor CSS - een gids

CSS-refactoring moet een essentieel onderdeel zijn van de front-end ontwikkelingsworkflow, als we een beheersbare en geoptimaliseerde codebasis willen hebben. Wanneer we CSS refactoren, ruimen we onze bestaande code op en reorganiseren we deze zonder nieuwe functies toe te voegen of bugs te verhelpen

(Technische en ontwerptips)