Topp 10 JavaScript Shorthands for nybegynnere

JavaScript shorthands ikke bare øke kodingsprosessen, men også lage skript kortere, derfor føre til raskere sidelaster . Shorthand koder er like gyldige som deres longhand versjoner; de står i hovedsak for det samme - bare i et mer kompakt format. De er en av de enkleste kodeoptimaliseringsteknikkene.

Det finnes flere JavaScript-korttegn, men de har ikke en offisiell referanseguide . Noen er veldig enkle, mens andre er ganske skremmende selv for erfarne utviklere. I denne artikkelen finner du 10 JavaScript shorthands for nybegynnere som du kan starte med kodeoptimalisering og skrive mer kortfattet kode.

1. Desimale tall

Hvis du regelmessig jobber med store desimaler, kan denne shorthanden være godsend, da du ikke trenger å skrive ut alle nuller lenger, bare erstatt dem med e notasjonen. For eksempel betyr 1e8 tillegg av åtte nuller etter 1 siffer, det tilsvarer 100000000 .

Tallet etter bokstaven e angir antall nuller som kommer etter sifferet (e) før e . På samme måte er 16e4 stenografi for 160000, etc.

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

2. Økning, reduksjon

Inkrementkortet består av to + tegn, det betyr at verdien av en variabel skal økes med en . På samme måte består avkortingskortet av to tegn, og det betyr at variabelen skal dekrementeres av en .

Disse to kortene kan bare brukes på numeriske datatyper . De har en uunnværlig rolle i sløyfer, deres vanligste brukstilfelle er forløp .

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

3. Legg til, distrahere, multiplisere, del

Det er en stenografi for hver av de fire grunnleggende matematiske operasjonene : tillegg, distraksjon, multiplikasjon og divisjon. De fungerer på samme måte som inkrement og reduksjon operatører, bare her, kan du endre verdien av en variabel med et hvilket som helst tall (ikke bare av en).

I eksemplet nedenfor blir i variablen økt med 5, j er dekrementert med 3, k multipliseres med 10, og l er delt med 2 .

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

4. Bestem tegnposisjon

charAt() er en av de mest brukte charAt(), den returnerer tegnet på en bestemt posisjon (for eksempel den ^femte karakteren til en streng). Det er en enkel shorthand du kan bruke i stedet: du legger til karosseposisjonen vedlagt i firkantede parenteser etter strengen.

Vær oppmerksom på at charAt() -metoden er nullbasert . Derfor vil myString[4] returnere 5. karakteren i strengen ( "y" i eksemplet).

 var myString = "Gratulerer med dagen"; / * Shorthand * / myString [4]; / * Longhand * / myString.charAt (4); 

5. Erklær variabler i bulk

Hvis du vil opprette flere variabler samtidig, trenger du ikke å skrive dem ut en etter en. Det er tilstrekkelig å bruke var (eller let ) søkeordet bare én gang, da kan du bare oppgi variablene du vil opprette, adskilt av et komma .

Med denne stenografi kan du deklarere både udefinerte variabler og variabler med en verdi .

 / * Shorthand * / var jeg, j = 5, k = "God morgen", l, m = false; / * Longhand * / var jeg; var j = 5; var k = "God morgen"; var l; var m = false; 

6. Erklære en assosiativ matrise

Deklarere en matrise i JavaScript er en relativt enkel oppgave, ved å bruke var myArray = ["apple", "pear", "orange"] syntaks. Det er imidlertid litt mer komplisert å erklære en assosiativ array, som her må du ikke bare definere verdiene, men også tastene (i tilfelle vanlige arrays er tastene 0, 1, 2, 3, etc. ).

En assosiativ array er en samling av nøkkelverdier par . Longhand-måten er å deklarere matrisen, og deretter legge til hvert element en etter en. Men med shorthandet nedenfor kan du også deklarere assosiativ array pluss alle dens elementer samtidig.

I eksemplet nedenfor tilordner myArray associative array deres fødested (verdier) til kjente personer (nøkler).

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

7. Erklære et objekt

Shorthand for objektdeklarasjonen fungerer på samme måte som den for tilknyttede arrays. Men her er det ikke nøkkelverdige par, men eiendomsverdipar som du må plassere mellom braces {} .

Den eneste forskjellen i placeOfBirth stenografi er at objektegenskapene ikke er vedlagt anførselstegn ( name, placeOfBirth, age, wasJamesBond i eksempelet nedenfor).

 / * Shorthand * / var myObj = {navn: "Sean Connery", placeOfBirth: "Edinburgh", alder: 86, wasJamesBond: true}; / * Longhand * / var myObj = nytt objekt (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = true; 

8. Bruk den betingede operatøren

Den betingede (ternære) operatøren brukes ofte som snarveien for if-else setningen . Den består av tre deler :

1. tilstanden
2. hva skjer hvis tilstanden er sant ( if )
3. hva skjer hvis tilstanden er feil ( else )

I eksemplet nedenfor sender vi en enkel melding (inne i message ) til personer som ønsker å gå inn i en klubb. Ved hjelp av shorthand-skjemaet er det bare en linje med kode for å kjøre evalueringen .

 var alder = 17; / * Shorthand * / var message = alder> = 18? "Tillat": "Nektet"; / * Longhand * / if (alder> = 18) {var message = "Allowed"; } else {var message = "Denied"; } 

Hvis du vil teste det, kopier du bare koden til webkonsollen (F12 i de fleste nettlesere) og endre verdien av age noen ganger.

9. Kontroller tilstedeværelsen

Det skjer ofte at du må sjekke om en variabel er til stede eller ikke . "Hvis tilstedeværelse" stenografi hjelper deg med å gjøre det med mye mindre kode.

Vær oppmerksom på at de fleste artikler på JavaScript shorthands ikke gir den riktige longhand-formen, da if( myVar ) notasjonen ikke bare sjekker om variabelen ikke er feil, men også en håndfull andre ting. Nemlig, variabelen kan ikke være udefinert, tom, null og falsk .

 var myVar = 99; / * Shorthand * / if (myVar) {console.log ("MyVar-variabelen er definert OG den er ikke tom og ikke null og ikke feil."); } / * Longhand * / hvis (typeof myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) {console.log ("MyVar variabel er definert og den er ikke tom og ikke null og ikke feil. "); } 

Du kan teste hvordan "om tilstedeværelse" -kortet fungerer ved å sette inn følgende kodestykke i webkonsollen og endre verdien av myVar noen ganger.

For å forstå hvordan denne stenografi fungerer, er det verdt å teste det med "" (tom streng), false, 0, true, en ikke-tom streng (f.eks. "Hi" ), et tall (f.eks. 99 ), og når variabel er udefinert (bare var myVar; ).

10. Sjekk fravær

"Hvis tilstedeværelse" stenografi kan brukes til å kontrollere fraværet av en variabel ved å plassere et utropstegn før det . Utropstegnet er den logiske ikke-operatøren i JavaScript (og i de fleste programmeringsspråk).

Derfor, med if( !myVar ) notasjonen, kan du sjekke om myVar variabelen ikke er udefinert, tom, null eller falsk .

 var minVar; / * Shorthand * / if (! MyVar) {console.warn ("MyVar-variabelen er udefinert (OR) tom (OR) null (OR) false."); } / * Longhand * / hvis (typeof myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) {console.warn ("MyVar-variabelen er udefinert (OR) tom (OR) null (OR) false."); } 

Dekker hendelse i sanntid med Liveblog i WordPress

Liveblogging er en populær måte å dekke et arrangement på i sanntid - det ligner på en Twitter-feed, bare det skjer på ditt eget nettsted. Hvis du liker å følge viktige viktige hendelser som Apple WWDC, kan du finne noen tech blogger og nyhetssider liveblogging for å dekke arrangementet i sanntid.Noen av

(Tekniske og design tips)

20+ Apple Watch GUI-sett og maler du kan laste ned

Apple Watch gjør en fantastisk debut sammen med en nylig omformet og umulig tynn Macbook i det nyeste Apple-arrangementet. Men lenge før enhetene fikk sin flotte avsløring, har designere der ute allerede jobbet med GUI-kittene og ressursene for Apples versjon av smartwatch.Vi gjorde legwork for deg og har satt sammen en samling av de beste Apple Watch GUI-kittene, maler, mockups og ressurser du kan finne der ute, så langt. Kl

(Tekniske og design tips)