├── .gitignore ├── LICENSE ├── README.md ├── app.js ├── index.html ├── package.json └── snippets ├── accumulate.js ├── all.js ├── allEqual.js ├── arrayToCSV.js ├── arrayToHtmlList.js ├── average.js ├── averageBy.js ├── bottomVisible.js ├── bubbleSort.js ├── bucketSort.js ├── byteSize.js ├── capitalize.js ├── capitalizeEveryWord.js ├── castArray.js ├── compact.js ├── containsWhitespace.js ├── countOccurrences.js ├── currentURL.js ├── dayOfYear.js ├── decapitalize.js ├── deepFlatten.js ├── difference.js ├── differenceBy.js ├── digitize.js ├── drop.js ├── dropRight.js ├── dropRightWhile.js ├── dropWhile.js ├── elementContains.js ├── everyNth.js ├── filterNonUnique.js ├── findKey.js ├── forEachRight.js ├── forOwn.js ├── formToObject.js ├── getBaseURL.js ├── getDaysBetweenDates.js ├── getStyle.js ├── getTimeFromDate.js ├── getType.js ├── getURLParameters.js ├── hasClass.js ├── hasDuplicates.js ├── hashBrowser.js ├── hide.js ├── httpsRedirect.js ├── indexOfAll.js ├── indexOn.js ├── innerHeight.js ├── innerWidth.js ├── insertAfter.js ├── insertBefore.js ├── is.js ├── isAbsoluteURL.js ├── isAfterDate.js ├── isAlpha.js ├── isAlphaNumeric.js ├── isAnagram.js ├── isBeforeDate.js ├── isBrowser.js ├── isBrowserTabFocused.js ├── isDateValid.js ├── isEmailValid.js ├── isLowerCase.js ├── isSameDate.js ├── isSorted.js ├── isUpperCase.js ├── isValidJSON.js ├── join.js ├── maxDate.js ├── maxN.js ├── mergeSort.js ├── minDate.js ├── minN.js ├── pad.js ├── parseCookie.js ├── quickSort.js ├── randomAlphaNumeric.js ├── randomBoolean.js ├── randomHexColorCode.js ├── randomIntArrayInRange.js ├── randomIntegerInRange.js ├── randomItemFromArray.js ├── randomNumberFromArray.js ├── randomNumberFromArrayN.js ├── randomNumberInRange.js ├── redirect.js ├── reverse.js ├── round.js ├── runPromisesInSeries.js ├── selectionSort.js ├── serializeCookie.js ├── serializeForm.js ├── setStyle.js ├── shuffle.js ├── sum.js ├── sumBy.js ├── toHash.js ├── uniqueElements.js └── without.js /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | package-lock.json 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present Mario Laurich 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 100+ JavaScript Snippets 2 | 3 | Top 100+ JavaScript Snippets für Anfänger. Hiermit möchte ich dir über 100 JavaScript Snippets an die Hand geben um dir das Programmieren als Anfänger zu erleichtern. Viele dieser Snippets werden das ein oder andere Problem lösen. Zu jedem gibt es eine kleine Beschreibung und über Beispiele wird dir die Anwendung erläutert. Happy Coding! 4 | 5 | [![Tutorial bei Youtube](http://img.youtube.com/vi/QCoxMzk8CMU/0.jpg)](https://youtu.be/QCoxMzk8CMU) 6 | 7 | ## 📺 Playlists 8 | 9 | [Webentwicklung für Anfänger](https://www.youtube.com/playlist?list=PLnqycjkeRGqmrzCAVKOc4RPhFWFMVpZ6x) 10 | 11 | [CSS Tutorials Deutsch](https://www.youtube.com/playlist?list=PLnqycjkeRGqmNb4zay7i46-57KgnO_xcD) 12 | 13 | [JavaScript Tutorials Deutsch](https://www.youtube.com/playlist?list=PLnqycjkeRGqlyZLCc63qMIdkYZhQ9M-Ij) 14 | 15 | [Visual Studio Code Tutorials](https://www.youtube.com/playlist?list=PLnqycjkeRGqmlJvXkxqSvIynlxaiKecPN) 16 | 17 | [Frameworks, Libraries und Tools](https://www.youtube.com/playlist?list=PLnqycjkeRGqnqag9WBK1THbdwsf2E-6cV) 18 | 19 | [Programmieren: Tipps, Ideen, Gedanken und Meinungen](https://www.youtube.com/playlist?list=PLnqycjkeRGqmxW1HaS897rvCapowxbtYH) 20 | 21 | ## Vernetze dich: 22 | 23 | [programmierenmitmario.de][website] 24 | [programmierenmitmario | YouTube][youtube] 25 | [programmierenmitmario | Twitter][twitter] 26 | [programmierenmitmario | Instagram][instagram] 27 |
28 |
29 | 30 | ## License 31 | 32 | [MIT](LICENSE) 33 | 34 | [website]: http://programmierenmitmario.de 35 | [twitter]: https://twitter.com/programmierenm 36 | [youtube]: https://youtube.com/programmierenmitmario 37 | [instagram]: https://instagram.com/programmierenm 38 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | import { accumulate } from "./snippets/accumulate.js"; 2 | 3 | let sums = accumulate(1, 2, 3, 4); 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-snippet-collection", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "Programmieren mit Mario", 11 | "license": "MIT" 12 | } 13 | -------------------------------------------------------------------------------- /snippets/accumulate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erstellt ein Array von Teilsummen. 3 | */ 4 | 5 | export const accumulate = (...nums) => 6 | nums.reduce((acc, n) => [...acc, n + +acc.slice(-1)], []); 7 | 8 | /* 9 | Beispiele: 10 | accumulate(1, 2, 3, 4); // [1, 3, 6, 10] 11 | accumulate(...[1, 2, 3, 4]); // [1, 3, 6, 10] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/all.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt true zurück, wenn die Funktion für alle Elemente in einem Array true zurückgibt, andernfalls false. Du kannst das zweite Argument fn weglassen, wenn du Boolean als Standardwert verwenden möchtest. 3 | */ 4 | 5 | export const all = (array, fn = Boolean) => array.every(fn); 6 | 7 | /* 8 | Beispiele: 9 | all([4, 2, 3], (x) => x > 1); // true 10 | all([1, 2, 3]); // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/allEqual.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet prüft, ob alle Elemente des Arrays gleich sind. 3 | */ 4 | 5 | export const allEqual = (array) => array.every((value) => value === array[0]); 6 | 7 | /* 8 | Beispiele: 9 | allEqual([1, 2, 3, 4, 5, 6]); // false 10 | allEqual([1, 1, 1, 1]); // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/arrayToCSV.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet wandelt die Elemente ohne Kommas oder doppelte Anführungszeichen in Zeichenfolgen mit durch Kommas getrennten Werten um. 3 | */ 4 | 5 | export const arrayToCSV = (array, delimiter = ",") => 6 | array.map((v) => v.map((x) => `"${x}"`).join(delimiter)).join("\n"); 7 | 8 | /* 9 | Beispiele: 10 | arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"' 11 | arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"' 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/arrayToHtmlList.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet wandelt die Elemente eines Arrays in
  • -Tags um und hängt sie an eine HTML-Liste welche die angegebene ID besitzt. 3 | */ 4 | 5 | export const arrayToHtmlList = (array, listID) => 6 | ((element) => ( 7 | (element = document.querySelector("#" + listID)), 8 | (element.innerHTML += array.map((item) => `
  • ${item}
    • `).join("")) 9 | ))(); 10 | 11 | /* 12 | Beispiele: 13 | arrayToHtmlList(["Eis", "Senf", "Quark"], "myListID"); 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/average.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt den Durchschnitt von zwei oder mehreren numerischen Werten zurück. 3 | */ 4 | 5 | export const average = (...nums) => 6 | nums.reduce((acc, val) => acc + val, 0) / nums.length; 7 | 8 | /* 9 | Beispiele: 10 | average(...[1, 2, 3, 4]); // 2.5 11 | average(1, 2, 3); // 2 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/averageBy.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt den Durchschnitt eines Arrays zurück, nachdem zunächst die Zuordnung jedes Elements zu einem Wert mithilfe einer bestimmten Funktion vorgenommen wurde. Somit können Werte verwendet werden welche Bestandteil eines Objektes sind und sich in einem Array befinden. 3 | */ 4 | 5 | export const averageBy = (array, fn) => 6 | array 7 | .map(typeof fn === "function" ? fn : (value) => value[fn]) 8 | .reduce((acc, value) => acc + value, 0) / array.length; 9 | 10 | /* 11 | Beispiele: 12 | averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], (o) => o.n); // 5 13 | averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], "n"); // 5 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/bottomVisible.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet prüft, ob das Ende einer Seite sichtbar ist. 3 | */ 4 | 5 | export const bottomVisible = () => 6 | document.documentElement.clientHeight + window.scrollY >= 7 | (document.documentElement.scrollHeight || 8 | document.documentElement.clientHeight); 9 | 10 | /* 11 | Beispiele: 12 | bottomVisible(); // true 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/bubbleSort.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sortiert ein Array von Zahlen mit dem Bubblesort-Algorithmus. 3 | */ 4 | 5 | export const bubbleSort = (array) => { 6 | let swapped = false; 7 | const a = [...array]; 8 | for (let i = 1; i < a.length; i++) { 9 | swapped = false; 10 | for (let j = 0; j < a.length - i; j++) { 11 | if (a[j + 1] < a[j]) { 12 | [a[j], a[j + 1]] = [a[j + 1], a[j]]; 13 | swapped = true; 14 | } 15 | } 16 | if (!swapped) return a; 17 | } 18 | return a; 19 | }; 20 | 21 | /* 22 | Beispiele: 23 | bubbleSort([2, 1, 4, 3]); // [1, 2, 3, 4] 24 | */ 25 | -------------------------------------------------------------------------------- /snippets/bucketSort.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sortiert ein Array von Zahlen mit dem Bucketsort-Algorithmus. 3 | */ 4 | 5 | export const bucketSort = (array, size = 5) => { 6 | const min = Math.min(...array); 7 | const max = Math.max(...array); 8 | const buckets = Array.from( 9 | { length: Math.floor((max - min) / size) + 1 }, 10 | () => [] 11 | ); 12 | array.forEach((val) => { 13 | buckets[Math.floor((val - min) / size)].push(val); 14 | }); 15 | return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], []); 16 | }; 17 | 18 | /* 19 | Beispiele: 20 | bucketSort([6, 3, 4, 1]); // [1, 3, 4, 6] 21 | */ 22 | -------------------------------------------------------------------------------- /snippets/byteSize.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt die Länge eines Strings in Bytes zurück. 3 | */ 4 | 5 | export const byteSize = (str) => new Blob([str]).size; 6 | 7 | /* 8 | Beispiele: 9 | byteSize('😀'); // 4 10 | byteSize('Hallo Welt'); // 10 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/capitalize.js: -------------------------------------------------------------------------------- 1 | /* 2 | In diesem Snippet wird der erste Buchstabe einer Zeichenfolge groß geschrieben. 3 | */ 4 | 5 | export const capitalize = ([first, ...rest]) => 6 | first.toUpperCase() + rest.join(""); 7 | 8 | /* 9 | Beispiele: 10 | capitalize('fooBar'); // 'FooBar' 11 | capitalize('fooBar', true); // 'FooBar' 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/capitalizeEveryWord.js: -------------------------------------------------------------------------------- 1 | /* 2 | In diesem Snippet wird der erste Buchstabe jedes Wortes in einer bestimmten Zeichenfolge groß geschrieben. 3 | */ 4 | 5 | export const capitalizeEveryWord = (str) => 6 | str.replace(/\b[a-z]/g, (char) => char.toUpperCase()); 7 | 8 | /* 9 | Beispiele: 10 | capitalizeEveryWord('hallo welt!'); // 'Hallo Welt!' 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/castArray.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet wandelt einen Nicht-Array-Wert in ein Array um. 3 | */ 4 | 5 | export const castArray = (value) => (Array.isArray(value) ? value : [value]); 6 | 7 | /* 8 | Beispiele: 9 | castArray('foo'); // ['foo'] 10 | castArray([1]); // [1] 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/compact.js: -------------------------------------------------------------------------------- 1 | /* 2 | Entfernt falsche Werte aus einem Array. 3 | */ 4 | 5 | export const compact = (array) => array.filter(Boolean); 6 | 7 | /* 8 | Beispiele: 9 | compact([0, 1, false, 2, '', 3, 'Max', NaN, 34]); // [ 1, 2, 3, 'Max', 34 ] 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/containsWhitespace.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob die angegebene Zeichenfolge Leerzeichen enthält. 3 | */ 4 | 5 | export const containsWhitespace = (str) => /\s/.test(str); 6 | 7 | /* 8 | Beispiele: 9 | containsWhitespace('lorem'); // false 10 | containsWhitespace('lorem ipsum'); // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/countOccurrences.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet zählt die Vorkommen eines Werts in einem Array. 3 | */ 4 | 5 | export const countOccurrences = (array, value) => 6 | array.reduce((a, v) => (v === value ? a + 1 : a), 0); 7 | 8 | /* 9 | Beispiele: 10 | countOccurrences([1, 1, 2, 1, 2, 1, 3], 1); // 4 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/currentURL.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt die aktuelle URL zurück. 3 | */ 4 | 5 | export const currentURL = () => window.location.href; 6 | 7 | /* 8 | Beispiele: 9 | currentURL(); // 'http://localhost' 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/dayOfYear.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet ruft den Tag des Jahres von einem Date-Objekt ab. 3 | */ 4 | 5 | export const dayOfYear = (date) => 6 | Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); 7 | 8 | /* 9 | Beispiele: 10 | dayOfYear(new Date()); // 283 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/decapitalize.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet wandelt den ersten Buchstaben einer Zeichenfolge in einen Kleinbuchstaben um. 3 | */ 4 | 5 | export const decapitalize = ([first, ...rest]) => 6 | first.toLowerCase() + rest.join(""); 7 | 8 | /* 9 | Beispiele: 10 | decapitalize("Hallo"); // 'hallo' 11 | decapitalize("EisDiele"); // 'eisDiele' 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/deepFlatten.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet verflacht ein Array rekursiv. 3 | */ 4 | 5 | export const deepFlatten = (array) => 6 | [].concat(...array.map((v) => (Array.isArray(v) ? deepFlatten(v) : v))); 7 | 8 | /* 9 | Beispiele: 10 | deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5] 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/difference.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet findet den Unterschied zwischen zwei Arrays. Es werden die Werte des ersten Arrays zurückgegeben welche im Vergleich zum zweiten Array unterschiedlich sind 3 | */ 4 | 5 | export const difference = (a, b) => { 6 | const s = new Set(b); 7 | return a.filter((x) => !s.has(x)); 8 | }; 9 | 10 | /* 11 | Beispiele: 12 | difference([1, 2, 3, 4], [1, 2, 3, 5]); // [4] 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/differenceBy.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt die Differenz zwischen zwei Arrays zurück, nachdem eine bestimmte Funktion auf jedes Element beider Listen angewendet wurde. 3 | */ 4 | 5 | export const differenceBy = (a, b, fn) => { 6 | const s = new Set(b.map(fn)); 7 | return a.filter((x) => !s.has(fn(x))); 8 | }; 9 | 10 | /* 11 | Beispiele: 12 | differenceBy([{ x: 1 }, { x: 2 }], [{ x: 1 }, { x: 3 }, { x: 4 }], (v) => v.x); // [ { x: 2 } ] 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/digitize.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet erhält eine Zahl als Eingabe und gibt ein Array seiner Ziffern zurück. 3 | */ 4 | 5 | export const digitize = (n) => [...`${n}`].map((i) => parseInt(i)); 6 | 7 | /* 8 | Beispiele: 9 | digitize(151); // [1, 5, 1] 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/drop.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt ein neues Array zurück, bei dem n Elemente von der linken Seite entfernt wurden. 3 | */ 4 | 5 | export const drop = (array, n = 1) => array.slice(n); 6 | 7 | /* 8 | Beispiele: 9 | drop([1, 2, 3, 4]); // [2,3,4] 10 | drop([1, 2, 3, 4], 2); // [3,4] 11 | drop([1, 2, 3, 4], 35); // [] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/dropRight.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt ein neues Array zurück, bei dem n Elemente von der rechten Seite entfernt wurden. 3 | */ 4 | 5 | export const dropRight = (array, n = 1) => array.slice(0, -n); 6 | 7 | /* 8 | Beispiele: 9 | drop([1, 2, 3, 4]); // [1,2,3] 10 | drop([1, 2, 3, 4], 2); // [1,2] 11 | drop([1, 2, 3, 4], 35); // [] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/dropRightWhile.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet entfernt Elemente von der rechten Seite eines Arrays, bis die übergebene Funktion true zurückgibt. 3 | */ 4 | 5 | export const dropRightWhile = (array, func) => { 6 | while (array.length > 0 && !func(array[array.length - 1])) 7 | array = array.slice(0, -1); 8 | return array; 9 | }; 10 | 11 | /* 12 | Beispiele: 13 | dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2] 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/dropWhile.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet entfernt Elemente aus einem Array, wenn die übergebene Funktion true zurückgibt. 3 | */ 4 | 5 | export const dropWhile = (array, func) => { 6 | while (array.length > 0 && !func(array[0])) array = array.slice(1); 7 | return array; 8 | }; 9 | 10 | /* 11 | Beispiele: 12 | dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4] 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/elementContains.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet prüft, ob das übergeordnete Element das untergeordnete Element enthält. 3 | */ 4 | 5 | export const elementContains = (parent, child) => 6 | parent !== child && parent.contains(child); 7 | 8 | /* 9 | Beispiele: 10 | elementContains( 11 | document.querySelector("body"), 12 | document.querySelector("#sidebar") 13 | ); // true 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/everyNth.js: -------------------------------------------------------------------------------- 1 | /* 2 | Gibt jedes n-te Element in einem Array zurück. 3 | */ 4 | 5 | export const everyNth = (array, nth) => 6 | array.filter((e, i) => i % nth === nth - 1); 7 | 8 | /* 9 | Beispiele: 10 | everyNth([1, 2, 3, 4, 5, 6], 2); // [ 2, 4, 6 ] 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/filterNonUnique.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet entfernt doppelte Werte in einem Array. 3 | */ 4 | 5 | export const filterNonUnique = (array) => [...new Set(array)]; 6 | 7 | /* 8 | filterNonUnique([1, 2, 2, 3, 4, 4, 5, 6]); // [1, 2, 3, 4, 5, 6] 9 | */ 10 | -------------------------------------------------------------------------------- /snippets/findKey.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt den ersten Schlüssel zurück, welcher die übergebene Funktion erfüllt. 3 | */ 4 | 5 | export const findKey = (obj, fn) => 6 | Object.keys(obj).find((key) => fn(obj[key], key, obj)); 7 | 8 | /* 9 | findKey( 10 | { 11 | max: { age: 25, active: true }, 12 | tina: { age: 28, active: false }, 13 | oliver: { age: 5, active: true } 14 | }, 15 | o => o['active'] 16 | ); // 'max' 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/forEachRight.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet führt für jedes Element eines Arrays eine Funktion aus, beginnend mit dem letzten Element des Arrays. 3 | */ 4 | 5 | export const forEachRight = (array, callback) => 6 | array.slice(0).reverse().forEach(callback); 7 | 8 | /* 9 | Beispiele: 10 | forEachRight([1, 2, 3, 4], value => console.log(value)); // '4', '3', '2', '1' 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/forOwn.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet durchläuft jede Eigenschaft eines Objektes und führt die übergebene Funktion aus. 3 | */ 4 | 5 | export const forOwn = (obj, fn) => 6 | Object.keys(obj).forEach((key) => fn(obj[key], key, obj)); 7 | 8 | /* 9 | Beispiele: 10 | forOwn({ name: 'Max', alter: 19 }, value => console.log(value)); // 'Max', 19 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/formToObject.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erstellt aus allen Werten eines Formulars ein Objekt mit key value pairs 3 | */ 4 | 5 | export const formToObject = (form) => 6 | Array.from(new FormData(form)).reduce( 7 | (acc, [key, value]) => ({ 8 | ...acc, 9 | [key]: value, 10 | }), 11 | {} 12 | ); 13 | 14 | /* 15 | Beispiele: 16 | formToObject(document.querySelector('#form')); // { email: 'test@email.de', name: 'Max Mustermann' } 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/getBaseURL.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um die URL ohne GET Parameter zu ermitteln. 3 | */ 4 | 5 | export const getBaseURL = (url) => url.replace(/[?#].*$/, ""); 6 | 7 | /* 8 | Beispiele: 9 | getBaseURL('http://url.de/page?name=Max&alter=24'); // 'http://url.de/page' 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/getDaysBetweenDates.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um die Differenz in Tagen zwischen zwei Datumsangaben zu ermitteln. 3 | */ 4 | 5 | export const getDaysDiffBetweenDates = (dateInitial, dateFinal) => 6 | (dateFinal - dateInitial) / (1000 * 3600 * 24); 7 | 8 | /* 9 | Beispiele: 10 | getDaysDiffBetweenDates(new Date('2021-11-04'), new Date('2021-11-08')); // 4 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/getStyle.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um den Wert einer CSS-Regel für ein bestimmtes Element abzurufen. 3 | */ 4 | 5 | export const getStyle = (element, ruleName) => 6 | getComputedStyle(element)[ruleName]; 7 | 8 | /* 9 | getStyle(document.querySelector('p'), 'font-size'); // '1rem' 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/getTimeFromDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um die Uhrzeit von einem Dateobject als String zu erhalten. 3 | */ 4 | 5 | export const getTimeFromDate = (date) => date.toTimeString().slice(0, 8); 6 | 7 | /* 8 | Beispiele: 9 | getTimeFromDate(new Date()); // "10:34:00" 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/getType.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um den Typ eines Werts zu ermittlen. 3 | */ 4 | 5 | export const getType = (v) => 6 | v === undefined 7 | ? "undefined" 8 | : v === null 9 | ? "null" 10 | : v.constructor.name.toLowerCase(); 11 | 12 | /* 13 | Beispiele: 14 | getType([1, 2, 3]); // 'array' 15 | */ 16 | -------------------------------------------------------------------------------- /snippets/getURLParameters.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um alle GET Parameter einer URL als Objekt zurückzugeben. 3 | */ 4 | 5 | export const getURLParameters = (url) => 6 | (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( 7 | (a, v) => ( 8 | (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a 9 | ), 10 | {} 11 | ); 12 | 13 | /* 14 | Beispiele: 15 | getURLParameters('google.de'); // {} 16 | getURLParameters('http://url.de/page?name=Max&alter=24'); // {name: 'Max', alter: 24} 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/hasClass.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet prüft, ob ein Element eine bestimmte Klasse hat. 3 | */ 4 | 5 | export const hasClass = (element, className) => 6 | element.classList.contains(className); 7 | 8 | /* 9 | Beispiele: 10 | hasClass(document.querySelector('p'), 'highlight'); // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/hasDuplicates.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob in einem flachen Array doppelte Werte vorhanden sind. 3 | */ 4 | 5 | export const hasDuplicates = (array) => new Set(array).size !== array.length; 6 | 7 | /* 8 | Beispiele: 9 | hasDuplicates([0, 1, 1, 2]); // true 10 | hasDuplicates([0, 1, 2, 3]); // false 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/hashBrowser.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erstellt einen Hash für einen Wert mit dem SHA-256-Algorithmus. Gibt ein Promise zurück. 3 | */ 4 | 5 | export const hashBrowser = (val) => 6 | crypto.subtle 7 | .digest("SHA-256", new TextEncoder("utf-8").encode(val)) 8 | .then((h) => { 9 | let hexes = [], 10 | view = new DataView(h); 11 | for (let i = 0; i < view.byteLength; i += 4) 12 | hexes.push(("00000000" + view.getUint32(i).toString(16)).slice(-8)); 13 | return hexes.join(""); 14 | }); 15 | 16 | /* 17 | Beispiele: 18 | hashBrowser( 19 | JSON.stringify({ name: 'max', alter: 27, hobbies: ['Eis essen', 'Bücher lesen'] }) 20 | ).then(console.log); 21 | // c8328ed985182fc9a1b342154aa9c97089a2a93513d4dd250c3596f8cdd8c2b9 22 | */ 23 | -------------------------------------------------------------------------------- /snippets/hide.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet können alle angegebenen Elemente ausgeblendet werden. 3 | */ 4 | 5 | export const hide = (...el) => 6 | [...el].forEach((e) => (e.style.display = "none")); 7 | 8 | /* 9 | Beispiele: 10 | hide(document.querySelectorAll('img')); 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/httpsRedirect.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um in einer bestimmten Domain von HTTP auf HTTPS umzuleiten. 3 | */ 4 | 5 | export const httpsRedirect = () => { 6 | if (location.protocol !== "https:") 7 | location.replace("https://" + location.href.split("//")[1]); 8 | }; 9 | 10 | /* 11 | Beispiele: 12 | httpsRedirect(); // Wenn die URL z.B. http://meinedomain.de ist, dann wird auf https://meinedomain.de weitergeleitet 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/indexOfAll.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um alle Indexes eines Werts in einem Array zu erhalten, und ein leeres Array zurückgibt, falls dieser Wert nicht darin enthalten ist. 3 | */ 4 | 5 | export const indexOfAll = (array, value) => 6 | array.reduce((acc, el, i) => (el === value ? [...acc, i] : acc), []); 7 | 8 | /* 9 | Beispiele: 10 | indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3] 11 | indexOfAll([1, 2, 3], 4); // [] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/indexOn.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erstellt ein Objekt aus einem Array, verwendet den angegebenen Schlüssel und schließt ihn aus jedem Wert aus. 3 | */ 4 | 5 | export const indexOn = (array, key) => 6 | array.reduce((obj, v) => { 7 | const { [key]: id, ...data } = v; 8 | obj[id] = data; 9 | return obj; 10 | }, {}); 11 | 12 | /* 13 | Beispiele: 14 | indexOn([ 15 | { id: 1, name: 'Max' }, 16 | { id: 2, name: 'Bob' } 17 | ], 'id'); 18 | // { '1': { name: 'Max' }, '2': { name: 'Bob' } } 19 | */ 20 | -------------------------------------------------------------------------------- /snippets/innerHeight.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt die aktuelle innere Höhe des Browsers zurück. 3 | */ 4 | 5 | export const innerHeight = () => 6 | window.innerHeight || 7 | document.documentElement.clientHeight || 8 | document.body.clientHeight; 9 | 10 | /* 11 | Beispiele: 12 | innerHeight(); // 671 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/innerWidth.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet gibt die aktuelle innere Breite des Browsers zurück. 3 | */ 4 | 5 | export const innerWidth = () => 6 | window.innerWidth || 7 | document.documentElement.clientWidth || 8 | document.body.clientWidth; 9 | 10 | /* 11 | Beispiele: 12 | innerWidth(); // 1280 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/insertAfter.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um einen HTML-String nach dem Ende eines bestimmten Elements einzufügen. 3 | */ 4 | 5 | export const insertAfter = (element, htmlString) => 6 | element.insertAdjacentHTML("afterend", htmlString); 7 | 8 | /* 9 | Beispiele: 10 | insertAfter(document.getElementById("myId"), "

    lorem ipsum

    "); 11 | //

    lorem ipsum

    12 | */ 13 | -------------------------------------------------------------------------------- /snippets/insertBefore.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um einen HTML-String vor einem bestimmten Element einzufügen. 3 | */ 4 | 5 | export const insertBefore = (element, htmlString) => 6 | element.insertAdjacentHTML("beforebegin", htmlString); 7 | 8 | /* 9 | Beispiele: 10 | insertBefore(document.getElementById('myId'), '

    lorem ipsum

    '); 11 | //

    lorem ipsum

    12 | */ 13 | -------------------------------------------------------------------------------- /snippets/is.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um zu überprüfen, ob ein Wert von einem bestimmten Typ ist. 3 | */ 4 | 5 | export const is = (type, val) => 6 | ![, null].includes(val) && val.constructor === type; 7 | 8 | /* 9 | Beispiele: 10 | is(Array, [1]); // true 11 | is(RegExp, /./g); // true 12 | is(String, ''); // true 13 | is(String, 12); // false 14 | is(Number, 1); // true 15 | is(Boolean, true); // true 16 | */ 17 | -------------------------------------------------------------------------------- /snippets/isAbsoluteURL.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob die angegebene Zeichenfolge eine absolute URL ist. 3 | */ 4 | 5 | export const isAbsoluteURL = (str) => /^[a-z][a-z0-9+.-]*:/.test(str); 6 | 7 | /* 8 | Beispiele: 9 | isAbsoluteURL('https://google.de'); // true 10 | isAbsoluteURL('http://www.meinedomain.de'); // true 11 | isAbsoluteURL('/hallo/welt'); // false 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/isAfterDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet kann überprüft werden, ob ein Datum nach einem anderen Datum liegt. 3 | */ 4 | 5 | export const isAfterDate = (dateA, dateB) => dateA > dateB; 6 | 7 | /* 8 | Beispiele: 9 | isAfterDate(new Date(2015, 10, 21), new Date(2010, 10, 23)); // true 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/isAlpha.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob eine Zeichenfolge nur Buchstaben enthält. 3 | */ 4 | 5 | export const isAlpha = (str) => /^[a-zA-Z]*$/.test(str); 6 | 7 | /* 8 | Beispiele: 9 | isAlpha('BeispielAugabe'); // true 10 | isAlpha('Das wird nix'); // false (Leerzeichen sind keine Buchstaben) 11 | isAlpha('123'); // false 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/isAlphaNumeric.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob eine Zeichenfolge nur alphanumerische Zeichen enthält. 3 | */ 4 | 5 | export const isAlphaNumeric = (str) => /^[a-z0-9]+$/gi.test(str); 6 | 7 | /* 8 | Beispiele: 9 | isAlphaNumeric('Hallo123'); // true 10 | isAlphaNumeric('123'); // true 11 | isAlphaNumeric('Hello 123'); // false (Leerzeichen sind sind Alphanumerisch) 12 | isAlphaNumeric('#%$hallo'); // false 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/isAnagram.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet kann überprüft werden, ob ein bestimmter String ein Anagramm von einem anderen String ist. 3 | */ 4 | 5 | export const isAnagram = (str1, str2) => { 6 | const normalize = (str) => 7 | str 8 | .toLowerCase() 9 | .replace(/[^a-z0-9]/gi, "") 10 | .split("") 11 | .sort() 12 | .join(""); 13 | return normalize(str1) === normalize(str2); 14 | }; 15 | 16 | /* 17 | Beispiele: 18 | isAnagram('Ampel', 'Palme'); // true 19 | */ 20 | -------------------------------------------------------------------------------- /snippets/isBeforeDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet kann überprüft werden, ob ein Datum vor einem anderen Datum liegt. 3 | */ 4 | 5 | export const isBeforeDate = (dateA, dateB) => dateA < dateB; 6 | 7 | /* 8 | Beispiele: 9 | isBeforeDate(new Date(2010, 10, 21), new Date(2015, 11, 10)); // true 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/isBrowser.js: -------------------------------------------------------------------------------- 1 | /* 2 | Anhand dieses Snippets kann festgestellt werden, ob es sich bei der aktuellen Laufzeitumgebung um einen Browser handelt. Dies ist hilfreich, um Fehler beim ausführen von Frontend-Modulen auf dem Server (Node.js) zu vermeiden. 3 | */ 4 | 5 | export const isBrowser = () => 6 | ![typeof window, typeof document].includes("undefined"); 7 | 8 | /* 9 | Beispiele: 10 | isBrowser(); // true (browser) 11 | isBrowser(); // false (Node) 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/isBrowserTabFocused.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um festzustellen, ob der Browser-Tab fokussiert ist. 3 | */ 4 | 5 | export const isBrowserTabFocused = () => !document.hidden; 6 | 7 | /* 8 | Beispiele: 9 | isBrowserTabFocused(); // true 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/isDateValid.js: -------------------------------------------------------------------------------- 1 | /* 2 | Überprüft, ob aus den angegebenen Werten ein gültiges Datumsobjekt erstellt werden kann. 3 | */ 4 | 5 | export const isDateValid = (...val) => 6 | !Number.isNaN(new Date(...val).valueOf()); 7 | 8 | /* 9 | Beispiele: 10 | isDateValid('October 21, 2015 09:24:00'); // true 11 | isDateValid('2015-10-21T09:24:00'); // true 12 | isDateValid('2015-10-21 T09:24:00'); // false 13 | isDateValid('Quark'); // false 14 | isDateValid(2015, 10, 21); // true 15 | isDateValid(2015, 10, 21, 'Quark'); // false 16 | isDateValid({}); // false 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/isEmailValid.js: -------------------------------------------------------------------------------- 1 | /* 2 | Prüft ob die angegebene Zeichenkette eine Email ist. 3 | */ 4 | 5 | export const isEmailValid = (email) => 6 | /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email); 7 | 8 | /* 9 | Beispiele: 10 | isEmailValid(test@email.de) // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/isLowerCase.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um festzustellen, ob eine Zeichenfolge klein geschrieben ist. 3 | */ 4 | 5 | export const isLowerCase = (str) => str === str.toLowerCase(); 6 | 7 | /* 8 | Beispiele: 9 | isLowerCase('abc'); // true 10 | isLowerCase('a3@$'); // true 11 | isLowerCase('Max'); // false 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/isSameDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet kann überprüft werden, ob zwei Datumsangaben gleich sind. 3 | */ 4 | 5 | export const isSameDate = (dateA, dateB) => 6 | dateA.toISOString() === dateB.toISOString(); 7 | 8 | /* 9 | Beispiele: 10 | isSameDate(new Date(2015, 10, 20), new Date(2015, 10, 20)); // true 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/isSorted.js: -------------------------------------------------------------------------------- 1 | /* 2 | Prüft, ob ein numerisches Array sortiert ist. 3 | */ 4 | 5 | export const isSorted = (array) => { 6 | if (array.length <= 1) return 0; 7 | const direction = array[1] - array[0]; 8 | for (let i = 2; i < array.length; i++) { 9 | if ((array[i] - array[i - 1]) * direction < 0) return 0; 10 | } 11 | return Math.sign(direction); 12 | }; 13 | 14 | /* 15 | Beispiele: 16 | isSorted([0, 1, 2, 3]); // 1 17 | isSorted([4, 3, 2]); // -1 18 | isSorted([4, 3, 5]); // 0 19 | isSorted([4]); // 0 20 | */ 21 | -------------------------------------------------------------------------------- /snippets/isUpperCase.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um zu überprüfen, ob ein String in Großbuchstaben geschrieben ist. 3 | */ 4 | 5 | export const isUpperCase = (str) => str === str.toUpperCase(); 6 | 7 | /* 8 | Beispiele: 9 | isUpperCase('ABC'); // true 10 | isLowerCase('A3@$'); // true 11 | isLowerCase('mAx'); // false 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/isValidJSON.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mit diesem Snippet kann überprüft werden, ob eine Zeichenfolge ein gültiges JSON ist. 3 | */ 4 | 5 | export const isValidJSON = (str) => { 6 | try { 7 | JSON.parse(str); 8 | return true; 9 | } catch (e) { 10 | return false; 11 | } 12 | }; 13 | 14 | /* 15 | Beispiele: 16 | isValidJSON('{"name":"Max","age":20}'); // true 17 | isValidJSON('{"name":"Max",age:"20"}'); // false 18 | */ 19 | -------------------------------------------------------------------------------- /snippets/join.js: -------------------------------------------------------------------------------- 1 | /* 2 | Verbindet alle Elemente eines Arrays zu einem String und gibt diesen String zurück. Verwendet ein Trennzeichen und ein Endtrennzeichen. 3 | */ 4 | 5 | export const join = (array, separator = ", ", end = separator) => 6 | array.reduce( 7 | (acc, val, i) => 8 | i === array.length - 2 9 | ? acc + val + end 10 | : i === array.length - 1 11 | ? acc + val 12 | : acc + val + separator, 13 | "" 14 | ); 15 | 16 | /* 17 | Beispiele: 18 | join(['Apfel', 'Birne', 'Banane', 'Erdbeere'],', ',' & '); // 'Apfel, Birne, Banane & Erdbeere' 19 | join(['Apfel', 'Birne', 'Banane', 'Erdbeere'], ', '); // 'Apfel, Birne, Banane, Erdbeere' 20 | join(['Apfel', 'Birne', 'Banane', 'Erdbeere']); // 'Apfel, Birne, Banane, Erdbeere' 21 | */ 22 | -------------------------------------------------------------------------------- /snippets/maxDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um das neueste Datum zu erhalten. 3 | */ 4 | 5 | export const maxDate = (...dates) => new Date(Math.max.apply(null, ...dates)); 6 | 7 | /* 8 | Beispiele: 9 | const array = [ 10 | new Date("2017-04-13"), 11 | new Date("2018-02-12"), 12 | new Date("2016-01-10"), 13 | new Date("2016-01-09") 14 | ]; 15 | maxDate(array); // 2018-02-12T00:00:00.000Z 16 | */ 17 | -------------------------------------------------------------------------------- /snippets/maxN.js: -------------------------------------------------------------------------------- 1 | /* 2 | Gibt die n maximalen Elemente aus dem bereitgestellten Array zurück. 3 | */ 4 | 5 | export const maxN = (array, n = 1) => 6 | [...array].sort((a, b) => b - a).slice(0, n); 7 | 8 | /* 9 | Beispiele: 10 | maxN([1, 2, 3, 4]); // [4] 11 | maxN([1, 2, 3, 4], 2); // [4, 3] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/mergeSort.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sortiert ein Array von Zahlen mit dem Mergesort-Algorithmus. 3 | */ 4 | 5 | export const mergeSort = (array) => { 6 | if (array.length < 2) return array; 7 | const mid = Math.floor(array.length / 2); 8 | const l = mergeSort(array.slice(0, mid)); 9 | const r = mergeSort(array.slice(mid, array.length)); 10 | return Array.from({ length: l.length + r.length }, () => { 11 | if (!l.length) return r.shift(); 12 | else if (!r.length) return l.shift(); 13 | else return l[0] > r[0] ? r.shift() : l.shift(); 14 | }); 15 | }; 16 | 17 | /* 18 | Beispiele: 19 | mergeSort([5, 1, 4, 2, 3]); // [1, 2, 3, 4, 5] 20 | */ 21 | -------------------------------------------------------------------------------- /snippets/minDate.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | */ 4 | 5 | export const minDate = (...dates) => new Date(Math.min.apply(null, ...dates)); 6 | 7 | /* 8 | Beispiele: 9 | const array = [ 10 | new Date("2017-04-13"), 11 | new Date("2018-02-12"), 12 | new Date("2016-01-10"), 13 | new Date("2016-01-09") 14 | ]; 15 | minDate(array); // 2016-01-09T00:00:00.000Z 16 | */ 17 | -------------------------------------------------------------------------------- /snippets/minN.js: -------------------------------------------------------------------------------- 1 | /* 2 | Gibt die n minimalen Elemente aus dem bereitgestellten Array zurück. 3 | */ 4 | 5 | export const minN = (array, n = 1) => 6 | [...array].sort((a, b) => a - b).slice(0, n); 7 | 8 | /* 9 | Beispiele: 10 | minN([1, 2, 3, 4]); // [1] 11 | minN([1, 2, 3, 4], 2); // [1, 2] 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/pad.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Zeichenfolge auf beiden Seiten mit einem angegebenen Zeichen aufzufüllen, wenn sie kürzer als die angegebene Länge ist. 3 | */ 4 | 5 | export const pad = (str, length, char = " ") => 6 | str.padStart((str.length + length) / 2, char).padEnd(length, char); 7 | 8 | /* 9 | Beispiele: 10 | pad('bob', 8); // ' bob ' 11 | pad(String(42), 6, '0'); // '004200' 12 | pad('oliver', 3); // 'oliver' 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/parseCookie.js: -------------------------------------------------------------------------------- 1 | /* 2 | Analysiert eine HTTP-Cookie-Header-Zeichenfolge und gibt ein Objekt mit allen Key-Value-Pairs zurück. 3 | */ 4 | 5 | export const parseCookie = (str) => 6 | str 7 | .split(";") 8 | .map((v) => v.split("=")) 9 | .reduce((acc, v) => { 10 | acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim()); 11 | return acc; 12 | }, {}); 13 | 14 | /* 15 | Beispiele: 16 | parseCookie('car=opel; speed=220%20km%2Fh');// { car: 'opel', speed: '220 km/h' } 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/quickSort.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sortiert ein Array von Zahlen mit dem Quicksort-Algorithmus. 3 | */ 4 | 5 | export const quickSort = (array) => { 6 | const a = [...array]; 7 | if (a.length < 2) return a; 8 | const pivotIndex = Math.floor(array.length / 2); 9 | const pivot = a[pivotIndex]; 10 | const [lo, hi] = a.reduce( 11 | (acc, val, i) => { 12 | if (val < pivot || (val === pivot && i != pivotIndex)) { 13 | acc[0].push(val); 14 | } else if (val > pivot) { 15 | acc[1].push(val); 16 | } 17 | return acc; 18 | }, 19 | [[], []] 20 | ); 21 | return [...quickSort(lo), pivot, ...quickSort(hi)]; 22 | }; 23 | 24 | /* 25 | Beispiele: 26 | quickSort([1, 6, 1, 5, 3, 2, 1, 4]); // [1, 1, 1, 2, 3, 4, 5, 6] 27 | */ 28 | -------------------------------------------------------------------------------- /snippets/randomAlphaNumeric.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erzeugt eine zufällige Zeichenfolge mit der angegebenen Länge. 3 | */ 4 | 5 | export const randomAlphaNumeric = (length) => { 6 | let s = ""; 7 | Array.from({ length }).some(() => { 8 | s += Math.random().toString(36).slice(2); 9 | return s.length >= length; 10 | }); 11 | return s.slice(0, length); 12 | }; 13 | 14 | /* 15 | Beispiele: 16 | randomAlphaNumeric(5); // '5ukep' 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/randomBoolean.js: -------------------------------------------------------------------------------- 1 | /* 2 | Erzeugt zufällig true oder false. 3 | */ 4 | 5 | export const randomBoolean = () => Math.random() >= 0.5; 6 | 7 | /* 8 | Beispiele: 9 | randomBoolean(); // true 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/randomHexColorCode.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um einen zufälligen hexadezimalen Farbcode zu generieren. 3 | */ 4 | 5 | export const randomHexColorCode = () => { 6 | let n = (Math.random() * 0xfffff * 1000000).toString(16); 7 | return "#" + n.slice(0, 6); 8 | }; 9 | 10 | /* 11 | Beispiele: 12 | randomHexColorCode(); // "#ed549e" 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/randomIntArrayInRange.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um ein Array mit n zufälligen ganzen Zahlen in einem angegebenen Bereich zu generieren. 3 | */ 4 | 5 | export const randomIntArrayInRange = (min, max, n = 1) => 6 | Array.from( 7 | { length: n }, 8 | () => Math.floor(Math.random() * (max - min + 1)) + min 9 | ); 10 | 11 | /* 12 | Beispiele: 13 | randomIntArrayInRange(10, 45, 10); // [ 28, 15, 12, 44, 29, 32, 40, 23, 22, 11 ] 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/randomIntegerInRange.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine zufällige ganze Zahl in einem bestimmten Bereich zu generieren. 3 | */ 4 | 5 | export const randomIntegerInRange = (min, max) => 6 | Math.floor(Math.random() * (max - min + 1)) + min; 7 | 8 | /* 9 | Beispiele: 10 | randomIntegerInRange(1, 10); // 7 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/randomItemFromArray.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um ein zufälliges Item aus einem Array zurückzugeben. 3 | */ 4 | 5 | export const randomItemFromArray = (array) => 6 | array[Math.floor(Math.random() * array.length)]; 7 | 8 | /* 9 | Beispiele: 10 | randomItemFromArray([10, "Max", "15", 3, "Hallo Welt"]) // "Max" 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/randomNumberFromArray.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Zufallszahl aus einem Array zu erhalten. 3 | */ 4 | 5 | export const randomNumberFromArray = (arr) => 6 | arr[Math.floor(Math.random() * arr.length)]; 7 | 8 | /* 9 | Beispiele: 10 | randomNumberFromArray([3, 7, 9, 11]); // 9 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/randomNumberFromArrayN.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um mehrere Zufallszahlen aus einem Array zu erhalten. 3 | */ 4 | 5 | export const randomNumberFromArrayN = ([...arr], n = 1) => { 6 | let m = arr.length; 7 | while (m) { 8 | const i = Math.floor(Math.random() * m--); 9 | [arr[m], arr[i]] = [arr[i], arr[m]]; 10 | } 11 | return arr.slice(0, n); 12 | }; 13 | 14 | /* 15 | Beispiele: 16 | randomNumberFromArrayN([1, 2, 3], 2); // [3,1] 17 | randomNumberFromArrayN([1, 2, 3], 4); // [2,3,1] 18 | */ 19 | -------------------------------------------------------------------------------- /snippets/randomNumberInRange.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Zufallszahl in einem bestimmten Bereich zurückzugeben. 3 | */ 4 | 5 | export const randomNumberInRange = (min, max) => 6 | Math.random() * (max - min) + min; 7 | 8 | /* 9 | randomNumberInRange(1, 10); // 2.756429634902913 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/redirect.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Weiterleitung zu einer angegebenen URL durchzuführen. 3 | */ 4 | 5 | export const redirect = (url, asLink = true) => 6 | asLink ? (window.location.href = url) : window.location.replace(url); 7 | 8 | /* 9 | Beispiele: 10 | redirect('https://google.com'); 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/reverse.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Zeichenfolge umzukehren. 3 | */ 4 | 5 | export const reverseString = (str) => [...str].reverse().join(""); 6 | 7 | /* 8 | Beispiele: 9 | reverseString('max'); // 'xam' 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/round.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Zahl auf eine bestimmte Anzahl von Stellen zu runden. 3 | */ 4 | 5 | export const round = (n, decimals = 0) => 6 | Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`); 7 | 8 | /* 9 | Beispiele: 10 | round(1.005, 2); // 1.01 11 | round(1.255, 1); // 1.3 12 | */ 13 | -------------------------------------------------------------------------------- /snippets/runPromisesInSeries.js: -------------------------------------------------------------------------------- 1 | /* 2 | Dieses Snippet kann verwendet werden, um eine Reihe von Promises in Serie auszuführen. 3 | */ 4 | 5 | export const runPromisesInSeries = (ps) => 6 | ps.reduce((p, next) => p.then(next), Promise.resolve()); 7 | 8 | /* 9 | Beispiele: 10 | const delay = d => new Promise(r => setTimeout(r, d)); 11 | runPromisesInSeries([() => delay(1000), () => delay(2000)]); 12 | // Führt jedes Promise nacheinander aus und dauert insgesamt 3 Sekunden. 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/selectionSort.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sortiert ein Array von Zahlen mithilfe des Selectionsort-Algorithmus. 3 | */ 4 | 5 | export const selectionSort = (array) => { 6 | const a = [...array]; 7 | for (let i = 0; i < a.length; i++) { 8 | const min = a 9 | .slice(i + 1) 10 | .reduce((acc, val, j) => (val < a[acc] ? j + i + 1 : acc), i); 11 | if (min !== i) [a[i], a[min]] = [a[min], a[i]]; 12 | } 13 | return a; 14 | }; 15 | 16 | /* 17 | Beispiele: 18 | selectionSort([5, 1, 4, 2, 3]); // [1, 2, 3, 4, 5] 19 | */ 20 | -------------------------------------------------------------------------------- /snippets/serializeCookie.js: -------------------------------------------------------------------------------- 1 | /* 2 | Serialisiert ein Wertepaar in eine HTTP-Cookie-Header-Zeichenfolge. 3 | */ 4 | 5 | export const serializeCookie = (name, val) => 6 | `${encodeURIComponent(name)}=${encodeURIComponent(val)}`; 7 | 8 | /* 9 | Beispiele: 10 | serializeCookie('car', 'opel'); // 'car=opel' 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/serializeForm.js: -------------------------------------------------------------------------------- 1 | /* 2 | Codiert alle Werte eines Formulars zu eine URL-codierte Zeichenkette, welche als GET Parameter dienen können. 3 | */ 4 | 5 | export const serializeForm = (form) => 6 | Array.from(new FormData(form), (field) => 7 | field.map(encodeURIComponent).join("=") 8 | ).join("&"); 9 | 10 | /* 11 | Beispiele: 12 | serializeForm(document.querySelector('#form')); // email=test%40email.de&name=Max%20Mustermann 13 | */ 14 | -------------------------------------------------------------------------------- /snippets/setStyle.js: -------------------------------------------------------------------------------- 1 | /* 2 | Legt den Wert einer CSS-Eigenschaft für das angegebene HTML-Element fest. 3 | */ 4 | 5 | export const setStyle = (element, rule, value) => (element.style[rule] = value); 6 | 7 | /* 8 | Beispiele: 9 | setStyle(document.querySelector('p'), 'font-size', '16px'); 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/shuffle.js: -------------------------------------------------------------------------------- 1 | /* 2 | Verändert die Reihenfolge der Werte eines Arrays in zufälliger Reihenfolge und gibt ein neues Array zurück. 3 | */ 4 | 5 | export const shuffle = ([...array]) => { 6 | let m = array.length; 7 | while (m) { 8 | const i = Math.floor(Math.random() * m--); 9 | [array[m], array[i]] = [array[i], array[m]]; 10 | } 11 | return array; 12 | }; 13 | 14 | /* 15 | Beispiele: 16 | shuffle([1, 2, 3]); // [2, 3, 1] 17 | */ 18 | -------------------------------------------------------------------------------- /snippets/sum.js: -------------------------------------------------------------------------------- 1 | /* 2 | Berechnet die Summe von zwei oder mehr Zahlen, auch welche die sich in einem Array befinden. 3 | */ 4 | 5 | export const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0); 6 | 7 | /* 8 | Beispiele: 9 | sum(1, 2, 3, 4); // 10 10 | sum(...[1, 2, 3, 4]); // 10 11 | */ 12 | -------------------------------------------------------------------------------- /snippets/sumBy.js: -------------------------------------------------------------------------------- 1 | /* 2 | Berechnet die Summe eines Arrays, nachdem jedes Element mithilfe der bereitgestellten Funktion einem Wert zugeordnet wurde. 3 | */ 4 | 5 | export const sumBy = (array, fn) => 6 | array 7 | .map(typeof fn === "function" ? fn : (val) => val[fn]) 8 | .reduce((acc, val) => acc + val, 0); 9 | 10 | /* 11 | Beispiele: 12 | sumBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], x => x.n); // 20 13 | sumBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 20 14 | */ 15 | -------------------------------------------------------------------------------- /snippets/toHash.js: -------------------------------------------------------------------------------- 1 | /* 2 | Reduziert ein gegebenes Array in einen Wert-Hash (Keyed Data Store). 3 | */ 4 | 5 | export const toHash = (object, key) => 6 | Array.prototype.reduce.call( 7 | object, 8 | (acc, data, index) => ((acc[!key ? index : data[key]] = data), acc), 9 | {} 10 | ); 11 | 12 | /* 13 | Beispiel: 14 | toHash([4, 3, 2, 1]); // { 0: 4, 1: 3, 2: 2, 3: 1 } 15 | 16 | Komplexes Beispiel: 17 | let users = [ 18 | { id: 1, name: 'Max' }, 19 | { id: 2, name: 'Tina' }, 20 | { id: 3, name: 'Bob' }, 21 | ]; 22 | let managers = [ 23 | { id: 1, name: 'Mario', employees: [2, 3] } 24 | ]; 25 | 26 | // Wir verwenden hier toHash, weil wir eine bindbare Referenz erzeugen wollen 27 | managers.forEach( 28 | manager => 29 | (manager.employees = manager.employees.map(function(id) { 30 | return this[id]; 31 | }, toHash(users, 'id'))) 32 | ); 33 | 34 | managers; // [{ id: 1, name: 'Mario', employees: [{id: 2, name: 'Tina'}, {id: 3, name: 'Bob'} ]}] 35 | */ 36 | -------------------------------------------------------------------------------- /snippets/uniqueElements.js: -------------------------------------------------------------------------------- 1 | /* 2 | Findet alle eindeutigen Werte in einem Array. 3 | */ 4 | 5 | export const uniqueElements = (array) => [...new Set(array)]; 6 | 7 | /* 8 | Beispiele: 9 | uniqueElements([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5] 10 | */ 11 | -------------------------------------------------------------------------------- /snippets/without.js: -------------------------------------------------------------------------------- 1 | /* 2 | Filtert die Elemente eines Arrays heraus, die einen der angegebenen Werte aufweisen. 3 | */ 4 | 5 | export const without = (array, ...args) => 6 | array.filter((v) => !args.includes(v)); 7 | 8 | /* 9 | Beispiele: 10 | without([2, 1, 2, 3], 1, 2); // [3] 11 | */ 12 | --------------------------------------------------------------------------------