Array, Set, Map
Sortierung - Iteration - Suche
Die Arrays in JavaScript können als Literal oder mit der Konstruktor Funktion erstellt werden.
Es sollte das Literal verwenden werden, da die Konstruktor Funktion etwas anders arbeitet.
let a = new Array('a','b','c','d');
let b = new Array(1, 2, 3, 4);
let c = new Array(4);
console.log(a.length === b.length); // true
console.log(a.length === c.length); // true
console.log(b.length === c.length); // true
console.log(a.toString()); // a, b, c, d
console.log(b.toString()); // 1, 2, 3, 4
console.log(c.toString()); // ,,,
a.push('e'); // a, b, c, d, e
b.push('e'); // 1, 2, 3, 4, e
c.push('e'); // ,,,,e
Es ist also besser einen Literal zu nutzen um ein Array zu erzeugen, wenn auch einzelne Zahlen benötigt werden.
let a = ['a','b','c','d']; // a, b, c, d
let b = [4]; // 4
Um Elemente am Ende eines Arrays hinzuzufügen nutzt man .push() und .pop() um sie zu entfernen.
a.push('e');
a.pop();
Um Elemente am Anfang eines Arrays hinzuzufügen nutzt man .unshift() und .shift() um sie zu entfernen.
a.unshift('0');
a.shift();
Um ein bestimmtes Element aus einem Array zu entfernen kann .slice() genutzt werden.
Die beiden Parameter sind Index basiert und definieren den zu entfernenden Bereich.
let a = ['a','b','c','d'];
let b = a.slice(1); // ['b', 'c', 'd']
let c = a.slice(1, 2); // ['b']
let d = a.slice(2, 4); // ['c', 'd']
Mit .join() wird das Array als String zurück gegeben, mit dem Parameter bestimmt man das Trennungszeichen.
Die Methode .toString() gibt ein Array als String zurück, wobei die Elemente mit Komma getrennt ausgegeben werden.
let aJoined = a.join(';') // "a;b;c;d"
let aString = a.toString() // "a,b,c,d"
Mit .map() kann man sich ein neues Array erzeugen wobei eine Funktion auf jedes Element ausgeführt wird.
let a = ['a','b','c','d'];
function capElement(s) { return s.toUpperCase(); }
let b = a.map(capElement); // ['A', 'B', 'C', 'D']
Mit .filter() kann sich auch ein neues Array erzeugen wobei eine Funktion jedes Element auf Wahrheit prüft.
let a = ['a','b','c','d'];
function selectElement(s) { return s > 'a'; }
let b = a.filter(selectElement); // ['b', 'c', 'd']
.some() prüft mit einer Funktion ob mindestens ein Element in dem Array enthalten ist.
function equalX(element, index, array) { return element === 'x'; }
let hasElement = ['a','b','x','d'].some(equalX); // true
Array.of() ist eine weitere Methode (ES6) um ein Array zu erzeugen.
let a = Array.of('a','b','c','d'); // ['a','b','c','d']
let b = Array.of(4); // [4]
Array.from() konvertiert und erzeugt ein Array, als zweiter optinaler Parameter kann eine Funktion übergeben werden.
let a = Array.from('abcd');
console.log(a.toString()); // a, b, c, d
let b = Array.from('1234');
console.log(b.toString()); // 1, 2, 3, 4
let c = Array.from(['a','b','c','d'], x => '_' + x);
console.log(c.toString()); // _a, _b, _c, _d
let d = Array.from([3, 6, 9, 12], x => x > 6);
console.log(d.toString()); // false, false, true, true
Set und Map Objekte können auch mit Array.from() konvertiert werden.
let s = new Set(['a', 'b', 3, 4]);
console.log(Array.from(s)); // ["a", "b", 3, 4]
let m = new Map([[1, 'a'], [2, 'b'], [3, 'c']]);
console.log(Array.from(m)); // [[1, 'a'], [2, 'b'], [3, 'c']]
Ein Set Objekt kann aus einem Array erstellt werden oder mit den Methoden des Objekts.
let s = new Set();
s.add('a');
console.log(s.size); // 1
s.delete('a');
console.log(s.has('a')); // false
Ein Set erlaubt keine doppelten Werte.
let s = new Set(['a', 'b', 'b', 'c', 'd', 'd', 'd']); // "a", "b", "c", "d"
So kann man sich zum Beispiel die doppelten Elemente eines Arrays entfernen.
let a = [1, 1, 1, 2, 2, 3];
let s = new Set(a);
let a1 = [...s]; // [1, 2, 3]
let a2 = Array.from(s); // [1, 2, 3]
let a3 = a.filter((ele, index, self) => {
return index == self.indexOf(ele);
}); // [1, 2, 3]
Ein Map Objekt ist Key/Value basiert verhält sich beim erstellen wie folgt.
let m = new Map([]); // {}
let m = new Map([[1, 2]]); // {1 => 2}
let m = new Map([[1, 2, 3]]); // {1 => 2}
let m = new Map([[1, 2, 3, 4]]); // {1 => 2}
let m = new Map([[1, 2], [3, 4]]); // {1 => 2, 3 => 4}
let m = new Map([[1], [3]]); // {1 => undefined, 3 => undefined}
Auch beim Map Objekt können, zum erstellen, die Methoden des Objekts genutzt werden.
let m = new Map(); // {}
m.set('8bdb35d3-73c8-4d51-ac9a-3244548dc875', {name: "Map"}); // {"8bdb35d3-73c8-4d51-ac9a-3244548dc875" => {…}}
m.get('8bdb35d3-73c8-4d51-ac9a-3244548dc875'); // {name: "Map"}
m.get('8bdb35d3-73c8-4d51-ac9a-3244548dc875').name; // "Map"
console.log(m.size); // 1
Set und Map Objekte bieten die Methode .clear() die es beim Array Objekt nicht gibt.
Die beiden Objekte stehen seit ES6 zur Verfügung.
Man kann Set Objekte als eindeutige Listen verwenden und Map Objekte als Key/Value Datenstruktur.
Sortierung
Ein Array kann man mit .sort() sortieren.
let a = ['c','a',1,'x',2.5];
a.sort() // [1, 2.5, "a", "c", "x"]
Als Standard sortiert .sort() Strings was bei Zahlen falsch sein kann.
Daher kann man eine Vergleichsfunktion mitgeben um auf- oder absteigend zu sortieren.
[100, 1, 5, 25, 10].sort() // [1, 10, 100, 25, 5]
[100, 1, 5, 25, 10].sort((a, b) => a - b) // [1, 5, 10, 25, 100]
[100, 1, 5, 25, 10].sort((a, b) => b - a) // [100, 25, 10, 5, 1]
Mit der Methode .reverse() werden die Elemente in einem Array in der Reihenfolge gedreht.
let a = ['c','a',1,'x',2.5];
a.reverse(); // [2.5, "x", 1, "a", "c"]
Ein Array mit Objekten kann man auch mit einer Vergleichsfunktion sortieren.
let a = [
{ name: "A", value: "This is A" },
{ name: "C", value: "This is C" },
{ name: "B", value: "This is B" }
];
const sortByName = (a, b) => {
const x = a.name.toLowerCase();
const y = b.name.toLowerCase();
if (x < y) {
return -1;
} else if (x > y) {
return 1;
} else {
return 0;
}
};
a.sort(sortByName);
Auch ein Set kann sortiert werden, wenn man es zu einem Array konvertiert.
let s = new Set(['c','a','b']);
Array.from(s).sort(); // ["a", "b", "c"]
[...s].sort(); // ["a", "b", "c"]
Ein Map Objekt kann nach Werten sortiert werden.
let m = new Map([[1, 3], [2, 6], [3, 1]]);
let valueOrdered = new Map([...m.entries()].sort((a, b) => a[1] - b[1])); // {3 => 1, 1 => 3, 2 => 6}
Iteration
Ein Array kann man mit der .forEach() Methode durchgehen.
a.forEach((value, key) => { console.log(key, value); });
Diese Methode steht auch bei Set und Map Objekten zur Verfügung.
s.forEach((value, key) => { console.log(key, value); });
m.forEach((value, key) => { console.log(key, value); });
Schleifen können auch genutzt werden um ein Array durchzugehen.
let a = [1, 2, 3, 3];
for (let i in a) { console.log(i); } // 0, 1, 2, 3
for (let i of a) { console.log(i); } // 1, 2, 3, 3
Die Methoden .keys() und .entries() geben jeweils Iterator Objekte zurück.
Mit dem Spread Operator kann man aus einem Iterator Objekt wieder ein Array erstellen.
let a = Array.of('a','b','c','d');
let iter = a.entries();
let b = [...iter];
console.log(iter.next().value); // [0, "a"]
console.log(iter.next().value); // [1, "b"]
console.log(iter.next().value); // [2, "c"]
console.log(iter.next().value); // [3, "d"]
console.log(iter.next().value); // undefined
console.log(b); // [[0, "a"],[1, "b"],[2, "c"],[3, "d"]]
Set und Map Objekte geben auch Iterator Objekte zurück die grundsätzlich gleich arbeiten.
Suche
Die Methoden .indexOf() und .lastIndexOf() geben den ersten oder letzten Index des gefunden Elements zurück.
Der letzte Index macht nur Sinn wenn gleiche Elemente im Array vorhanden sind.
let a = Array.of('a','b','c','d');
console.log(a.indexOf('b')); // 1
console.log(a.indexOf('e')); // -1
.findIndex() gibt den ersten Index zurück wenn die Test Funktion erfüllt ist, dagegen gibt .find() das Element zurück.
let a = Array.of('a','b','c','d');
let index = a.findIndex(x => 'b' === x); // 1
let ele = a.find(x => 'b' === x); // 'b'
Objekt anhand einer Eigenschaft innerhalb eines Arrays aus Objekten finden.
let a = [
{ name: "A", value: "This is A" },
{ name: "B", value: "This is B" }
];
let i = a.findIndex(o => o.name === 'B'); // 1
let o = a.find(o => o.name === 'B'); // { name: "B", value: "This is B" }
Das Set Objekt bietet dazu .has() als Methode an.
let s = new Set();
s.add('a');
console.log(s.has('a')); // true
Das Map Objekt bietet auch .has() sucht aber nur nach Schlüsseln.
let m = new Map();
m.set('a', 1);
console.log(m.has('a')); // true
console.log(m.has('1')); // false