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

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...

Installieren Sie Mininet aus dem Quellcode auf Ubuntu 16.04

Mininet Mininet ist eine leichtgewichtige, softwa...

HTML-Grundlagen: Die grundlegende Struktur von HTML

Die Grundstruktur von HTML-Hypertextdokumenten bes...

Tipps zum Schreiben prägnanter React-Komponenten

Inhaltsverzeichnis Vermeiden Sie die Verwendung d...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Lösung für das Problem des verstümmelten Codes in MySQL 5.x

MySQL ist eine häufig verwendete Open-Source-Date...

Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig au...

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Installationsumgebung Windows 10 VMware Workstati...

Detaillierte Erklärung der JS-Homologiestrategie und CSRF

Inhaltsverzeichnis Überblick Same-Origin-Policy (...

Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import

Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...