JavaScript - Arraymethoden

concat

Die concat() Methode erzeugt ein neues Array durch die Aneinanderreihung der Werte zweier anderer Arrays.

// Methodenkopf: concat(array)
/*
 * @param array: Die Elemente des array Parameters werden
 * mit den Elementen des Grundarrays vermengt. (required)
 */
const n1 = [4, 5, 7, 9];
const n2 = [5, 8];

// Das n1 Array wird nicht veraendert. Es wird ein neues
// Array erzeugt, bestehend aus den Elementes
// des n1 und n2 Arrays.
let numbers = n1.concat(n2);

for (const n of numbers) {
  console.log(n);
}

// output: 4 5 7 9 5 8

includes

Die includes() Methode prüft, ob in einem Array ein bestimmter Wert enthalten ist. Sie gibt als Ergebnis true oder false zurück.

// Methodenkopf: includes(item, index)
/*
 * @param item: Es wird geprueft ob das array den
 * item Parameter als Wert enthaelt. (required)
 *
 * @param index: Die Pruefung des Array erfolgt
 * erst ab dem durch den Parameter vorgegebenen Index. (optional)
 */
const fruits = [
  "Banana", "Orange", "Apple", "Mango"
];

// Pruefung ob im fruits Array der Wert Banana enthalten ist.
fruits.includes("Banana");
// -> true

fruits.includes("Banana", 1);
// -> false

slice

Die slice() Methode wird verwendet um Teile eines Arrays in ein neues Array zu extrahieren. Das ursprüngliche Array wird nicht verändert.

// Methodenkopf: slice(start, end)
/*
 * @param: start: Der Wert des Parameters entspricht dem Index
 * ab dem die Elemente des Arrays kopiert werden. (required)
 *
 * @param end: Der Wert des Parameters entspricht dem Index
 * jenes Elements des Arrays bis zu dem kopiert werden soll. (optional)
 */
const animals = [ "ant", "bison", "camel", "duck", "elephant" ];

console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// ["camel", "duck"]

console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// ["duck", "elephant"]

console.log(animals.slice(2, -1));
// ["camel", "duck"]

flat

Die flat() Methode wird verwendet um eingebettete Array-Elemente aufzulösen.

const numbers = [
  4, 5, 7, 9,
  [4, 8, 3],
  [3, [8, 9]]
];

numbers = numbers.flat();
// output: 4 5 7 9 4 8 3 3 8 9

splice

Die splice() Methode wird verwendet um Elemente in ein Array einzufügen. Achtung: Entgegen vieler anderer Methoden verändert splice das ursprüngliche Array.

// Methodenkopf: splice(beginIndex, itemCount, items)
/*
 * @param beginIndex: Der erste Parameter definiert die Position
 * ab der das Array verändert werden soll. (required)
 *
 * @param itemCount: Der zweite Parameter definiert wie viele
 * Elemente gelöscht werden sollen (optional)
 *
 * @param items: Der Rest der Parameter definiert die
 * neuen Elemente, die hinzugefügt werden sollen. (optional)
 */
const fruits = [ "Banana", "Orange", "Apple", "Mango" ];

fruits.splice(2, 0, "Lemon", "Kiwi");
// "Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"

fruits.splice(2, 1);
// "Banana", "Orange", "Kiwi", "Apple", "Mango"

copyWithin

Die copyWithin() Methode wird zum Kopieren von Elementen innnerhalb eines Arrays verwendet. Die Methode überschreibt existierende Werte. Die Methode fügt keine Elemente zum Array hinzu. Die Methode ändert nicht die Länge des Arrays.

// Methodenkopf: copyWithin(targetIndex, begin, end)
/*
 * @param targetIndex: Der erste Parameter definiert den Startindex
 * wohin die Elemente kopiert werden sollen. (required)
 *
 * @param begin: Der zweite Parameter definiert den Index des
 * ersten Elements, das kopiert werden soll. (required)
 *
 * @param end: Der dritte Parameter definiert das letzte Element,
 * das kopiert werden soll. (required)
 */

const numbers = [4, 5, 7, 9];
numbers.copyWithin(2, 0, 1);
// output: 4 5 4 5

Zusammenfassung

Fortgeschrittene Arraymethoden

Higher order functions sind Funktionen die andere Funktionen als Parameter nehmen. Damit kann die higher oder function ein generelles Grundgerüst für eine bestimmte Operation bieten, wohingegen der genaue Ablauf von der übergebenen Funktion gesteuert wird.

function add(a, b) {
  return a + b;
}

// higher order function
function printCombinedNumbers(a, b, operation) {
  let combined = operation(a, b);
  console.log(combined);
}

printCombinedNumbers(2, 7, add);
// Ausgabe: 9

forEach

Mit dem Aufruf der forEach Methode kann für jedes Element eines Arrays eine Callback Methode aufgerufen werden.

const items = ["item1", "item2", "item3"];
const copyItems = [];

// for Schleife
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// for-of Schleife
for (const item of items) {
  copyItems.push(item);
}

// forEach Methode
function pushToCopy(item) {
  copyItems.push(item);
}
items.forEach(pushToCopy);

filter

Die filter() Methode wird verwendet um die Elemente eines Arrays zu filtern.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

map

Die map() Methode wird verwendet um die Elemente eines Arrays zu adaptieren.

Die Callback Methode legt fest wie bestehende Elemente zu anderen Elementen umgewandelt werden.

Die map Methode erzeugt ein neues Array. Die Anzahl der Elemente im neu instanzierten Array entspricht jener des ursprünglichen Arrays.

function double(number) {
  return number * 2;
}
const numbers = [1, 4, 9];
const doubled = numbers.map(double);

// doubled is now   [2, 8, 18]
// numbers is still [1, 4, 9]

reduce

Die reduce() Methode wird verwendet um die Elemente eines Arrays zu einem einzelnen Wert zu verdichten.

const array = [2, 4, 4, 1];

/*
 * @param accumulator: Im Akkumulator wird das Resultat aller bisherigen Aufrufe des Reducers übergeben.
 *
 * @param currentValue: Das aktuell zu verdichtende Element.
 *
 * @param index: Der Index des aktuell zu verdichtenden Elements.
 *
 * @param array: Das ursprüngliche Array auf das die reduce Methode ausgeführt wird.
 */
function reducer(accumulator, currentValue, index, array) {
  return accumulator + currentValue;
}

array.reduce(reducer);
// -> 11