Array Methods

Wenn wir mit Arrays arbeiten, brauchen wir drei Dinge sehr häufig:

• die Posititon (also den Index) eines Elements im Array
• ein Element zum Array hinzufügen
• ein Element aus dem Array löschen

Für all das gibt es mehrere Methoden in JavaScript.

Finding the position/the index of an item

Für einfache Werte/primitive Values (also keine Werte innerhalb von Objekten, Arrays oder Funktionen) können wir indexOf() verwenden.
Für den Index von Objekten, Arrays oder Funktionen verwenden wir die Methode findIndex().

Array.indexOf(itemToFind)

const myArray = [1, 2, 3, 4, 5];
const posOf5 = myArray.indexOf('5');
const posOf10 = myArray.indexOf('10');
console.log(posOf5);   //  4
console.log(posOf10);  // -1 This value doesn't exist, so -1 is returned

Manipulating arrays

Elemente können an verschiedenen Positionen zu einem Array hinzugefügt bzw. von dort gelöscht werden:

• am Anfang
• am Ende
• irgendwo dazwischen

+unshift -shift … +push -pop
Uncle Sam’s puppy likes poppies.

Adding items to the start

Array.unshift(itemToAdd, anotherItemToAdd)

const myArray = [1, 2, 3, 4, 5];
myArray.unshift(0);       // 0, 1, 2, 3, 4, 5
myArray.unshift(4, 10);   // 4, 10, 0, 1, 2, 3, 4, 5

Adding items to the end

Array.push(itemToAdd, anotherItemToAdd)

const myArray = [1, 2, 3, 4, 5];
myArray.push(13);    // 1, 2, 3, 4, 5, 13
myArray.push(6, 7);  // 1, 2, 3, 4, 5, 13, 6, 7

Removing items from the start

Array.shift()

const myArray = [10, 0, 1, 2, 3, 4, 5];
myArray.shift();  // 0, 1, 2, 3, 4, 5

// to remove two items, use shift twice:
myArray.shift();  // 1, 2, 3, 4, 5

Removing items from the end

Array.pop()

const myArray = [1, 2, 3, 4, 5, 6, 7];
myArray.pop();  // 1, 2, 3, 4, 5, 6

// to remove two items, use pop twice
myArray.pop();  // 1, 2, 3, 4, 5

Adding and removing items anywhere

Array.splice(index, deleteCount, itemsToAdd)

• index: Hier fangen wir an, den Array zu ändern
• deleteCount: Anzahl der Elemente, die gelöscht werden sollen
• itemsToAdd: Elemente, die hinzugefügt werden sollen (kommagetrennt)

Die Methode ist auf den ersten Blick etwas verwirrend, weil man immer nachdenken muss, wo die Änderungen tatsächlich anfangen. Also dröseln wir das auf:

• Wenn wir ein neues Element am Beginn des Arrays einfügen oder löschen wollen, setzen wir index = 0. Das Element, das usprünglich an erster Stelle war (also den index 0 hatte), rückt weiter nach hinten.
• Wenn wir ein neues Element am Ende des Arrays einfügen oder löschen wollen, setzen wir index = array.length. Da der Index immer um eins weniger ist als die Länge, behält das letzte Element seinen ursprünglichen Index und das neue Element bekommt automatisch den nächsten Index.
• Kniffliger wird es dazwischen. Wenn index = 2 ist, dann behalten die ersten beiden Elemente ihren Index.
  • Wenn wir an dieser Stelle ein Element einfügen, rückt das dritte Element nach hinten und das neu eingefügte Element erhält nun den Index 2.
  • Wenn wir an dieser Stelle ein Element löschen, rückt das übernächste Element nach vorne und erhält den Index des eben gelöschten Elements.

const myArray = [3, 4, 5];
// adding items to the start with splice
myArray.splice(0, 0, 1, 2);   // 1, 2, 3, 4, 5

// adding items to the end with splice (easier with push!)
myArray.splice(myArray.length, 0, 6);  // 1, 2, 3, 4, 5, 6

// adding items to the middle of an array
myArray.splice(3, 0, 337);   // 1, 2, 3, 337, 4, 5, 6

// removing items from the start with splice
myArray.splice(0, 2);   // 3, 337, 4, 5, 6

// removing items from the end with splice (easier with pop!)
myArray.splice(myArray.length - 1, 1);   // 3, 337, 4, 5

// removing items from the middle of an array
myArray.splice(1, 1);  // 3, 4, 5

Copy an array with slice()

This method does not change the original array.

Array.slice()

const myArray = [1, 2, 3, 4, 5];
const copy = myArray.slice();
copy.push(6);
console.log(myArray); // 1, 2, 3, 4, 5
console.log(copy);    // 1, 2, 3, 4, 5, 6