Array JavaScript – JS Array Funktionen erklärt (cheatsheet)

Partager c'est aimer!

Les tableaux JavaScript peuvent être écoutés avec des structures, des données liées au speichern et un programme non inclus. Die wichtigsten JavaScript Array Funktionen erkläre ich dir hier.Les publicités

Neben den ganzen Array Standardfunktionen, wie zB push() et pop() existent auch viele nützliche Funktionen, die dir viel Zeit ersparen können. Gerade mit der Einführung von ES6 und den Arrow Functions sind noch weitere nützliche Funktionen dazu gekommen.

Grundlagen : sind JavaScript Arrays ?

JavaScript Arrays sind zu verstehen, wie Arrays in den meisten anderen bekannten Programmersprachen. Sie ermöglichen es einem, mehrere Werte in einer einzigen Variable zu speichern, dort abzufragen, zu löschen oder zu verändern.

In kaum einem Programm sind Arrays wegzudenken and auch bei der Programserung by JavaScript sind Arrays ein wichtiger Bestandteil.

Neben den Standardfunktionen, wie hinzufügen (.add()) ou löschen (.splice()) einzelner Elemente in einem Array bietet JavaScript viele nützliche Funktionen, um Operationen and mit Arrays durchzuführen.Les publicités

Wenn Du mehr zu den Grundlagen wissen willst, Kannst Du Dir diesen Artikel anschauen. Wir gehen aber direkt zu den nützlichsten Funktionen über.

1. Array.map () – Fonctions sur la carte des éléments

Bei dieser Funktion wird eine gewünschte Operation auf jedem Element im Array ausgeführt – das nennt man auch Cartographie. Dabei erhalten wir ein neues Array mit den veränderten Einträgen zurück. Dadurch enregistre avec les programmes einer Schleife und können unsere Funktion im besten Fall als Einzeiler implementieren.

Zur Anschaulichkeit haben wir ein Element mit Früchten, welches wir verändern wollen.Les publicités

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const fruitsLongerSix = fruits.map(fruit => 'Fruit: ' + fruit);

console.log(fruitsLongerSix); // Output: ["Fruit: banana", "Fruit: apple", "Fruit: avocado", "Fruit: cherry", "Fruit: grapefruit", "Fruit: melon"]

Wenn unsere Anweisung komplizierter wird, können wir den Callback auch in einer eigenen Funktion auslagern. Das würde so aussehen :

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const fruitsLongerSix = fruits.map(addPrefix);

function addPrefix(entry) {
    return 'Fruit: ' + entry;
}

console.log(fruitsLongerSix); // Output: ["Fruit: banana", "Fruit: apple", "Fruit: avocado", "Fruit: cherry", "Fruit: grapefruit", "Fruit: melon"]

Documentation

2. Array.filter () – Élément de filtre Im Array

Diese Funktion erstellt ein neues Array mit allen Elementen die den implementaierten Test bestehen. Das bedeutet, wir können unser Array filtern, ganz nach unseren Vorstellungen. Das ist eine einfache und saubere Methode um Listeneinträge zu filtern.

Wir haben hier wieder unser Array mit Früchten und benötigen nur Einträge mit einem « or » im Namen. Durch eine einzige Zeile können wir diese Funktion implementieren.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let filtered = fruits.filter(fruit => fruit.indexOf('o') > -1);

console.log(filtered); // Output: ["avocado", "melon"]

Wenn die Filterung etwas komplexer wird, können wir wieder den Callback der filter()-Funktion auch in eine extra Funktion auslagern, wie das folgende Beispiel zeigt.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let filtered = fruits.filter(getO);

function getO(entry) {
    return entry.indexOf('o') > -1;
}

console.log(filtered); // Output: ["avocado", "melon"]

Documentation

Les publicités

3. Array.forEach () – Schleife über tous les éléments du tableau

Cette fonction JavaScript Array n’est pas disponible for-Schleife erssetzen. Durch weniger Code können wir über jedes Element eines Arrays iterieren. Im Prinzip funktioniert sie wie die map()-Funktion, bis auf den Unterschied, dass hier kein neues Array erstellt wird.

So sieht ein normaler Schleifendurchlauf aus. Deutlich einfacher und übersichtlicher als eine for-Schleife, nicht wahr?

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

fruits.forEach((fruit) => {
    console.log(fruit);
});

// Output:
// banana
// apple
// avocado
// cherry
// grapefruit
// melon

Manchmal benötigen wir noch einen zusätzlichen Index, oder wie ich ihn auch gerne nenne « Compteur ». Auch das lässt sich mit dieser Funktion realisieren. Dazu geben wir eine zusätzliche Variabale index im Funktionskopf an.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

fruits.forEach((fruit, index) => {
    console.log(index, fruit);
});

// Output:
// 0 "banana"
// 1 "apple"
// 2 "avocado"
// 3 "cherry"
// 4 "grapefruit"
// 5 "melon"

Documentation

4. Array.indexOf () – Index des éléments trouvés

Die Funktion liefert uns den Index – aussi die Position – eines Elements in einem Array zurück. Damit können wir also auch prüfen, ob sich ein bestimmtes Element im Array befindet.

Wenn wir uns das Ergebnis der Funktion ausgeben lassen, bekommen wir den jeweiligen Index zurück. Ist ein Element nicht vorhanden, bekommen wir -1 zuruck.

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

console.log(fruits.indexOf('banana')); // Output: 0 (it's the first index)

console.log(fruits.indexOf('cherry')); // Output: 3

onsole.log(fruits.indexOf('toast')); // Output: -1

Weiterhin können wir mit dieser Abfrage prüfen, ob sich ein bestimmtes Element in dem Array befindet :

if (fruits.indexOf('avocado') > -1) {
    console.log('We have an avocado!');
}

Documentation

5. Array.find () – Elemente im Array taleen

Mit dieser Funktion können wir auch prüfen, ob sich ein bestimmtes Element im Array befindet. Es gibt uns immer das erste Vorkommen im Array zurück, auf die unsere Bedingung zutrifft.Les publicités

Unsere Anweisung lautet : « Gebe mir ein Element mit » ou « im Namen zurück ». Dabei bekommen wir das erste Ergebnis in unserer result Variable.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const result = fruits.find((fruit) => {
    return fruit.indexOf('o') > -1;
});

console.log(result); // Output: avocado

Auch hier doré, dass wir komplexere Anweisungen in eine extra Callback-Funktion auslagern können.

Documentation

6. Array.sort () – Werte sortieren

Cette fonction peut sortir sous JavaScript Array. Wir brauchen aussi keinen eigenen Sortier-Algorithmus programmeren.

Dazu wandelt diese Funktion die Elemente des Arrays in Strings e vergleicht Sie anhand ihrer UTF-16 Codepoints. Daher werden Strings, die mit Zahlen Beginnen auch immer pour allen String Elementen stehen.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let sortedFruits = fruits.sort();
console.log(sortedFruits);	// Output: ["apple", "avocado", "banana", "cherry", "grapefruit", "melon"]

Les publicitésZusätzlich kann auch hier ein Callback angegeben werden, wo man eine eigene Compare-Function angibt, nach der die Elemente sortiert werden sollen.

So lassen sich beispielsweise die Elemente ganz einfach in absteigender (disquefinal), statt in aufsteigender (Ascfinale) loterie. Der Rückgabewert des Callbacks muss stets 1 commander -1 séna.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let sortedFruitsDESC = fruits.sort(sortDESC);

function sortDESC(a, b) {
	return a < b ? 1 : -1;
}

console.log(sortedFruitsDESC);	// Output: ["melon", "grapefruit", "cherry", "banana", "avocado", "apple"]

Das gleiche funktioniert natürlich auch für andere Datentypen, wie Zahlen oder auch Objekte. Das kann dann so aussehen.Les publicités

let fruits = [
    {name: 'banana', amount: '2'},
    {name: 'apple', amount: '22'},
    {name: 'avocado', amount: '404'},
    {name: 'cherry', amount: '83'},
    {name: 'grapefruit', amount: '26'},
    {name: 'melon', amount: '42'}
];

let sortedFruitsByAmount = fruits.sort(sortDESC);

function sortDESC(a, b) {
	return a.amount > b.amount ? 1 : -1;
}

console.log(sortedFruitsByAmount);
// Output:
// 0: {name: "banana", amount: "2"}
// 1: {name: "apple", amount: "22"}
// 2: {name: "grapefruit", amount: "26"}
// 3: {name: "avocado", amount: "404"}
// 4: {name: "melon", amount: "42"}
// 5: {name: "cherry", amount: "83"}

Documentation

7. Array.reverse() – Tous les fichiers

Diese Funktion ist ganz schnell erklärt : Die Reihenfolge der Elemente wird einfach umgekehrt.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let reversedFruits = fruits.reverse();
console.log(reversedFruits);	// Output: ["melon", "grapefruit", "cherry", "avocado", "apple", "banana"]

Dazu gibt es keine weiteren Parameter, trotzdem wirst Du diese Funktion früher oder später benötigen. Dadurch sparst Du Dir immerhin ganze 7 Zeilen Code.

function reverse(array) {
	let reverse = [];
	for(let i = array.length - 1; i >= 0; i--) {
		reverse.push(array[i]);
	}
	return reverse;
}

Documentation

8. Array.concat () – Array zusammenhängen

Mit dieser Methode kannst Du zwei oder mehr Arrays hintereinander zusammenhängen. Das kann nützlich sein, wenn Du zB Filterfunktionen auswertest und alle Werte dann gebündelt in einem Array an den Besucher ausgibst.

let fruitsOne = [
    'banana',
    'apple',
    'avocado'
];
let fruitsTwo = [
    'cherry',
    'grapefruit',
    'melon'
];

let concatedFruits = fruitsOne.concat(fruitsTwo);

console.log(concatedFruits);	// Output: ["banana", "apple", "avocado", "cherry", "grapefruit", "melon"]

Documentation

Zusammenfassung

Wie Du siehst gibt es sehr nützliche JavaScript Array Funktionen. Viele sind mit wenigen Zeilen Code umsetzbar und liefern super tolle Ergebnisse.

Weiter geht’s mit den besten Beispielen, um Vue.js zu lernen, oder ? 😉

Laisser un commentaire

15 − 7 =