17 JavaScript-Einzeiler

17 JavaScript-Einzeiler

1. DOM & BOM bezogen

1. Überprüfen Sie, ob das Element den Fokus hat

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


2. Alle Geschwisterknoten eines Elements abrufen

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

// oder const siblings = (ele) => [...ele.parentNode.children].filter((child) => child !== ele);


3. Holen Sie sich den ausgewählten Text

const getSelectedText = () => window.getSelection().toString();


4. Zurück zur vorherigen Seite

Geschichte.zurück();
// oder history.go(-1);


5. Alle Cookies löschen

const clearCookies = () => Dokument.Cookie
  .Teilt(';')
  .forEach((c) =>(document.cookie = c.replace(/^ +/, '')
  .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)));


6. Cookies in Objekte umwandeln

const cookies = Dokument.cookie
.Teilt(';')
.map((Element) => Element.split('='))
.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});

2. Array-bezogen

7. Vergleichen zweier Arrays

// „a“ und „b“ sind ein Array const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
// oder const isEqual = (a, b) => a.length === b.length und a.every((v, i) => v === b[i]);

// Beispiel isEqual([1, 2, 3], [1, 2, 3]); // true
istgleich([1, 2, 3], [1, '2', 3]); // falsch


8. Konvertieren Sie ein Array von Objekten in ein Objekt

const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
// oder const toObject = (arr, key) => Object.fromEntries(arr.map((it) => [it[key], it]));

// Beispiel toObject([
  { id: '1', name: 'Alpha', gender: 'Männlich' },
  { id: '2', name: 'Bravo', gender: 'Männlich' },
  { id: '3', name: 'Charlie', gender: 'Weiblich' }],
'Ausweis');

/*
{
'1': { id: '1', name: 'Alpha', gender: 'Männlich' },
'2': { id: '2', name: 'Bravo', gender: 'Männlich' },
'3': { id: '3', name: 'Charlie', gender: 'Weiblich' }
}
*/

9. Zählen nach Eigenschaften eines Arrays von Objekten

const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {});

// Beispiel countBy([
{ 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': 2, 'ford': 2, 'bmw': 1 }

10. Überprüfen Sie, ob das Array leer ist

const isNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

// Beispiel isNotEmpty([]); // false
istNichtEmpty([1, 2, 3]); // wahr

3. Objektbezogen

11. Überprüfen Sie, ob mehrere Objekte gleich sind

const isEqual = (...Objekte) => Objekte.jedes((Objekt) => JSON.stringify(Objekt) === JSON.stringify(Objekte[0]));

// Beispiel isEqual({ foo: 'bar' }, { foo: 'bar' }); // true
ist gleich ({ foo: 'bar' }, { bar: 'foo' }); // falsch


12. Extrahieren von Attributwerten aus einem Array von Objekten

const pluck = (objs, Eigenschaft) => objs.map((obj) => obj[Eigenschaft]);

// Beispiel pluck([
  { Name: 'John', Alter: 20 },
  { Name: 'Smith', Alter: 25 },
  { Name: 'Peter', Alter: 30 },
],
'Name');

// ['John', 'Schmied', 'Peter']

13. Kehren Sie die Schlüssel und Werte eines Objekts um

const invert = (obj) => Objekt.keys(obj).reduce((res, k) => Objekt.assign(res, { [obj[k]]: k }), {});
// oder const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

// Beispiel invert({ a: '1', b: '2', c: '3' }); // { 1: 'a', 2: 'b', 3: 'c' }

14. Entfernen Sie alle leeren und undefinierten Eigenschaften von Objekten

const removeNullUndefined = (obj) =>
  Objekt.Einträge(Objekt).Reduzieren(
    (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));

// BeispielremoveNullUndefined({
  foo: null,
  Balken: undefiniert,
  Flaum: 42
});
// { fuzz: 42 }

15. Objekte nach Eigenschaften sortieren

const sort = (Obj) =>
  Objekt.Schlüssel(obj)
    .Sortieren()
    .reduce((p, c) => ((p[c] = obj[c]), p), {});

// Beispiel const colors = {
  weiß: '#ffffff',
  schwarz: '#000000',
  rot: '#ff0000',
  grün: '#008000',
  blau: '#0000ff',
};
sortieren (Farben);
/*
{
  schwarz: '#000000',
  blau: '#0000ff',
  grün: '#008000',
  rot: '#ff0000',
  weiß: '#ffffff',
}
*/

16. Prüfen Sie, ob ein Objekt ein Promise ist

const isPromise = (obj) =>
  !!Objekt &&
  (Typ von Objekt === 'Objekt' || Typ von Objekt === 'Funktion') &&
  Typ von Objekt.dann === 'Funktion';


17. Überprüfen Sie, ob das Objekt ein Array ist

const isArray = (obj) => Array.isArray(obj);

Dies ist das Ende dieses Artikels über JavaScript-Einzeilenprogramme. Weitere relevante Inhalte zu JavaScript-Einzeilenprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • 18 Killer-JavaScript-Einzeiler
  • 25 JavaScript-Einzeilencodes, die häufig in der Entwicklung verwendet werden (Zusammenfassung)
  • Einzeiliges JS implementiert die Eingaberegeln des Mobile-Money-Formats

<<:  Lösung für das Problem, dass Eingaben im Formular nicht übermittelt werden können, wenn diese deaktiviert sind

>>:  Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Artikel empfehlen

Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

REPLACE Syntax REPLACE(String,from_str,to_str) Da...

So verwenden Sie Nexus, um JAR-Pakete zu privaten Servern hinzuzufügen

Warum müssen wir einen privaten Nexus-Server erst...

Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V

Derzeit nutzen die meisten Linux-Benutzer entwede...

CSS-Rand halb oder teilweise sichtbarer Implementierungscode

1. Verwenden Sie Pseudoklassen, um die Hälfte des...

Einführung in den glibc-Upgradeprozess für Centos6.5

Inhaltsverzeichnis Szenarioanforderungen glibc-Ve...

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Wenn eine Website böswillig angefragt wird, ist d...

Reines CSS-Dropdown-Menü

Ergebnisse erzielen Implementierungscode html <...

So ziehen Sie das Docker-Image herunter, um die Version anzuzeigen

Um die Version und das Tag des Bildes anzuzeigen,...

Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux

Als ich mein primäres Betriebssystem von Windows ...

Hadoop 2.x vs. 3.x 22-Punkte-Vergleich, Hadoop 3.x Verbesserungen gegenüber 2.x

Fragen-Leitfaden 1. Wie toleriert Hadoop 3.x Fehl...

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

In diesem Artikelbeispiel wird der spezifische Ja...

Definieren der Mindesthöhe der Inline-Elementspanne

Das Span-Tag wird häufig beim Erstellen von HTML-...