Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können

Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können

DOM-Verarbeitung

Das DOM bietet eine strukturierte Darstellung für ein Dokument und definiert, wie über Skripte auf die Dokumentstruktur zugegriffen werden kann. Der Zweck besteht eigentlich darin, eine Spezifikation zu erstellen, die es JS ermöglicht, HTML-Elemente zu bedienen. Der DOM besteht aus Knoten.

Überprüfen, ob ein Element fokussiert ist

const hasFocus = ele => (ele === document.activeElement);

Überprüfen Sie, ob der Benutzer bis zum Ende der Seite gescrollt hat

const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

Alle Geschwisterelemente eines Elements abrufen

const Geschwister = ele => [].slice.call(ele.parentNode.children).filter((Kind) => (Kind !== ele));

Ermitteln Sie die Position eines Elements relativ zum Dokument

const getPosition = ele => (r = ele.getBoundingClientRect(), { 
links: r.links + window.scrollX, oben: r.top + window.scrollY
 });

// Beispiel
getPosition(Dokument.Body); // { links: 0, oben: 0 }

Einfügen eines Elements nach einem anderen Element

const insertAfter = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle.nextSibling);

// Oder
const insertAfter = (ele, anotherEle) => anotherEle.insertAdjacentElement('afterend', ele);

P.S. Fügen Sie ein Element vor anderen Elementen ein

const insertBefore = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle);

// Oder
const insertBefore = (ele, anotherEle) => anotherEle.insertAdjacentElement('beforebegin', ele);

Fügt das angegebene HTML nach dem Element ein

const insertHtmlAfter = (html, ele) => ele.insertAdjacentHTML('afterend', html);

P.S. Fügen Sie das angegebene HTML vor dem Element ein

const insertHtmlBefore = (html, ele) => ele.insertAdjacentHTML('beforebegin', html);

Zum Seitenanfang scrollen (Zurück nach oben)

const goToTop = () => window.scrollTo(0, 0);

Arrays

Array-Leerprüfung

// `arr` ist ein Array
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;

// Beispiele
istEmpty([]); // wahr
isEmpty([1, 2, 3]); // falsch

Klonen eines Arrays

// `arr` ist ein Array
const clone = arr => arr.slice(0);

// Oder
Konstantenklon = arr => [...arr];

// Oder
const clone = arr => Array.from(arr);

// Oder
const clone = arr => arr.map(x => x);

// Oder
const clone = arr => JSON.parse(JSON.stringify(arr));

// Oder
const clone = arr => arr.concat([]);

Suchen Sie den Index des Maximalwerts in einem Array

const indexOfMax = arr => arr.reduce((vorherige, curr, i, a) => curr > a[vorherige] ? i : vorherige, 0);

// Beispiele
indexOfMax([1, 3, 9, 7, 5]); // 2
indexOfMax([1, 3, 7, 7, 5]); // 2

Anhang: Index entsprechend dem Mindestwert

const indexOfMin = arr => arr.reduce((vorherige, curr, i, a) => curr < a[vorherige] ? i : vorherige, 0);

// Beispiele
indexOfMin([6, 4, 8, 2, 10]); // 3
indexOfMin([6, 4, 2, 2, 10]); // 2

Holen Sie sich die Schnittmenge von Arrays

const getIntersection = (a, ...arr) => [...neues Set(a)].filter(v => arr.every(b => b.includes(v)));

// Beispiele
getIntersection([1, 2, 3], [2, 3, 4, 5]); // [2, 3]
getIntersection([1, 2, 3], [2, 3, 4, 5], [1, 3, 5]); // [3]

Gruppieren einer Gruppe von Objekten nach Schlüssel

const groupBy = (arr, key) => arr.reduce((acc, item) => ((acc[item[key]] = [...(acc[item[key]] || []), item]), acc), {});

// Beispiel
gruppierenNach([
    { Branche: 'audi', Modell: 'q8', Baujahr: '2019' },
    { Branche: 'audi', Modell: 'rs7', Baujahr: '2020' },
    { Branche: 'Ford', Modell: 'Mustang', Baujahr: '2019' },
    { Branche: 'Ford', Modell: 'Explorer', Jahr: '2020' },
    { Branche: 'bmw', Modell: 'x7', Jahr: '2020' },
], 'Zweig');

/*
{
    audi: [
        { Branche: 'audi', Modell: 'q8', Baujahr: '2019' },
        { Branche: 'audi', Modell: 'rs7', Jahr: '2020' }
    ],
    BMW:
        { Branche: 'bmw', Modell: 'x7', Jahr: '2020' }
    ],
    Ford:
        { Branche: 'Ford', Modell: 'Mustang', Baujahr: '2019' },
        { Branche: „Ford“, Modell: „Explorer“, Jahr: „2020“ }
    ],
}
*/

Entfernen Sie doppelte Werte aus einem Array

const removeDuplicate = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

// Beispiel
Duplikat entfernen(['h', 'e', ​​’l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']); // ['h', 'e', ​​’w', 'r', 'd']

Sortieren Sie die Elemente in einem Array nach dem angegebenen Schlüssel

const sortBy = (arr, k) => arr.concat().sort((a, b) => (a[k] > b[k]) ? 1 : ((a[k] < b[k]) ? -1 : 0));

// Beispiel
const Leute = [
    { Name: 'Foo', Alter: 42 },
    { Name: 'Bar', Alter: 24 },
    { Name: 'Fuzz', Alter: 36 },
    { Name: 'Baz', Alter: 32 },
];
sortBy(Personen, "Alter");

// gibt zurück
// [
// { Name: 'Bar', Alter: 24 },
// { Name: 'Baz', Alter: 32 },
// { Name: 'Fuzz', Alter: 36 },
// { Name: 'Foo', Alter: 42 },
// ]

Verfahren

Konvertieren von URL-Parametern in ein Objekt

const getUrlParams = Abfrage => Array.from(neue URLSearchParams(Abfrage)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v}), {});

// Beispiele
getUrlParams(location.search); // Parameter der aktuellen URL abrufen

getUrlParams('foo=Foo&bar=Bar'); // { foo: "Foo", bar: "Bar" }

// Schlüssel duplizieren
getUrlParams('foo=Foo&foo=Fuzz&bar=Bar'); // { foo: ["Foo", "Fuzz"], bar: "Bar" }

Den Wert eines Parameters aus einer URL abrufen

const getParam = (url, param) => neue URLSearchParams(neue URL(url).search).get(param);

// Beispiel
getParam('http://domain.com?message=hallo', 'message'); // 'hallo'

Ganzzahlen mit Null voranstellen

const prefixWithZeros = (Zahl, Länge) => (Zahl / Math.pow(10, Länge)).toFixed(Länge).substr(2);

// Oder
const prefixWithZeros = (Zahl, Länge) => `${Array(Länge).join('0')}${Zahl}`.slice(-Länge);

// Oder
const prefixWithZeros = (Zahl, Länge) => String(Zahl).padStart(Länge, '0');

// Beispiel
Präfix mit Nullen (42, 5); // '00042'

Rundet eine Zahl auf eine bestimmte Anzahl von Ziffern

const prefixWithZeros = (Zahl, Länge) => (Zahl / Math.pow(10, Länge)).toFixed(Länge).substr(2);

// Oder
const prefixWithZeros = (Zahl, Länge) => `${Array(Länge).join('0')}${Zahl}`.slice(-Länge);

// Oder
const prefixWithZeros = (Zahl, Länge) => String(Zahl).padStart(Länge, '0');

// Beispiel
Präfix mit Nullen (42, 5); // '00042'

Kürzt eine Zahl auf die angegebene Anzahl Dezimalstellen, ohne zu runden

const toFixed = (n, fest) => `${n}`.match(new RegExp(`^-?\\d+(?:\.\\d{0,${fest}})?`))[0];

// Oder
const toFixed = (n, fest) => ~~(Math.pow(10, fest) * n) / Math.pow(10, fest);

// Beispiele
zuFestgelegt(25.198726354, 1); // 25.1
zuFestgelegt(25.198726354, 2); // 25.19
zuFestgelegt(25.198726354, 3); // 25.198
zuFestgelegt(25.198726354, 4); // 25.1987
zuFestgelegt(25.198726354, 5); // 25.19872
zuFestgelegt(25.198726354, 6); // 25.198726

Entfernen Sie alle Null- und undefinierten Eigenschaften aus dem Objekt.

const removeNullUndefined = obj => Objekt.Einträge(obj).reduce((a, [k, v]) => (v == null ? a : (a[k] = v, a)), {});

// Oder
const removeNullUndefined = obj => Objekt.Einträge(obj).filter(([_, v]) => v != null).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

// Oder
const removeNullUndefined = obj => Objekt.fromEntries(Objekt.entries(obj).filter(([_, v]) => v != null));

// Beispiel
entfernenNullUndefined({
    foo: null,
    Balken: undefiniert,
    Flaum: 42,
});

Überprüfen, ob eine Zeichenfolge ein Palindrom ist

const isPalindrome = str => str === str.split('').reverse().join('');

// Beispiele
istPalindrom('abc'); // falsch
istPalindrom('abcba'); // wahr

Konvertieren Sie eine Zeichenfolge in CamelCase

const toCamelCase = str => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');

// Beispiele
toCamelCase('Hintergrundfarbe'); // Hintergrundfarbe
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // Hallo Welt
toCamelCase('hallo_welt'); // hallo Welt

Konvertieren Sie eine Zeichenfolge in PascalCase

const toPascalCase = str => (str.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('');

// Beispiele
toPascalCase('hallo Welt'); // 'Hallo Welt'
toPascalCase('hallo.welt'); // 'Hallo Welt'
toPascalCase('foo_bar-baz'); // FooBarBaz

HTML-Sonderzeichen maskieren

const escape = str => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');

// Oder
const escape = str => str.replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m]);

Ersetzen Sie mehrere Leerzeichen durch ein einzelnes Leerzeichen

// Ersetze Leerzeichen, Tabulatoren und Zeilenumbruchzeichen
const replaceSpaces = str => str.replace(/\s\s+/g, ' ');

// Ersetze nur Leerzeichen
const replaceOnlySpaces = str => str.replace(/ +/g, ' ');

// Beispiel
replaceSpaces('das ist eine Nachricht'); // 'das ist eine Nachricht'

Sortieren Sie die Zeilen eines Textdokuments in alphabetischer Reihenfolge

const sortLines = str => str.split(/\r?\n/).sort().join('\n');

// Reihenfolge umkehren
const reverseSortedLines = str => str.split(/\r?\n/).sort().reverse().join('\n');

// Beispiel
sortLines(`Thaddeus Mullen
Kareem Marshall
Ferdinand Valentine
Lindsay Hasad
Mufutau Berg
Knox Tyson
Kasimir Fletcher
Colton Sharp
Adrian Rosales
Theodore Rogers`);

/* Ausgabe */
/*
Adrian Rosales
Colton Sharp
Ferdinand Valentine
Lindsay Hasad
Kareem Marshall
Kasimir Fletcher
Knox Tyson
Mufutau Berg
Thaddeus Mullen
Theodore Rogers
*/

Eine Zeichenfolge auf ganze Wörter kürzen (über das Ausblenden hinaus)

const truncate = (str, max, suffix) => str.Länge < max? str: „${str.substr(0, str.substr(0, max - suffix.length).lastIndexOf(' '))}${suffix}“;

// Beispiel
truncate('Das ist eine lange Nachricht', 20, '...'); // 'Das ist eine lange...'

Entfernen Sie Escapezeichen aus HTML-Sonderzeichen

const unescape = str => str.replace(/&/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/�*39;/g, "'").replace(/&quot;/g, '"');

Zusammenfassen

Damit ist dieser Artikel über einige häufig verwendete Datenverarbeitungsmethoden in JS abgeschlossen. Weitere Informationen zu häufig verwendeten JS-Datenverarbeitungsmethoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Super detaillierte grundlegende JavaScript-Syntaxregeln
  • Tutorial zur grundlegenden Syntax von js und zur Konfiguration von Maven-Projekten
  • Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript
  • js realisiert das dynamische Laden von Daten durch Wasserfallfluss
  • js realisiert bidirektionale Datenbindung (Accessor-Überwachung)
  • Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript

<<:  So löschen Sie die MySQL-Registrierung

>>:  Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL

Artikel empfehlen

Detaillierte Erläuterung der Angular-Strukturdirektivenmodule und -Stile

Inhaltsverzeichnis 1. Strukturelle Anweisungen Mo...

Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue

Inhaltsverzeichnis Als Attribut- und Eigenschafts...

Verwenden von CSS3 zum Erzielen von Übergangs- und Animationseffekten

Warum sollten wir CSS-Animationen anstelle von JS...

Eine vollständige Liste der Meta-Tag-Einstellungen für Mobilgeräte

Vorwort Als ich zuvor das Front-End studierte, be...

Ein magischer MySQL-Deadlock-Troubleshooting-Datensatz

Hintergrund Apropos MySQL-Deadlock: Ich habe bere...

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Mit CSS3 können Animationen erstellt werden, die ...

Ein Problem mit der Bereitstellung von MySQL 5.5

MySQL-Bereitstellung Derzeit stellt das Unternehm...

Detaillierte Erläuterung des Docker-Visualisierungsgrafiktools Portainer

Inhaltsverzeichnis 1. Einführung in Portainer 2. ...

Zusammenfassung mehrerer häufig verwendeter String-Methoden in JavaScript (unbedingt lesenswert für Anfänger)

Mehrere häufig verwendete String-Methoden in Java...

Verwenden Sie js in html, um die lokale Systemzeit abzurufen

Code kopieren Der Code lautet wie folgt: <div ...

Analyse der Implementierungsschritte für geteilte Festplattenpartitionen unter Linux

Im Vergleich zu fdisk wird parted weniger verwend...

WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Inhaltsverzeichnis Lastenausgleich Klassifizierun...

MySQL 5.7.20 Win64 Installations- und Konfigurationsmethode

mysql-5.7.20-winx64.zipInstallationspaket ohne In...

Vorteile und Probleme des XHTML CSS Website Designs

XHTML ist die derzeit international verbreitete S...