Methoden sind Funktionen, die in einem Objekt deklariert wurden. JavaScript hat viele nützliche built-in-Methoden, u.a. in den folgenden Bereichen: Strings, Arrays, Objects, Math, Date. Folgend werden einige von ihnen zusammengefasst.
Hier sind einige wichtige String-Methoden aufgeführt
Die concat() Methode
vereint den Text von einem oder mehreren
Strings und gibt einen neuen String zurück.
Sie ist ebenfalls eine Array-Methode.
Syntax:
str.concat(string2[, string3, ...,]);
Zum Beispiel:
var hello = 'Hello, ';
console.log(hello.concat('Kevin', ' have a nice day.'));
=> Dies erzeugt die Ausgabe /* Hello, Kevin have a nice day. */
Die includes()-Methode gibt an, ob ein String innerhalb eines anderen
Strings gefunden wird und gibt dabei "true" oder "false" wieder. Bei der
includes()-Methode muss auf Groß- und Kleinschreibung geachtet werden.
Sie ist ebenfalls eine Array-Methode.
Syntax:
str.includes(suchWert[, abWelchemIndexWirdGesucht]);
Zum Beispiel:
'Blue Whale'.includes('blue');
=> Dies erzeugt die Ausgabe /* false */
Um Primitive Types zu finden.
Die indexOf() Methode gibt den Index der Zeichenkette innerhalb des
aufrufenden String Objekts des ersten Vorkommnis des angegebenen
Wertes beginnend bei fromIndex zurück. Gibt -1 zurück, wenn der Wert
nicht gefunden wurde.
Sie sind ebenfalls Array-Methoden.
Syntax:
str.indexOf(Suchwert[, vonWelchemIndexaus]);
Zum Beispiel:
var anyString = 'Brave new world';
anyString.indexOf('w')
=> Dies erzeugt die Ausgabe "8".
anyString.lastIndexOf('w')
=> Dies erzeugt die Ausgabe "10".
Vorkommnisse prüfen
Zu beachten ist, dass '0' nicht zu true und '-1' nicht zu false
ausgewertet wird. Deswegen ist der korrekte Weg zum Überprüfen, ob ein
String in einem anderen String existiert, der folgende:
'Blue Whale'.indexOf('Blue') != -1; // true
'Blue Whale'.indexOf('Bloe') != -1; // false
Wenn wir wissen wollen, ob ein Element im Array ist:
Statt: console.log(numbers.indexOf(1) !== -1)
Besser: console.log(numbers.includes(1));
=> Result: true
Tipp: Wir suchen Zahl 1 und beginnen die Suche bei Index 2:
console.log(numbers.indexOf(1,2))
Die replace()-Methode gibt einen neuen String zurück, in dem einige
oder alle Übereinstimmungen mit einem Muster durch einen Ersatz
ausgetauscht wurden.
Syntax:
str.replace(Ausdruck/Value Type der ersetzt wird durch,
"neuesWort"oder:"Funktion");
Zum Beispiel:
var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
print(newstr);
=> Dies erzeugt die Ausgabe "oranges are round, and oranges are
juicy."
Die slice() Methode extrahiert einen Teilbereich eines Strings und
gibt einen neuen String zurück.
Syntax:
str.slice(AnfangIndex[, EndIndex]);
Zum Beispiel:
var str1 = 'The morning is upon us.', // the length of str1 is 23.
str4 = str1.slice(12);
console.log(str4);
=> Dies erzeugt die Ausgabe "is upon us.""
Benutzen von slice() mit negativen Indexen
Das folgende Beispiel benutzt slice() mit negativen Indexen.
var str =
'The morning is upon us.';
str.slice(-3);
// returns 'us.'
Hier sind einige wichtige Array-Methoden aufgeführt
Die every()-Methode testet, ob alle Elemente in einem Array einen Test
bestehen, welcher mittels einer implementierten Funktion
bereitgestellt wird.
Rückgabewert "true", wenn die
callback-Funktion einen "truthy"-Wert für jedes Array-Element
zurückgibt, andernfalls ist der Rückgabewert "false".
Syntax:
arr.every(callback[, thisArg]);
callback= Funktion, welche jedes Element testet, mit
drei Argumenten:
- currentValue= Der aktuelle Wert des Arrays.
- index(optional)= Der Index des aktuellen Elementes im Array.
- array(optional)= Das Array auf welchem every aufgerufen wurde.
thisArg (optional)= Wert, welcher als this in der
callback Funktion benutzt wird.
Zum Beispiel:
const numbers =[1,2,3]
const allPositive= numbers.every(function(value){
return value >=0;
});
console.log(allPositive)
=> Result: true
Hingegen:
const numbers =[1,-1,2,3]
console.log(allPositive)
=> Result: false
Die filter()-Methode erstellt einen neuen Array mit allen Elementen,
die den von der bereitgestellten Funktion implementierten Test
bestehen.
Syntax:
let newArray = arr.filter(callback(element[, index[, array]])[,
thisArg])
callback= Funktion, welche jedes Element testet, mit
drei Argumenten:
- element= Das aktuell zu testende Element aus dem Array.
- index(optional)= Der Index des aktuell zu testenden Elements aus dem
Array.
- array(optional)= Das Array, auf welchem filter() aufgerufen wurde.
thisArg (optional)= Wert, welcher als this in der
callback-Funktion benutzt wird.
Zum Beispiel:
const numbers = [1, -1, 2,3]
//const filtered= numbers.filter(n => n >=0);
//console.log(filtered)
=> Result: [1,2,3]
Um Reference Types zu finden.
Die Methode find(), gibt den Wert des Elements eines Arrays zurück,
welcher als erstes die Bedingung einer bereitgestellten Testfunktion
erfüllt. Andernfalls wird 'undefined' zurückgegeben.
Wenn die Position eines Elements ermittelt oder auch geschaut werden soll,
ob ein Element in einem Array vorhanden ist, besser indexOf() oder
includes() verwenden.
Syntax:
arr.find(callback[, thisArg])
callback= Funktion welche auf jedes Element
angewendet wird, mit drei Argumenten:
- element= Das aktuelle Element, das im Array verarbeitet wird.
- index(optional)= Der Index des aktuellen Elements im Array.
- array(optional)= Das Array, welches mit find() durlaufen wird.
thisArg (optional)= Wert, welcher als this verwendet
wird, wenn callback ausgeführt wird.
Zum Beispiel:
const courses = [
{id: 1, name: "a"},
{id: 2, name: "b"}
];
const course = courses.find(function(course){
return course.name ==="a";
});
console.log(course);
=> Result: true
Beispiel mit findIndex():
const course = courses.findIndex(function(course){
return course.name ==="a";
});
console.log(course);
=> Result: 0
Die forEach()-Methode führt eine übergebene Funktion für jedes Element
eines Arrays aus.
Syntax:
arr.forEach(function callback(currentValue [, index [, array]]) { //
Gewählter Iterator }[, thisArg]);
callback= Funktion, die auf jedes Element angewendet
wird mit drei Argumenten:
- currentValue= Der Wert des aktuellen Elements im Array.
- index(optional)= Der Index des aktuellen Elements im Array.
- array(optional)= Das Array, welches mit forEach() durlaufen wird.
thisArg (optional)= Wert, welcher als this in der
callback Funktion benutzt wird.
Beispiele, um einen Array zu iterieren:
Option 1:
const numbers =[1,2,3];
for (let number of numbers)
console.log(number);
Option 2:
numbers.forEach(function(number){
console.log(number);
});
Option 2: (In ARROW-FUNCTION SYNTAX)
numbers.forEach(number =>
console.log(number));
mit Index:
numbers.forEach((number,index) =>
console.log(index, number));
Umwandeln eines Arrays in einen String.
Die join()-Methode verkettet alle Elemente eines Arrays (oder
Array-ähnlicher Objekte), durch Kommata getrennt,
in einem String und gibt diesen zurück. Enthält das Array
nur ein Element, wird nur dieses ohne Trennzeichen zurückgegeben.
Nützlich, wenn ein url-slug(whitespace are replaced with "-") gebildet
wird.
Syntax:
arr.join([separator]);
separator (optional)=
Gibt einen String an, um jedes Paar benachbarter Elemente des Arrays
voneinander zu trennen. Das Trennzeichen wird bei Bedarf in einen
String umgewandelt. Wenn nicht angegeben, werden die Array-Elemente
durch ein Komma (",") getrennt. Wenn Separator ein leerer String ist,
werden alle Elemente ohne Trennzeichen miteinander verbunden.
Beispiel:
const numbers =[1,2,3]
const joined= numbers.join(","); //(Seperator)
console.log(joined);
=> Result: "1,2,3"
Anderes Beispiel:
const message = "This is my first message";
const parts= message.
split(" ");
const combined = parts.join ("-");
console.log(combined);
=> Result: "This-is-my-first-message"
Die map() (engl. abbilden) -Methode wendet auf jedes Element des Arrays
die bereitgestellte Funktion an und gibt das Ergebnis in einem neuen
Array zurück.
Syntax:
var new_array = arr.map(function callback(currentValue[, index[,
array]]) { // Zurückgegebenes Element für new_array }[, thisArg])
callback= Funktion, die ein Element für das neue
Array erstellt und drei Argumente entgegennimmt:
- currentValue= Das aktuelle Element, das im Array verarbeitet
wird.
- index(optional)= Der Index des aktuellen Elements, das im Array
verarbeitet wird.
- array(optional)= Das Array, welches mit map() durchlaufen wird.
thisArg (optional)= Wert, welcher als this in der
callback Funktion benutzt wird.
Beispiele, um einen Array zu mappen:
PRIMITIVE TYPES MAPPEN:
const numbers = [1, -1, 2,3]
const filtered= numbers.filter(n => n >=0);
const items = filtered.map(n => <li> + n+ </li>);
console.log(items)
=> Result:
['<li>1</li>','<li>2</li>','<li>3</li>']
0: "<li>1</li>"
1: "<li>2</li>"
2: "<li>3</li>"
const html = '<ul> + items.join('') + </ul>'
console.log(html)
=> Result:
<li>1</li> <li>2</li> <li>3</li>
OBJEKTE MAPPEN:
const items = filtered.map(n => ({value: n}));
console.log(items)
=> Result:
0: {value: 1}
1: {value: 2}
2: {value: 3}
REFACTORING //CHAINING:
const numbers = [1, -1, 2,3]
const items = numbers
.filter(n => n >=0)
.map(n => ({value: n}))
.filter(obj => obj.value >1)
.map(obj => obj.value);
console.log(items)
Die pop()-Methode entfernt das letzte Element eines Arrays und gibt
dieses zurück. Diese Methode ändert die Länge des Arrays. Der
Rückgabewert ist das entfernte Element aus dem Array. Rückgabewert 'undefined', wenn
das Array leer ist.
Syntax:
arr.pop()
Elemente von einem Array entfernen:
const numbers= [1,2,3,4];
Vom Ende löschen:
const last =numbers.pop()
console.log(numbers)
=> Result: [1,2,3]
console.log(last)
=> Result: 4
Vom Anfang löschen:
const first = numbers.shift();
console.log(numbers)
=> Result: [2,3]
console.log(first)
=> Result: 1
Aus der Mitte löschen:
numbers.splice(2, 1); //bedeutet: (Start from index, how many
deletions)
console.log(numbers)
=> Result: [1,2,4]
Die push()-Methode fügt ein oder mehr Elemente am Ende eines Arrays
hinzu und gibt die neue Länge des Arrays zurück.
Syntax:
arr.push(element1 [, ... [, elementN]])
elementN= Die Elemente, die am Ende des Arrays
eingefügt werden.
Einem Array Elemente hinzufügen:
const numbers = [3, 4];
Am Ende hinzufügen:
numbers.push(5,6);
console.log(numbers)
=> Result: [3,4,5,6]
Am Anfang hinzufügen:
numbers.unshift(1,2);
console.log(numbers)
=> Result: [1,2,3,4,5,6]
In die Mitte einfügen:
numbers.splice(2, 0, 'a', 'b') //bedeutet: (Wo(index)?, Wieviele
löschen?, Was einsetzen?)
console.log(numbers)
=> Result: [1,2,"a","b",3,4,5,6]
Die reduce()-Methode reduziert ein Array auf einen einzigen Wert,
indem es jeweils zwei Elemente (von links nach rechts) durch eine
gegebene Funktion reduziert.
Syntax:
arr.reduce(callback[, initialValue])
callback= Funktion, welche auf jeden Wert im Array
angewandet wird und vier Argumente hat:
- accumulator= Der kumulierte Wert ist der Rückgabewert von callback.
Es werden der zuvor zurückgegebene Wert des letzten Aufrufes von callback
oder der 'initialValue' verwendet.
- currentValue= Das aktuell zu verarbeitende Element des Arrays.
- currentIndex(optional)= Der Index des aktuellen Elements des Arrays.
Beginnt mit dem Index 0, falls initialValue angegeben wurde, ansonsten
mit Index 1.
- array(optional)= Das Array, auf dem reduce() abgerufen wird.
initialValue (optional)= Der Wert des ersten
Arguments, der bei dem ersten Aufruf in callback zu benutzt wird. Wenn
kein Initialwert angegeben wird, wird das erste Element des Arrays
benutzt. Das Aufrufen von reduce() auf einem leeren Array ohne
Initialwerts führt zu einem Fehler.
Beispiele, um einen Array zu reducen:
const numbers = [1, -1, 2, 3]; (In der Summe wären es 5.)
Folgender Ablauf:
a = 0, c=1 ==> a = 1
a= 1, c = -1 ==> a = 0
a= 0, c= 2 ==> a = 2
a =2, c= 3 ==> a = 5
/////Gekürzte Version:
a =1, c= -1 ==> a=0
a= 0, c= 2 ==> a =2
a= 2, c=3 ==> a=5
const sum = numbers.reduce((accumulator, currentValue) =>
accumulator + currentValue
);
Also: const sum = numbers.reduce((0,1) => 0 + 1);
Alternativ:
let sum = 0
for (let n of numbers)
sum +=n;
console.log(sum);
Die reverse() Methode kehrt die Reihenfolge der Arrayelemente in-place
um. Das erste Element wird zum letzen und das letzte wird zum ersten Element.
Syntax:
arr.reverse()
Beispiel:
var a = [1, 2, 3];
console.log(a) // [1, 2, 3]
a.reverse();
console.log(a) // [3, 2, 1]
Die slice() Methode schreibt eine "flat copy" von einem Teil des
Arrays in ein neues Array-Objekt von 'begin' bis 'end'. Das originale Array wird nicht verändert.
Syntax:
arr.slice([begin[, end]])
begin (optional)=
Null-basierter Index, an welcher die Extraktion beginnt. Bei einem
negativen Index kennzeichnet 'begin' einen Versatz vom Ende der Sequenz.
slice(-2) extrahiert die letzten zwei Elemente der Sequenz. Wenn 'begin'
nicht definiert ist, beginnt slice bei Index 0. Wenn 'begin' größer als die
Länge der Sequenz ist, wird ein leeres Array zurückgegeben.
end (optional)=
Null-basierter Index, bevor die Extraktion endet. Slice() extrahiert bis
zu, aber nicht inklusive 'end'. Slice(1,4) extrahiert vom zweiten bis
zum vierten Element (Elemente sind indexiert als 1, 2 und 3). Bei
einem negativen Index kennzeichnet 'end' einen Versatz vom Ende der
Sequenz. Slice(2, -1) extrahiert vom dritten bis zum vorletzten
Element der Sequenz. Wenn 'end' weggelassen wird, extrahiert slice
bis zum Ende der Sequenz (arr.length). Wenn 'end' größer als die Länge
der Sequenz ist, extrahiert slice bis zum Ende der Sequenz
(arr.length).
Beispiele, um einen Array zu kombinieren und zu slicen:
MIT PRIMITIVE TYPES:
const first = [1,2,3];
const second = [4,5,6];
const combined = first.concat(second);
const slice = combined.slice(2,4) (Index Start& End)
console.log(combined) //Result [1,2,3,4,5,6]
console.log(slice) //Result [3,4]
MIT REFERENCE TYPES:
const first = [{ id: 1}];
const second =[4,5,6];
const combined = first.concat(second)
first[0].id = 10
=> Result(4) [{...},4,5,6]
0: {id: 10} // die Referenz wird kopiert
1:4
2:5
3:6
length:4
Slice nutzen, um einen neuen Start zu generieren:
const sliceStart = combined.slice(2)
=> Result [3,4,5,6]
Slice nutzen, um den gesamten Array zu kopieren:
const sliceStart = combined.slice()
=> Result [1,2,3,4,5,6]
Die Methode some() überprüft, ob mindestens ein Element des Arrays den
als Funktion übergebenen Kriterien entspricht. Der Rückgabewert ist
'true', wenn die callback Methode ein positives ("truthy") Ergebnis für
eines der Elemente im Array ermittelt hat; Andernfalls ist der Rückgabewert: "false".
Syntax:
arr.some(callback[, thisArg]);
callback= Funktion, die jedes Element überprüft, nimmt
drei Argumente entgegen:
- currentValue= Das aktuell zu verarbeitende Element des Arrays.
- index(optional)= Der Index des aktuell zu verarbeitenden Elementes
im Array.
- array(optional)= Die Arrayinstanz auf welcher die some()-Methode
aufgerufen wurde.
thisArg (optional)= Wert, welcher als this in der
callback Funktion benutzt wird.
Zum Beispiel:
const numbers =[1,2,3]
const atLeastOnePositive= numbers.some(function(value){
return value >=0;
console.log(atLeastOnePositive);
});
=> Result: true
Die sort()-Methode sortiert die Elemente eines Arrays in-place (keine
Kopie!) und gibt das Array zurück. Standardmäßig werden alle Elemente
in Strings umgewandelt und dann anhand ihrer UTF-16 Codepoints
miteinander verglichen.
Syntax:
arr.sort([compareFunction])
compareFunction(optional)= Gibt eine Funktion an, die die
Sortierreihenfolge definiert. Wenn nicht angegeben, wird das Array
nach dem Unicode (en-US)-Codepoint jedes Zeichens entsprechend der
Stringumwandlung jedes Elements sortiert.
firstEl= Das erste Element zum Vergleich.
secondEl= Das zweite Element zum Vergleich.
Ein Beispiel mit Primitive Types:
const numbers =[2,3,1]
numbers.sort();
console.log(numbers)
=> Result: [1,2,3]
numbers.reverse();
console.log(numbers)
=> Result: [3,2,1]
Ein Beispiel mit Reference Types:
Weil das nicht automatisch mit Objekten funktioniert, müssen wir noch
etwas hinzufügen.
(Wir wollen die Objekte nach Namen sortieren. Achtung: die Suche ist
case-sensitive):
const courses= [
{id: 1, name: "node"},
{id: 2, name: "javascript"},
];
courses.sort(function(a, b) {
const nameA = a.name.toUpperCase();
const nameB = b.name.toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
console.log(courses)
Die splice()-Methode ändert den Inhalt eines Arrays durch das
Entfernen vorhandener Elemente und/oder Hinzufügen neuer Elemente.
Syntax:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start= Index, ab welchem das Array geändert werden
soll. deleteCount(optional)= Gibt die Anzahl der zu
entfernenden alten Array Elemente an. Wenn deleteCount 0 oder negativ
ist, werden keine Elemente entfernt. In diesem Fall sollte man
mindestens ein neues Element als weiteren Parameter übergeben, da das
Array sonst nicht geändert wird.
item1, item2, ...(optional)= Die Elemente, die dem
Array ab dem Indexstart hinzugefügt werden sollen. Falls keine
Elemente angegeben werden, entfernt splice() lediglich Elemente des
Arrays.
Hinzufügen/Entfernen von Elementen eines Arrays:
AM ENDE DES ARRAYS
Am Ende hinzufügen:
numbers.push(5,6);
Vom Ende löschen:
const last =numbers.pop()
AM ANFANG DES ARRAYS
Am Anfang hinzufügen:
numbers.unshift(1,2);
Vom Anfang löschen:
const first = numbers.shift();
IN DER MITTE DES ARRAYS
In die Mitte einfügen:
let numbers = [1,2,3,4,5,6] numbers.splice(2, 0, 'a', 'b') //bedeutet:
(Wo(index)?, Wieviele löschen?, Was einsetzen?)
console.log(numbers)
=> Result: [1,2,"a","b",3,4,5,6]
Aus der Mitte löschen:
let numbers = [1,2,3,4] numbers.splice(2, 1); //bedeutet: (Start from
index, how many deletions)
console.log(numbers)
=> Result: [1,2,4]