Metoder för Arrayer

Metoder för Arrayer

Ofta handlar programmering om att arbeta med stora mängder data. Då data inte alltid är i format som passar just det program som ska skapas behövs verktyg (metoder) för att kunna strukturera om data.

Här tas ett antal metoder upp som används för att ändra i arrayer.
Använd metoderna i editorn och se vad de gör genom att skriva ut resultaten i konsolen. Prova, testa och ändra eventuella argument för att förstå metoderna.

toString()

Returnerar en textsträng med kommatecken mellan varje element.

let arr = [10,10,10,10,10,10];
let conv = arr.toString();

console.log(arr);
console.log(conv);

join()

Returnerar en textsträng med kommatecken mellan varje element om inget argument anges inom parenteserna. För att få ett mellanslag mellan anges det som en sträng inom parenteserna.

let arr = [10,10,10,10,10,10];
let conv = arr.join(' ');

console.log(arr);
console.log(conv);

Det går att ange vilken sträng som helst som skiljetecken (separator) för elementen

let arr = [10,10,10,10,10,10];
let conv = arr.join(' 🙈 🙉 🙊 ');

console.log(arr);
console.log(conv);

pop()

Tar bort sista elementet i arrayen och returnerar det. Observera att ursprunglig array ändras.

var arr = [10,20,30,40,50,60];
var conv = arr.pop();

console.log(arr);
console.log(conv);

push()

Lägger till element sist i arrayen. Returnerar antal element i arrayen efter push. Ursprunglig array ändras och endast antal element returneras.

let arr = [10,20,30,40,50,60];
let conv = arr.push(70);

console.log(arr);
console.log(conv);

Du kan lägga till flera element genom att skilja elementen med kommatecken.

let arr = [10,20,30,40,50,60];
let conv = arr.push(70,80,90,100, 'Det går bra att blanda in text också!');

console.log(arr);
console.log(conv);

shift()       unshift()

Fungerar som pop() och push() men tar bort respektive lägger till i början av arrayen.

Om man arbetar med stora mängder data så är shift och unshift väldigt mycket långsammare än pop och push. När shift används så måste alla element i arrayen byta index eftersom det fylls på framifrån. Med pop är det bara ett index som försvinner och alla andra blir kvar på sin position.

byta ut element i arrayen

Genom att ange ett index för ett element så kan man byta ut elementets värde i en array.

let arr = [10,20,30,40,50,60];
let conv = arr[0] = 'utbytt!';

console.log(arr);
console.log(conv);

Index kan också användas för att lägga till saker i arrayen.

let arr = [10,20,30,40,50,60];
let conv = arr[arr.length] = 'utbytt!';

console.log(arr);
console.log(conv);

Här används arr.length vilket är antal element i arrayen. Eftersom index börjar på 0 kommer antal element att vara 1 mer än sista indexnumret. Det gör i det här fallet att arr.length betyder index 7.
Det går inte att lägga till flera element på detta sätt.

Du kan lägga in element på positioner långt fram i en array.

let arr = [10,20,30,40,50,60];
let conv = arr[25] = 'utbytt!';

console.log(arr);
console.log(conv);

Koden returnerar en array med flera tomma (undefined) index.

delete       ta bort element

Element kan raderas men lämnar då ett tomt index.

let arr = [10,20,30,40,50,60];
delete arr[2];

console.log(arr);

Tomma index bör undvikas om de inte har ett specifikt syfte. De tar bara onödig plats.

slice()

Kopierar en del av en array och returnerar delen som en ny array. Ändrar inte den ursprungliga arrayen.

array.slice(från,  till );
från är indexnummer där den ska börja. till är fram till (inte inkluderat) indexnummer.

let arr = [10,20,30,40,50,60];
let conv = arr.slice(1,3);

console.log(arr);
console.log(conv);

Om andra argumentet utelämnas kopieras allt från argument från fram till slutet av arrayen.

splice()

Används för att ta bort eller lägga till element i en array. Splice() ändrar ursprunglig array och returnerar borttagna element som en ny array

För att ta bort element anges vilket index som ska börjas med och därefter antal element som ska tas bort.
Anges bara ett argument så börjar splice på det indexet och tar bort allt därefter.

För att lägga till element i arrayen anges argument för vilket index som tillägget ska placeras före. Som argument två anges om något element ska raderas. Därefter skrivs de nya elementen in separerade av kommatecken.

let arr = [10,20,30,40,50,60];
let conv = arr.splice(1,0,11,12,13,14,15);

console.log(arr);
console.log(conv);

Returnerar en array med eventuellt borttagna element eller en tom array om inget element tagits bort.

concat()

Slår ihop arrayer och returnerar en ny array. Ändrar inte ursprungliga arrayer.

let arr1 = [10, 20, 30, 40, 50, 60];
let arr2 = [70, 80, 90, 100];
let conv = arr1.concat(arr2);

console.log(arr1);
console.log(arr2);
console.log(conv);

Det finns fler intressanta metoder för arrayer. Läs mer här https://www.w3schools.com/jsref/jsref_obj_array.asp

 Skapa ett nytt program i p5.js editor med innehåll som ses nedan.  Målet är att använda metoder i arrayen som gör att det ritas ut följande på canvasen.

Kopiera koden som finns nedan.

På position 0 i arrayen står ”¯\\_” Här är det ett omvänt snedstreck mer än vad som ska vara i bilden. Det beror på att omvänt snedstreck har en speciell betydelse i JavaScript. Den betyder att nästkommande tecken ska skippas. För att motverka att det ses som specialtecken kan man skriva ett omvänt snedstreck innan. När strängen tolkas kommer bara ett omvänt snedstreck att finnas.

let arr = ["¯\\_", 20, 55, "(ツ)", 8, 12, "_/¯"];
let conv = arr.slice(); //Skriv in två argument här 
let conv2 = arr.slice(); //Skriv in två argument här
let conv3 = arr.slice(6); //Skriv in ett argument här

function setup() {
  createCanvas(400, 400);
  background('#BADA55');
  conv =  // Här ska du addera ihop alla tre arrayerna med concat()
  console.log(conv); //Bra att ha för att kunna se att det går framåt
  conv = // här ska du slå ihop arrayen till en textsträng med lämplig metod
//Kod för att skriva ut på canvasen är färdigskriven
  textSize(72);
  textAlign(CENTER, CENTER);
  text(conv, width / 2, height / 2);
}