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

Tutorial zur Docker-Installation in einer Linux-Umgebung

1. Installationsumgebung Docker unterstützt die f...

So zeigen Sie den Rahmen an, wenn td leer ist

Zuvor habe ich zusammengefasst, wie man mit CSS di...

Was ist TypeScript?

Inhaltsverzeichnis 1. JavaScript-Probleme 2. Vort...

Implementierungsprinzip und Konfiguration der MySql Master-Slave-Replikation

Die Trennung von Lese- und Schreibzugriffen in Da...

Zusammenfassung der schnellen Spaltenaddition bei MySQL 8.0 Online DDL

Inhaltsverzeichnis Problembeschreibung Historisch...

Erklärung der Funktionsweise und Verwendung von Redux

Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

Vier Möglichkeiten zum Wechseln von Registerkarten in VUE

Inhaltsverzeichnis 1. Statische Implementierungsm...

Vue-Beispielcode für die Online-Vorschau von Office-Dateien

Ich arbeite derzeit an elektronischen Archiven un...

JavaScript generiert zufällige Grafiken durch Klicken

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

So verwenden Sie Yum zum Konfigurieren der lnmp-Umgebung im CentOS7.6-System

1. Details zur Installationsversion Server: Maria...

Beispiele für die Verwendung temporärer Tabellen in MySQL

Ich war in den letzten beiden Tagen etwas beschäf...

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Vorwort Sass ist eine Erweiterung der CSS3-Sprach...