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 Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3

Inhaltsverzeichnis 1. Teleport-Nutzung 2. Vervoll...

So verwenden Sie Anti-Shake und Throttling in Vue

Inhaltsverzeichnis Vorwort Konzept Stabilisierung...

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

In diesem Artikel wird der spezifische Code von j...

MySQL-Replikation - ausführliche Erklärung und einfaches Beispiel

MySQL-Replikation - ausführliche Erklärung und ei...

Verwenden Sie eine Tabelle, um das Format der Formularsteuerelemente anzupassen, damit sie besser aussehen

Da ich selbst eine Webseite schreiben möchte, lern...

Theorie: Die zwei Jahre User Experience

<br />Es ist nicht länger als zwei Jahre her...

Anweisungen zum Erlernen von Vue

Inhaltsverzeichnis 1. v-Text (v-Befehlsname = „Va...

Tab-Effekte mit JS schreiben

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung dieser Referenz in React

Inhaltsverzeichnis Ursache: durchlaufen: 1. Konst...

Erste Erfahrungen mit der Texterstellung mit Javascript Three.js

Inhaltsverzeichnis Wirkung Beginnen Sie mit der T...

JS implementiert einen Stoppuhr-Timer

In diesem Artikelbeispiel wird der spezifische JS...

So finden Sie langsame SQL-Anweisungen in MySQL

Wie finde ich langsame SQL-Anweisungen in MySQL? ...

Detaillierte Installation und Verwendung von RocketMQ in Docker

Um nach RocketMQ-Images zu suchen, können Sie auf...

Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen

Inhaltsverzeichnis Überblick in Operatorverfeiner...

Verwenden von JavaScript in HTML

Das <script>-Tag In HTML5 hat Skript die fo...