De bästa JavaScript-tipsen för webbutveckling

De bästa JavaScript-tipsen för webbutveckling

Har du letat efter några coola JavaScript-tips? Det här inlägget beskriver en mängd roliga och effektiva JS-tips som hjälper dig att lära dig ett av de mest använda programmeringsspråken på internet.

Vi kommer att täcka följande JavaScript-ämnen;

  • ArrayMethods i JS
  • Skapa API-förfrågningar med JavaScript
  • En översikt över `for`-loopar i JavaScript
  • En introduktion till Node.js

Arraymetoder i JavaScript

Matrisen är en av de viktigaste komponenterna i JavaScript och alla programmeringsspråk i allmänhet. Ofta missuppfattas som sin egen datatyp, det är faktiskt en delmängd av Object, tillsammans med funktioner. Enkelt uttryckt är en matris en sammansatt datastruktur som kan innehålla en obegränsad mängd värden av vilken typ som helst. Var och en av värdena är numeriskt indexerade (dvs. varje värde har ett tal som anger sin position i matrisen). Detta gör arrayen extremt flexibel för lagring och organisering av data. Arrayer kan lagra strängar, siffror, objekt eller till och med andra arrays. Det här inlägget ger en översikt över några av de mest använda inbyggda JavaScript-arraymetoderna. Du kan använda dessa metoder eller funktioner för att manipulera och hantera data i en matris.

De bästa JavaScript-tipsen för webbutveckling

concat()

Du har nu möjlighet concat() metod, förkortad för "sammanfogad", gör det möjligt för oss att sammanfoga två matriser tillsammans:

var färger = ["svart", "vit", "blå"];
var colours2 = ["grön", "gul", "lila"];
â € <
document.write (colours.concat (colours2));
// output: "svart, vit, blå, grön, gul, lila"

 

På egen hand, concat() kommer inte att ändra den ursprungliga matrisen som metoden kallades på. Kallelse colors kommer fortfarande att mata ut den ursprungliga matrisen med endast 3 värden. För att uppdatera den ursprungliga matrisen måste du anropa metoden på colors array, tilldela variabeln om:

På egen hand, concat() ändrar inte den ursprungliga matrisen som du anropar metoden till. Kallelse colors kommer fortfarande att mata ut den ursprungliga matrisen med endast 3 värden. För att uppdatera den ursprungliga matrisen måste du anropa metoden på colors array, tilldela variabeln om:

färger = färger. koncat (färger1); 

 

push()

Ofta vill du bara lägga till nya objekt i slutet av en matris, som du kan använda push() metod för. Du kan trycka antingen en eller flera värden till en matris i samma samtal:

var färger = ["svart", "vit", "blå"];
colors.push ("grön", "gul");
â € <
document.write (färger);
// output: "svart, vit, blå, grön, gul"

 

Till skillnad från concat(), push() gör uppdatera den ursprungliga matrisen med de värden som du har skickat till den.

unshift()

Liknar push(), unshift() kommer att lägga till ett eller flera nya värden till börjar av matrisen:

var färger = ["svart", "vit", "blå"];
färger.unshift ("grön");
â € <
document.write (färger);
// output: "grön, svart, vit, blå"

 

pop()

pop() är den inversa av push() metod, genom att den kommer att "poppa" bort eller ta bort det sista elementet i en matris:

var färger = ["svart", "vit", "blå"];
färger.pop ();
â € <
document.write (färger);
// output: "svart, vitt" 

 

Eftersom pop() tar bort ett objekt från en matris, det är vanligt att lagra det borttagna objektet i en annan variabel för andra användningsområden:

var lastItem = färger.pop ();
â € <
document.write (lastItem);
// output: "blue"

 

shift()

På liknande sätt shift() tar bort det första objektet i en matris:

var färger = ["svart", "vit", "blå"];
färger.förskjutning ();
â € <
document.write (färger);
// output: "vit, blå"; 

 

Du kan också använda shift() tillsammans med att lagra det borttagna objektet i en ny variabel:

var firstItem = colours.shift ();
â € <
document.write (firstItem);
// utgång: "svart" 

 

reverse()

Som namnet antyder, reverse() metoden kommer att ändra ordningen på värdena i matrisen:

var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var reversedArray = myArray.reverse ();
â € <
document.write (reversedArray);
// utgång: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

 

reverse() kommer inte att ändra den ursprungliga matrisen. Du måste lagra den omvända matrisen i en ny variabel. Alternativt kan du tilldela den till den ursprungliga variabeln för att behålla de omvända ändringarna.

join()

Du har nu möjlighet join() array-metoden förenar alla värden i arrayen till en sträng och returnerar sedan strängen:

var färger = ["svart", "vit", "blå", "grön"];
console.log (colours.join ());
// output: svart, vit, blå, grön 

 

Det finns en valfri "separator" -parameter som kan ingå i join(). Denna parameter indikerar ett tecken (eller en uppsättning tecken) som separerar varje värde i strängen. Exemplet nedan kommer att separera varje värde med ett komma följt av ett mellanslagstecken:

var färger = ["svart", "vit", "blå", "grön"];
console.log (colours.join (',');
// output: svart, vit, blå, grön 

 

join() kommer inte att ändra den ursprungliga matrisen. Du måste tilldela ändringen till en variabel för att spara den.

var colorList = colors.join (',');
console.log (colorList);
// output: svart, vit, blå, grön
â € <
console.log (färger);
// output: ["svart", "vit", "blå", "grön"]
// dvs fortfarande den ursprungliga matrisen

 

sort()

sort() sorterar värdena för en matris i alfanumerisk ordning. sort() gör uppdatera den ursprungliga matrisen:

var arrl = [1, 4, 9, 3, 2];
arr1.sort ();
console.log (arr1);
// utgång: [1, 2, 3, 4, 9]

 

sort() beställer bara värden när du anropar metoden. Du måste ringa det igen för att sortera om du lägger till eller ändrar värden i matrisen.

indexOf()

indexOf() returnerar indexvärdet för en sökterm som tillhandahålls som en strängparameter till metoden:

var färger = ["svart", "vit", "blå", "grön"];
colors.indexOf ('vit');
// returnerar 1

 

Om det inte finns någon indexmatchning för searchValue parameter, indexOf() kommer att återvända -1:

var färger = ["svart", "vit", "blå", "grön"];
colors.indexOf ('orange');
// returnerar -1

 

indexOf() är skiftlägeskänslig:

colours.indexOf ('Blue');
// returnerar -1

 

Det finns också ett valfritt fromIndex parameter. Detta indikerar från vilket indexvärde sökningen ska börja. Om det inte tillhandahålls börjar sökningen med index 0 som standard:

var names = ["Michael", "John", "Sarah", "Michael", "Matthew"];
names.indexOf ('Michael', 2);
// returnerar 3 

 

slice()

Du har nu möjlighet slice() metoden returnerar en "del" av matrisen, indikerad av valfria parametrar för start- och slutpunkter. slice() lämnar den ursprungliga matrisen omodifierad:

Du har nu möjlighet slice() metoden returnerar en "del" av matrisen. Du kan ange start- och slutpunkter via dess valfria parametrar. slice() lämnar den ursprungliga matrisen omodifierad:

var färger = ["svart", "vit", "blå", "grön", "lila", "orange"];
var färger2 = färger. skiva (2, 5);
console.log (färger2);
// output: ["blue", "green", "purple"]
â € <
var färger3 = färger. skiva (1);
console.log (färger3);
// output: ["white", "blue", "green", "purple", "orange"];
â € <
console.log (färger);
// output: ["svart", "vit", "blå", "grön", "lila", "orange"]; 

 

filter()

filter() är något som liknar slice() metod. Huvudskillnaden är att den skapar en ny array baserad på vissa villkor. Varje värde i matrisen som skickar ett villkor "filtreras" in i den nya matrisen. Villkoret för filtrering ställs in via återuppringningsfunktionen:

var someWords = ["enkel", "hård", "kryptering", "samhälle", "total", "snabb", "komplexitet"];
â € <
function checkSize (w) {
    retur med längd> 5;
}
â € <
var bigWords = someWords.filter (checkSize);
console.log (bigWords);
// output: ["kryptering", "samhälle", "snabb", "komplexitet"] 

 

I exemplet ovan används checkSize() återuppringningsfunktion för att filtrera bort alla ord som är mindre än 6 tecken långa. Det sätter också alla återstående värden i en ny array som kallas bigWords.

every()

Du har nu möjlighet every() array-metoden kommer att kontrollera om varje värde i arrayen passerar ett villkor eller inte. Villkoret här tillhandahålls också via en återuppringningsfunktion. Om den passerat kommer metoden att återvända true, om det inte gör det kommer det att återvända false:

var nums = [20, 31, 18, 500];
â € <
funktion greaterThan10 (värde) {
    returvärde> 10;
}
â € <
console.log (nums.every (greaterThan10));
// output: sant

 

Exemplet ovan testar för att se om varje värde i nums array är större än 10, återvänder true.

isArray()

Som namnet antyder, .isArray() kommer att kontrollera om ett värde som skickas till det är en matris eller inte:

Array.isArray (['blå', 'gul' 'grön']); // returnerar true
Array.isArray (3); // returnerar falskt
Array.isArray ('hej'); // returnerar falskt

 

findIndex()

findIndex() är nästan motsatsen till indexOf() metod. Det returnerar index för det första värdet i en matris som uppfyller ett villkor. Villkoret ställs in via en återuppringningsfunktion. Om inget värde hittas som uppfyller villkoret återgår funktionen -1.

var färger = ['svart', 'blå', 'gul', 'grön', 'lila'];
â € <
funktion greaterThanFive (e) {
    returnera e.längd> 5;
}
â € <
var indexOfLargeValue = colors.findIndex (greaterThanFive);
console.log (indexOfLargeValue);
// utgång: 2

 

forEach()

Du har nu möjlighet forEach() metoden kommer att utföra en återuppringningsfunktion på varje värde i den array som metoden anropas till. Detta är användbart för att lägga till värden lika till varje index i en array, liksom många andra applikationer. Detta kommer dock inte att ändra den ursprungliga matrisen, så de nya värdena måste sparas i en annan variabel:

var nums = [1, 2, 3, 5, 8, 13];
var numsUpdated = [];
â € <
funktion addTwo (e) {
    och + = 2;
    numsUpdated.push (e);
}
â € <
nums.forEach (addTwo);
console.log (numsUpdated);
// utgång: [3, 4, 5, 7, 10, 15]

 

Detta liknar att använda en for loop för att itera över en matris med lite enklare syntax.

includes()

Du kan använda includes() för att kontrollera om en viss matris innehåller ett givet värde eller inte. Om matrisen gör det kommer den att återvända true, om den inte gör det kommer den att återvända false.

var färger = ['svart', 'blå', 'gul', 'grön', 'lila'];
â € <
console.log (colours.includes ('blue'));
// output: sant
â € <
console.log (colours.includes ('red'));
// output: false

 

Det finns en valfri andra parameter, fromIndex. Detta kommer att ange var sökningen ska börja:

var färger = ['svart', 'blå', 'gul', 'grön', 'lila'];
â € <
console.log (colours.includes ('blue', 2));
// output: false
â € <
console.log (colours.includes ('blue', 1));
// output: sant

 

lastIndexOf()

Liknar indexOf(), lastIndexOf() hittar den sista instansen av ett givet värde i en array, i motsats till den första. Metoden startar sin sökning från slutet av matrisen och arbetar fram till början tills en lämplig matchning hittas. Om ingen matchning hittas återgår metoden -1:

var mat = ['sushi', 'pizza', 'ostburgare', 'sushi', 'pasta'];
â € <
console.log (food.lastIndexOf ('sushi'));
// utgång: 3
â € <
console.log (food.lastIndexOf ('burrito'));
// utgång: -1

 

.toString()

.toString() är något som liknar .join() metod, genom att båda kan returnera hela värdet index som en sträng. toString() är en mycket enklare metod. Den har inga valfria parametrar för att ange "separator" -tecken som ska placeras mellan varje värde. Alla värden i en matris separeras helt enkelt med ett komma (utan mellanslag). Detta kan vara bra eller dåligt, beroende på applikation.

Skapa API-förfrågningar med JavaScript

En av, om inte den viktigaste komponenten för att interagera med tjänster från tredje part, är att kommunicera med deras API: er. Står för Application Programming Interface, detta är det primära sättet på vilket olika webbplatser, applikationer och webbtjänster kan prata med varandra, ta emot och skicka data fram och tillbaka. Denna handledning fungerar som en grundläggande introduktion till att ansluta till ett webb-API via JavaScript och att kunna ta emot eller läsa GET begär att data ska returneras i JSON (eller JavaScript Objekt Notation) -format. Denna handledning förutsätter grundläggande kunskaper om JavaScript-objekt och åtkomstegenskaper, men är annars avsedd för personer utan tidigare erfarenhet av att arbeta med API: er.

Beskrivning

För denna handledning kommer vi att gå igenom Ghibli API, som inrättades för att introducera människor för att använda applikationsprogrammeringsgränssnitt (liksom för entusiaster av filmerna från Studio Ghibli).

API: et är uppdelat i 5 olika moduler eller komponenter för olika dataklasser relaterade till Studio Ghibli (filmer, människor, platser, arter och fordon). Var och en av dessa komponenter kallas mer formellt som en slutpunkt. När du ringer till slutpunkten via GET (eller en annan liknande metod, såsom fetch) kommer slutpunkten att returnera en matris med data som är specifika för den kategorin, i JSON-format. Till exempel skulle slutpunkten för filmer se ut så här:

API-förfrågningar med JavaScript

Vi tar slutpunkten för filmer (tillgänglig här), ring ett samtal via GEToch sedan log olika delar av data till console.

// Skapa en ny XMLHttpRequest och spara den till en variabel
var motta = ny XMLHttpRequest();
â € <
// Ange den slutpunkt som vi vill öppna, via `GET`-metoden
motta.öppet('SKAFFA SIG', 'https://ghibliapi.herokuapp.com/films', sann);
â € <
// Kör koden inom funktionen när slutpunkten har laddats
motta.belastning = fungera () {
â € <
  // Analysera inkommande data i JSON-format  
  var inkommande = JSON.parse(detta.respons);
  
  // Använd metoden .map array för att itera över varje index i filmerna
  // slutpunkt, sedan tillgång till releedatum, titel och Rotten Tomatoes 
  // poäng från varje, logga dem till konsolen med lite extra
  // formatering
  inkommande.karta(filmer => {
      trösta.log(filmer.Utgivningsdatum + ":" + filmer.rubricerade + "- (" +  filmer.rt_score + "% på ruttna tomater)");
    });
};
â € <
// Skicka den faktiska begäran för att utföra den funktion som tilldelats 
// `mottag.onload`
motta.sända();    

Att ange koden ovan i din webbläsarkonsol eller genom att köra som en JavaScript-fil som är länkad till en webbsida ska returnera följande:

API-förfrågningar med JavaScript

... där vi visar släppåret, filmens namn och dess övergripande betyg på Rotten Tomatoes (tillsammans med ytterligare formatering för bättre läsbarhet)

API-samtalet förklaras

De dokumenterade anteckningarna i skriptet ovan bör göra det mesta av API-samtalet förklarande, men manipuleringen av data inom receive.onload är värt ytterligare detaljer.

Du har nu möjlighet .map() array används för att itera över varje enskilt index inom filmens slutpunkt (dvs. varje film). A for loop kunde användas här lika bra, dock .map() gör samma sak med mycket mindre kod. .map() tar en återuppringningsfunktion (skriven här i ES6-syntax). Koden inom återuppringningsfunktionen körs för varje artikel i slutpunkten och hämtar dess släppdatum (films.release_date), titel (films.title) och göra poäng på Rotten Tomatoes (films.rt_score).

För enkelhetens skull, a console.log meddelandet används för varje objekt, men dessa data kan enkelt läggas till i HTML-element på sidan eller sorteras vidare med andra matrismetoder (dvs. filtrera bara bort filmer från 1980-talet). Medan det finns mycket mer att arbeta med API-tjänster är detta en översikt på hög nivå av mekaniken för att hämta data från ett API: s slutpunkter.

En översikt över `for`-loopar i JavaScript

En översikt över `for`-loopar i JavaScript

En grundläggande princip för datorprogrammering är det långvariga ordspråket "DRY", eller "Don't Repeat Yourself". Varje gång du befinner dig att skriva om samma kod om och om igen, är det troligt att det finns ett bättre sätt att omorganisera, utan att det behövs dubbla rader av samma kod. Ett av de bästa sätten att uppnå detta är via loopar. Det finns flera olika typer av slingor, som alla finns i olika former på alla programmeringsspråk. I det här inlägget tar vi en titt på en av de vanligaste och mest användbara formerna av öglor, for slinga.

Ett grundläggande exempel

Som en introduktion för att visa var loopar är mycket användbara, låt oss säga att du ville skriva ut "Hello World" till JavaScript-konsolen. Utan att använda en slinga skulle du behöva skriva något på följande sätt:

console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World"); console.log ("Hello World");

 

Detta är extremt tråkigt och ineffektivt. Ovanstående tio kodrader kan drastiskt förenklas med bara följande 10 rader:

för (var i = 0; i <10; i ++) {console.log ("Hello World"); }

 

Ovanstående exempel är vad som kallas a for loop, en av de vanligaste och mest användbara formerna av loopar.

Du har nu möjlighet for slinga

Det finns flera komponenter som går in i att skriva a for loop: räknaren eller det initiala uttrycket, villkoret, inkrementuttrycket och koden som ska exekveras inom slingan. Vi bryter ner vårt exempel ovan för att skapa en slinga som skriver ut "Hello World" till konsolen 10 gånger.

Alla for loopar börjar med nyckelordet for, följt av en uppsättning parenteser, följt av parenteser. Koden som ska köras placeras inom parenteserna. Skelettstrukturen för en for loop kan ses som:

för (counter; condition; increment) {// Kod att utföra går här}

 

Räknaren måste ställas in som en variabel; vid programmering ställs detta ofta in som i, även om det kan vara x, n eller något variabelt namn som tillåts av språket. Detta berättar loopens startvärde, i det här fallet, 0.

Nästa del av slingan säger till JavaScript villkoret: i det här fallet kör du slingan så länge som värdet på i är mindre än 10. Så snart öglan når 10 stannar den. Dess extremt viktigt att ha en villkorlig uppsättning innan du försöker köra din slinga, annars kommer du att få en oändlig slinga, vilket kommer att sluta överbelasta och krascha din webbläsare.

Den sista delen av slingan inom parentes är inkrementet: i++. i++ är stenografi i JavaScript för i += 1 or i = i + 1. Med andra ord lägger den till 1 till värdet av i varje gång slingan körs. Detta är också en viktig del av slingan, som om den inte faktiskt ökar kommer den inte heller att avslutas.

Vilken kod som helst som placeras inom parenteserna kommer att gå igenom varje iteration av slingan. Om du vill få någon form av indikation på vilken iteration slingan är på varje gång du kör, kan du helt enkelt lägga till räknervariabeln som ska ingå i koden som ska returneras varje gång (dvs. ):

för (var i = 1; i <= 10; i ++) {console.log ("Slingan är nu på iteration" + i); }

 

Ovanstående kod kommer när den körs att skrivas ut:

Slingan är nu på iteration 1 Slingan är nu på iteration 2 Slingan är nu på iteration 3 Slingan är nu på iteration 4 Slingan är nu på iteration 5 Slingan är nu på iteration 6 Slingan är nu på iteration 7 The loop är nu på iteration 8 loop är nu på iteration 9 loop är nu på iteration 10

En introduktion till Node.js

En introduktion till Node.js

JavaScript-utvecklingen har kommit långt sedan den först introducerades 1995 av Mozilla grundare Brendan Eich. JavaScript användes ursprungligen som ett skriptspråk på klientsidan och har utvidgat användningen till applikationer långt bortom dess ursprungliga avsikter. Språket används inte längre enbart på klientsidan. Med introduktionen av Node.js, JavaScript används nu också på serversidan, vilket ersätter behovet av andra back-end-språk som PHP, Python eller Ruby.

Mer än bara en nyhet, fler och fler utvecklare och företag omfamnar med JavaScript på baksidan, vilket gör att allt utvecklingsarbete kan utföras på ett enda språk. För att få en bättre uppfattning om varför detta blir en växande trend, kommer det här inlägget att ta en titt på vad Node.js är och vad det bäst används för.

En förklaring av Node.js

Node.js är ett JavaScript-ramverk eller ett bibliotek utvecklat för att kunna använda JavaScript som ett primärt skriptspråk på serversidan. Det är inte ett nytt språk, helt enkelt en delmängd kod skriven för JavaScript-språket. Ursprungligen skapad av Ryan Dahl 2009, bygger den på Google Chrome JavaScript V8 Engine, som i sig utvecklades för att erbjuda bättre prestanda än andra befintliga JavaScript-motorer. Node.js är helt öppen källkod, körs på alla operativsystem och förbättras ständigt av det stora utvecklarsamhället som omger projektet.

Eftersom den är avsedd speciellt för backend-användning, kommer Node.js med en mängd olika moduler för att hantera vanliga uppgifter man skulle använda ett skriptspråk på serversidan för. Detta kan påskynda utvecklingsprocessen oerhört och abstrakta vanliga funktioner som du annars skulle behöva skriva från grunden.

De grundläggande funktionerna i Node.js

Här är några av de grundläggande funktionerna i Node.js som skiljer sig från andra skriptramar:

Händelsestyrd, asynkron programmering

API: er som används förutom Node.js-ramverket är helt asynkrona, annars kända som icke-blockerande. Detta motsvarar att Node.js aldrig behöver vänta på ett specifikt API för att skicka data utan att gå vidare till en annan uppgift. Node.js kommer att gå vidare till ett annat API och hålla reda på vilken data den fortfarande väntar på att få från andra API: er.

High Performance

Node.js är extremt snabb jämfört med andra serveralternativ, efter att ha byggts på Google Chrome V8 Engine. Beroende på jämförda versioner har Node.js överträffat PHP och Python i benchmarktester.

Undvik buffring

Node.js-applikationer matar alltid ut data i bitar för att undvika buffring.

Skalbar

Node.js utvecklades för att användas för både små projekt och stora företagssystem. Node.js använder en enkel trådad modell för att möjliggöra asynkrona händelser, medan vanliga serverspråk använder ett begränsat antal trådar för att hantera dataförfrågningar. Detta innebär i slutändan att Node.js kan hantera ett större antal serverförfrågningar samtidigt än en mer typisk serverinstallation som Apache HTTP.

Node.js i praktiken

Node.js används för en mängd olika användningsområden, från öppen källkodsprojekt eller små startups, till Fortune 500-företag. En kort lista över företag som använder Node.js inkluderar PayPal, Uber, Microsoft, eBay och GoDaddy.

Vad Node.js är bäst för

Några av användningsområdena där Node.js verkligen lyser inkluderar I / 0-bundna applikationer, såsom chattmeddelanden, datastreamingtjänster som livevideo, Data Intensive Real-Time Applications (DIRT), enkelsidiga webbapplikationer och applikationer som använder en många JSON-baserade API: er.

Slutsats

Vi hoppas att du hittade några användbara tips från den här artikeln som du kan använda med din nästa Javascript-projekt. Skicka gärna din feedback och JS-tips via kommentarsektionen nedan.

Du kanske också vill kolla in denna fantastiska resurs som jämför JavaScript kontra PHP.

Författare Bio

Angelo har varit involverad i den kreativa IT-världen i över 20 år. Han byggde sin första webbplats 1998 med Dreamweaver, Flash och Photoshop. Han utvidgade sin kunskap och expertis genom att lära sig ett bredare spektrum av programmeringskunskaper, såsom HTML / CSS, Flash ActionScript och XML.

Angelo slutförde formell utbildning med CIW-programmet (Certified Internet Webmasters) i Sydney, Australien, där han lärde sig kärnan i datanätverk och hur det relaterar till infrastrukturen på internet.

Förutom att köra Sunlight Media, tycker Angelo om att skriva informativt innehåll relaterat till webb- och apputveckling, digital marknadsföring och andra tekniska relaterade ämnen.

Posta en kommentar

Kommentarer modereras. Din e-post hålls privat. Behövliga fält är markerade *