Manipulera matriser
För att data och information på dina webbplatser ska vara interaktiva behöver du ett sätt att manipulera och lagra data i koden. Tack och lov kan JavaScript lagra flera objekt i en matris. Med hjälp av matriser kan du spara från att deklarera många variabler, bland andra fördelar.
Om matriser
En matris är en typ av datastruktur som innehåller mer än ett element. Föreställ dig en inköpsorder som innehåller flera beställningsartiklar eller en glassbar med flera smaker att välja mellan. I stället för att till exempel lagra åtta olika glasssmaker som åtta olika variabler kan du använda en enda matris för att lagra den informationen, enligt följande:
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Neapolitan"];
I den här koden anger du en matris genom att omsluta allt dess innehåll inom hakparenteser ([]).
Få åtkomst till ett objekt
Innehållet i en matris kallas vanligtvis antingen element eller objekt. Du behöver ofta komma åt ett visst element för att läsa dess värde, uppdatera det eller till och med ta bort det. För att få åtkomst till ett visst element använder du hakparenteser och den position som du är intresserad av, så här:
array[<number>]
Det första objektet i en matris börjar på 0 och det sista objektet är dess längd (antal objekt) minus 1. Om en matris har tre objekt skulle 0 alltså vara den första positionen och 2 dess sista position. En position i en matris kallas dess index. När vi tittar på matrisen iceCreamFlavors antar vi att du vill ha Pistachio. Om du vill läsa dess värde kan du skriva följande kod:
iceCreamFlavors[3] // Pistachio
Ändra ett värde
Om du vill ändra ett värde i en matris måste du välja objektets index och tilldela det ett nytt värde med hjälp av likhetsteckentilldelningsoperatorn (=) och ett värde till höger om operatorn. Din glassbutik har slut på "napolitansk", men oroa dig inte, du har hittat lite "Butter Pecan":
iceCreamFlavors[4] = "Butter Pecan"; //Changes "Neapolitan" to "Butter Pecan"
Lägg till fler värden
Vid något tillfälle expanderar din glassverksamhet och du vill erbjuda fler smaker. Vad gör du? Du kan använda metoden push() för att lägga till fler smaker. Metoden push() tar ett objekt som indata och lägger till objektet i den ursprungliga matrisen. Om du till exempel vill lägga till "Mint Chip" som smak använder du följande kod:
iceCreamFlavors.push("Mint Chip");
Använd matrislängden
Tänk dig att någon frågar, hur många smaker av glass har du? Du tittar i det bakre rummet, men allt du ser är ett hav av smaker, som kommer att ta lite tid att räkna. Men vänta, på matrisen finns det ett length fält som du kan använda för att räkna alla smaker:
iceCreamFlavors.length // 6 flavors, because you recently added "Mint Chip"
Dricks
Använd webbläsarens konsol för att skapa och ändra en matris med din egen skapande. Kom ihåg att du kan skriva JavaScript direkt i webbläsaren. Om du vill göra det öppnar du ett webbläsarfönster och går till Utvecklarverktyg. I konsolen visas en uppmaning. Experimentera med att manipulera en matris med index och egenskaper, som du just har lärt dig om.
Ta bort ett värde
Om du vill ta bort ett värde från en matris kan du använda delete. Låt oss säga att du precis har slut på "Mint Chip". Hinken är fortfarande där, men glassen "Mint Chip" är borta. Koden ser ut så här:
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Neapolitan", "Mint Chip"];
delete iceCreamFlavors[iceCreamFlavors.length-1];
console.log(iceCreamFlavors[length-1]) // undefined
Alla dina objekt finns kvar, men bucketen, där "Mint Chip" brukade vara, rensas. Du kan nu tilldela den med en ny smak, vad skulle du lägga till?
iceCreamFlavor[iceCreamFlavor.length-1] = "your choice";
Ta bort ett objekt
Ibland räcker det inte att ta bort värdet. Hela hinken måste gå. Du kanske inte har tillräckligt med utrymme hemma? Du bestämmer dig för att äta all "Vanilla" (du kommer förmodligen att ångra detta senare) och kasta bort kartongen den kom in. För den här åtgärden använder du matrismetoden splice(). Det tar en position och hur många element som ska tas bort, som visas i den här koden:
array.splice(<position index, <number of elements to remove>)
Om du vill ta bort ett objekt (äta all "Vanilj" och sy kartongen splice() ) använder du metoden så här:
iceCreamFlavor.splice(2,1);
iceCreamFlavor // [ 'Chocolate', 'Strawberry', 'Pistachio', 'Neapolitan', 'Mint Chip' ]