Top 10 JavaScript-aanduidingen voor beginners
JavaScript-coderingen niet alleen het codeerproces versnellen, maar ook scripts korter maken, dus leiden snellere pagina's laden. Verkorte codes zijn net zo geldig als hun versies met een lange hand; ze in wezen staan voor hetzelfde-alleen in een meer compact formaat. Ze zijn een van de eenvoudigste codeoptimalisatietechnieken.
Er zijn verschillende JavaScript-coderingen, maar ze zijn heb geen officiële naslaggids. Sommige zijn heel eenvoudig, terwijl andere zelfs voor ervaren ontwikkelaars behoorlijk intimiderend zijn. In dit artikel kunt u vinden 10 JavaScript-coderingen voor beginners waarmee u kunt beginnen met code-optimalisatie en meer beknopte code kunt schrijven.
1. Decimale nummers
Als je regelmatig werk met grote decimalen deze steno kan uit de lucht vallen, omdat je niet alle nullen hoeft uit te typen, vervang ze gewoon door de e notatie. Bijvoorbeeld, 1e8 betekent de toevoeging van acht nullen na de 1 cijfer, het is gelijk aan 100000000.
Het nummer achter de letter e geeft het aantal nullen aan die komen na het cijfer (s) daarvoor e. hetzelfde, 16e4 is de steno voor 160000, enz.
/ * Shorthand * / var myVar = 1e8; / * Longhand * / var myVar = 100000000;
2. Verhogen, verlagen
De stapsgewijs verhogen bestaat uit twee + tekens, betekent dit dat de waarde van een variabele moet zijn verhoogd met één. Evenzo, de afkorting steno bestaat uit twee - tekens, en dit betekent dat de variabele moet zijn met één verlaagd.
Deze twee shorthands kunnen worden gebruikt alleen op numerieke gegevenstypen. Ze hebben een onmisbare rol in loops, hun meest voorkomende use-case is de voor lus.
/ * 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, afleiding, vermenigvuldigen en delen. Ze werken op dezelfde manier als de increment- en decrement-operators, alleen hier kunt u de waarde van een variabele wijzigen door een willekeurig aantal (niet alleen met een).
In het onderstaande voorbeeld, de ik variabele wordt verhoogd met 5, j wordt verlaagd door 3, k wordt vermenigvuldigd met 10, en l is 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 charAt () methode is een van de meest gebruikte stringmethoden, het geeft de teken op een opgegeven positie (bijvoorbeeld de 5th karakter van een string). Er is een eenvoudige afkorting die u kunt gebruiken: u voegt het toe tekenpositie tussen vierkante haken na de string.
Let op dat het charAt () methode is zero-based. daarom, myString [4] zal de 5 retournerenth karakter in de string ("Y" in het voorbeeld).
var myString = "Gefeliciteerd met je verjaardag"; / * Shorthand * / myString [4]; / * Longhand * / myString.charAt (4);
5. Declareer variabelen in bulk
Als je wilt creëren meer dan één variabele tegelijkertijd je hoeft ze niet een voor een uit te typen. Het is voldoende om de var (of laat) zoekwoord slechts één keer, dan kun je gewoon een lijst maken met de variabelen die je wilt maken, gescheiden door een komma.
Met deze afkorting kunt u beide verklaren ongedefinieerde variabelen en variabelen met een waarde.
/ * Shorthand * / var i, j = 5, k = "Goedemorgen", l, m = false; / * 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 = ["appel", "peer", "oranje"] syntaxis. Echter, een associatieve array declareren is een beetje ingewikkelder, omdat je hier niet alleen de waarden maar ook de sleutels hoeft te definiëren (in het geval van normale arrays zijn de sleutels 0, 1, 2, 3, enz.).
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 kun je echter ook verklaar de associatieve array plus al zijn elementen tegelijkertijd.
In het onderstaande voorbeeld, de myArray associatieve array kent hun geboorteplaats (waarden) toe aan beroemde mensen (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. Verklaar een voorwerp
De afkorting voor objectverklaring werkt op dezelfde manier als die voor associatieve matrices. Hier zijn echter geen paren met sleutelwaarden, maar eigenschap-waarde paren die je tussen de accolades moet plaatsen .
Het enige verschil in de syntaxis van de steno is dat objecteigenschappen staan niet tussen aanhalingstekens (naam, geboorteplaats, leeftijd, wasJamesBond in het onderstaande voorbeeld).
/ * Shorthand * / var myObj = name: "Sean Connery", placeOfBirth: "Edinburgh", leeftijd: 86, wasJamesBond: true; / * Longhand * / var myObj = new 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 snelkoppeling voor de if-else uitspraak. Het bestaat uit drie delen:
- de staat
- wat gebeurt er als de voorwaarde is waar (
als) - wat gebeurt er als de voorwaarde is onjuist (
anders)
In het onderstaande voorbeeld sturen we een eenvoudig bericht (binnen de bericht variabele) voor mensen die een club willen betreden. Met behulp van de steno-vorm is dit slechts één regel code voer de evaluatie uit.
var leeftijd = 17; / * Shorthand * / var message = age> = 18? "Toegestaan": "Geweigerd"; / * Longhand * / if (age> = 18) var message = "Allowed"; else var message = "Geweigerd";
Als je het gewoon wilt testen kopieer de code naar de webconsole (F12 in de meeste browsers) en wijzig de waarde van de leeftijd variabele een paar keer.
9. Controleer aanwezigheid
Het gebeurt vaak dat je moet controleren of een variabele is aanwezig of niet. De “als aanwezigheid” steno helpt u dit te doen met veel minder code.
Pas op dat de meeste artikelen op JavaScript-shorthands niet de juiste longhand-vorm geven, zoals de if (myVar) notatie controleert niet eenvoudig of de variabele niet onwaar is, maar ook een handvol andere dingen. Namelijk, de variabele kan 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 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. "); Je kunt testen hoe het “als aanwezigheid” steno werkt door het volgende codefragment in de webconsole en in te voegen de waarde van wijzigen myVar een paar keer.
Om te begrijpen hoe deze stenografie werkt, is het de moeite waard om deze te testen met de waarden van "" (lege string), vals, 0, waar, een niet-lege string (bijv. "Hoi"), een getal (bijv. 99), en wanneer de variabele ongedefinieerd is (eenvoudigweg var myVar;).
10. Controleer afwezigheid
De “als aanwezigheid” steno kan worden gebruikt om controleer de afwezigheid van een variabele door te plaatsen een uitroepteken ervoor. Het uitroepteken is het logische niet-operator in JavaScript (en in de meeste programmeertalen).
Daarom, met de if (! myVar) notatie, kunt u controleren of de myVar veranderlijk is niet ongedefinieerd, leeg, null of false.
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) leeg (OR) null (OR) false.");
