Home-theater-designers
Webbutvecklare på alla färdighetsnivåer, från nybörjarprogrammerare till kodningsexperter, ser vikten av JavaScript för att utveckla moderna webbplatser. JavaScript är så dominerande att det är en viktig färdighet att veta om du ska skapa webbappar.
En av de mest kraftfulla byggstenarna som är inbyggda i JavaScript-språket är matriser. Arrays finns vanligtvis på många programmeringsspråk och är användbara för lagring av data.
JavaScript innehåller också användbara funktioner som kallas array -metoder. Här är femton du bör titta närmare på för att utveckla dina färdigheter som utvecklare.
Vad är Array -metoder?
Array metoder är funktioner inbyggda i JavaScript som du kan använda på dina matriser. Varje metod har en unik funktion som utför en ändring eller beräkning på din matris, så att du inte behöver koda vanliga funktioner från grunden.
Arraymetoder i JavaScript körs med hjälp av en punktnotering kopplad till din matrisvariabel. Eftersom de bara är JavaScript -funktioner slutar de alltid med parenteser som kan innehålla valfria argument. Här är en metod kopplad till en enkel array som heter myArray .
let myArray = [1,2,3]; myArray.pop();Denna kod skulle tillämpa en metod som kallas pop- till matrisen.
Exempel Array
För varje exempel, använd en exempelmatris som vi kommer att anropa myArray , för att utföra metoderna på. Dra gärna upp din konsol och koda med.
let myArray = [2,4,5,7,9,12,14];Dessa exempel antar att du känner till grunden för vad JavaScript är och hur det fungerar . Om du inte gör det är det okej, vi är alla här för att lära och växa.
Gräva i dessa femton kraftfulla matrismetoder!
1. Array.push ()
Vad den gör: skjuta på() tar din matris och lägger till ett eller flera element i slutet av matrisen och returnerar sedan den nya längden på matrisen. Denna metod kommer att ändra din befintliga array.
Lägg till talet 20 i matrisen genom att köra skjuta på() , med 20 som argument.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Kolla om det fungerade:
console.log(myArray); [2,4,5,7,9,12,14,20]Kör skjuta på() metoden på myArray lade till värdet som anges i argumentet i matrisen. I det här fallet, 20. När du markerar myArray i konsolen ser du att värdet nu läggs till i slutet av matrisen.
2. Array.concat ()
Vad den gör: konkat () kan slå ihop två eller flera matriser till en ny array. Det ändrar inte de befintliga matriserna utan skapar en ny.
Ta myArray och slå ihop en array som kallas newArray Gillar det.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Denna metod gör underverk vid hantering av flera matriser eller värden som du måste kombinera, allt i ett ganska enkelt steg när du använder variabler.
3. Array.join ()
Vad den gör: Ansluta sig() tar en array och sammanfogar matrisens innehåll, åtskilt med ett kommatecken. Resultatet placeras i en sträng. Du kan ange en separator om du vill använda ett alternativ till ett kommatecken.
Ta en titt på hur detta fungerar med myArray. Använd först standardmetoden utan separatorargument, som använder ett komma.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript kommer att mata ut en sträng, med varje värde i matrisen åtskilt av ett kommatecken. Du kan använda ett argument i funktionen för att ändra avgränsaren. Observera det med två argument: ett enda mellanslag och en sträng.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Det första exemplet är ett mellanslag, vilket gör en sträng som du enkelt kan läsa.
Det andra exemplet använder ('och') , och det finns två saker att veta här.
Först använder vi ordet 'och' för att skilja värdena. För det andra finns det ett mellanslag på båda sidor av ordet 'och'. Detta är en viktig sak att tänka på när du använder den Ansluta sig() . JavaScript läser argument bokstavligen; så om detta utrymme utelämnas, kommer allt att krympa ihop (dvs. '2and4and5 ...' etc.) Inte en mycket läsbar utdata!
4. Array.forEach ()
Vad den gör: för varje() (skiftlägeskänslig!) utför en funktion på varje objekt i din matris. Denna funktion är vilken funktion som helst som du skapar, ungefär som att använda en 'för' -slinga för att tillämpa en funktion på en matris men med mycket mindre arbete att koda.
Det finns lite mer att göra för varje() ; titta på syntaxen och utför sedan en enkel funktion att demonstrera.
myArray.forEach(function(item){
//code
});
Vi använder myArray , för varje() tillämpas med punktnotationen. Du placerar den funktion du vill använda inuti argumentet parentes, vilket är funktion (artikel) i exemplet.
Ta en titt på funktion (artikel) . Detta är funktionen som utförs inuti förEach (), och den har sitt eget argument. Vi kallar argumentet Artikel . Det finns två saker att veta om detta argument:
- När forEach () går över din array, tillämpar den koden på detta argument. Se det som en tillfällig variabel som innehåller det aktuella elementet.
- Du väljer namnet på argumentet, det kan heta vad du vill. Vanligtvis skulle detta heta något som gör det lättare att förstå, som 'objekt' eller 'element'.
Med dessa två saker i åtanke, kolla in detta enkla exempel. Lägg till 15 till varje värde och låt konsolen visa resultatet.
myArray.forEach(function(item){
console.log(item + 15);
});
Vi använder Artikel i detta exempel som variabel, så funktionen är skriven för att lägga till 15 till varje värde via Artikel . Konsolen skriver sedan ut resultaten. Så här ser det ut i en Google Chrome -konsol.
Resultatet är varje nummer i matrisen, men med 15 tillagda!
5. Array.map ()
Vad den gör: Karta() utför en funktion på varje element i din array och placerar resultatet i en ny array.
Att köra en funktion på varje element låter som förEach (). Skillnaden här är Karta() skapar en ny array när den körs. forEach () skapar inte en ny array automatiskt, du måste koda en specifik funktion för att göra det.
Använd map () för att dubbla värdet för varje element i myArray och placera dem i en ny array. Du kommer att se samma sak funktion (artikel) syntax för lite mer övning.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Kontrollera resultaten i konsolen.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray är oförändrad:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Vad det gör: I likhet med hur push () -metoden fungerar, unshift () method tar din array och lägger till ett eller flera element till arrayens start istället för slutet, och returnerar den nya längden på arrayen. Denna metod kommer att ändra din befintliga array.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);När du loggar matrisen till konsolen bör du se siffran 0 i början av matrisen.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Vad det gör: Sortering är en av de vanligaste operationerna som utförs på en array och är mycket användbar. JavaScript sortera() matrismetod kan användas för att sortera en rad nummer eller till och med strängar med bara en enda kodrad. Den här åtgärden är på plats och returnerar den sorterade matrisen genom att ändra den första matrisen. Ta en annan uppsättning siffror för myArray den här gången.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Eftersom sorteringen görs på plats behöver du inte deklarera en separat variabel för den sorterade matrisen.
console.log(myArray); [10, 12, 34, 55, 65]Som standard är matrisen sorterad i stigande ordning, men du kan eventuellt skicka en anpassad funktion till sortera() metod för att sortera matrisen på önskat sätt. I det här fallet klarade jag en sed pilfunktion för att sortera matrisen numeriskt i stigande ordning.
8. Array.reverse ()
Vad det gör: Som namnet antyder är omvänd() metod används för att vända ordningen på element i matrisen. Observera att detta inte vänder innehållet i matrisen utan bara själva ordningen. Här är ett exempel för att förstå denna metod bättre:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Logga utmatningen till konsolen för att verifiera funktionen.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Som du kan se har elementens ordning blivit omvänd. Tidigare är elementet vid det sista indexet (element 14 vid index 6) nu elementet vid nollpunktsindexet och så vidare.
9. Array.slice ()
Vad den gör: skiva() används för att hämta en grund kopia av en del av en array. I enklare termer tillåter den här metoden dig att välja specifika element från en array med deras index. Du kan skicka startindexet för elementet från vilket du vill hämta och element och eventuellt även slutindex.
Om du inte anger slutindex hämtas alla element från startindex till slutet av matrisen. Denna metod returnerar en ny matris och ändrar inte den befintliga.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);I koden ovan hämtas alla element från det andra indexet till det sista indexet eftersom slutindexparametern inte skickas. Logga båda matriserna till konsolen.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Uppenbarligen modifieras inte den första matrisen med metoden slice () och returnerar istället en ny matris som lagras i skivad matris variabel. Här är ett exempel där slutindexparametern också skickas till skiva() metod.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Vad den gör: splitsa() är en användbar matrismetod som används för att ta bort eller ersätta element i matrisen på plats. Genom att ange index och antal element som ska raderas, ändras matrisen.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);I exemplet ovan, myArray array splitsas från index 2 och 3 element tas bort från den. Arrayen består nu av:
[2, 4, 12, 14]För att ersätta elementen i stället för att bara radera dem kan du skicka valfritt antal valfria parametrar med elementen du vill ersätta med, så här:
hur tar jag bort andra på iphone
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Vad det gör: filtrera() method är en användbar array -metod som tar en funktion som innehåller ett test och returnerar en ny array med alla element som klarar det testet. Sann mot namnet används denna metod för att filtrera de element du behöver från de andra elementen. Filtreringen görs med en funktion som returnerar ett booleskt värde.
Här är ett exempel på filtrera() metod som används för att hämta endast de element från matrisen som är delbara med 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);I exemplet ovan skickas en pilfunktion som parametern som tar varje nummer från den ursprungliga matrisen och kontrollerar om det är delbart med 2 med modulo ( % ) och jämlikhet ( === ) operatör. Så här ser utgången ut:
[2, 4, 12, 14]12. Array.reduce ()
Vad den gör: minska() är en matrismetod som tar en reduktionsfunktion och kör den på varje arrayelement för att mata ut ett enda värde vid retur. Det tar en reducerande funktion med en ackumulatorvariabel och en aktuell elementvariabel som nödvändiga parametrar. Ackumulatorns värde kommer ihåg i alla iterationer och returneras slutligen efter den sista iterationen.
Ett populärt användningsfall för denna metod är att beräkna summan av alla element i matrisen. Implementeringen av denna funktion är följande:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 skickas som den andra parametern i exemplet ovan, som används som startvärdet för ackumulatorvariabeln. De sumOfNums variabeln innehåller returvärdet för minska() metod som förväntas vara summan av alla element i matrisen.
console.log(sumOfNums); 5313. Array. Inkluderar ()
Vad det gör: Att söka efter ett element i en array för att kontrollera om det finns är en operation som används ganska ofta och därför har JavaScript en inbyggd metod för detta i form av inkluderar () matrismetod. Så här kan du använda den:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Denna metod kräver en obligatorisk parameter, elementet att söka efter och en valfri parameter, det arrayindex som du kan börja söka från. Beroende på om elementet är närvarande eller inte, kommer det att återvända Sann eller falsk respektive. Utgången kommer därför att vara:
true
false
true
false14. Array.indexOf ()
Vad den gör: index för() metod används för att ta reda på indexet vid vilket den första förekomsten av ett specificerat element kan hittas i arrayen. Även om den liknar metoden inklusive () returnerar den här metoden det numeriska indexet eller -1 om elementet inte finns i matrisen.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));index för() metoden använder strikt jämlikhet för att kontrollera om ett element finns, vilket innebär att värdet, liksom datatypen, ska vara samma. Den valfria andra parametern tar indexet för att börja söka från. Baserat på dessa kriterier kommer resultatet att se ut så här:
1
-1
415. Array.fill ()
Vad den gör: Ofta kan du behöva ställa in alla värden i matrisen till ett statiskt värde som 0. Istället för att använda en loop kan du prova fylla() metod för samma syfte. Du kan anropa den här metoden på en matris med 1 parameter som krävs: värdet att fylla matrisen med och 2 valfria parametrar: start- och slutindexet att fylla mellan. Denna metod ändrar den spännande matrisen.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);När du loggar utmatningen till konsolen ser du:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Nästa steg i din JavaScript -resa
Arrays är en kraftfull del av JavaScript-språket, varför det finns så många inbyggda metoder för att göra ditt liv enklare som utvecklare. Det bästa sättet att bemästra dessa femton metoder är att öva.
När du fortsätter att lära dig JavaScript, MDN är en bra resurs för detaljerad dokumentation. Bli bekväm i konsolen och ta sedan dina kunskaper med de bästa JavaScript -redigerarna för programmerare. Klar att bygga din webbplats med JavaScript? Varför inte ta en titt på några ramar du kan tänka dig.
Dela med sig Dela med sig Tweet E-post 6 JavaScript -ramverk värda att lära sigDet finns många JavaScript -ramverk där ute för att hjälpa till med utveckling. Här är några du borde veta.
Läs Nästa Relaterade ämnen- Programmering
- JavaScript
- Kodningstips
Nitin är en ivrig mjukvaruutvecklare och en datoringenjörstudent som utvecklar webbapplikationer med hjälp av JavaScript -teknik. Han arbetar som frilansande webbutvecklare och gillar att skriva för Linux och programmering på fritiden.
Mer från Nitin RanganathPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera