AvaScript-Einzeiler, die Codezeilen ersetzen

Wir alle haben schon einmal auf eine schreckliche Wand aus JavaScript-Code geschaut, die lautlos in uns selbst fluchte, wohlwissend, dass es einen besseren Weg geben sollte.

Nach einiger Zeit des Lernens habe ich einige nette Einzeiler gefunden, die viele Zeilen ausführlichen Codes auslöschen.

Dies sind wirklich nützliche, lesbare Tipps, die moderne JavaScript-Funktionen nutzen, um häufige Probleme zu lösen.

Ob Sie also den Code bereinigen oder gerade ein neues Projekt starten, diese Tricks können dabei helfen, eleganteren und wartbareren Code zu erstellen.

Hier sind 9 dieser raffinierten Einzeiler, die Sie heute verwenden können.

Reduzieren eines verschachtelten Arrays

Haben Sie schon einmal versucht, ein so tiefes Array zu reduzieren? Früher bedeutete das viele komplizierte Mehrfachschleifen, temporäre Arrays und insgesamt zu viel Code.

Aber jetzt ist es sehr schön in einem kraftvollen Einzeiler umgesetzt:

const flattenArray = arr => arr.flat(Infinity);

const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]];
const cleanArray = flattenArray(nestedArray);
// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Wenn Sie dies auf traditionellere Weise tun würden, hätten Sie etwa Folgendes:

function flattenTheHardWay(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenTheHardWay(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

Die ganze harte Arbeit wird von flat() erledigt, und das Hinzufügen von Infinity weist es an, auf jede mögliche Ebene abzusinken. Einfach, sauber und es funktioniert.

Objekttransformation: Deep Clone ohne Abhängigkeiten

Wenn Sie einen echten Deep-Clone eines Objekts benötigen, ohne Lodash einzuschalten? Hier ist eine Lösung ohne Abhängigkeiten, die verschachtelte Objekte, Arrays und sogar Datumsangaben verarbeitet:

const deepClone = obj => JSON.parse(JSON.stringify(obj));

const complexObj = {
  user: { name: 'Alex', date: new Date() },
  scores: [1, 2, [3, 4]],
  active: true
};

const cloned = deepClone(complexObj);

Der alte Weg? Sie müssten etwa Folgendes eingeben:

function manualDeepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);

  const clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = manualDeepClone(obj[key]);
    }
  }
  return clone;
}

Kurze Warnung: Dieser Einzeiler weist einige Einschränkungen auf: Er verarbeitet keine Funktionen, Symbole oder Zirkelverweise. Aber für 90 % der Anwendungsfälle ist es genau das Richtige.

String-Verarbeitung: Konvertieren Sie CSV in ein Array von Objekten

Dies ist ein netter kleiner Einzeiler, der CSV-Daten aufnimmt und ein manipulierbares Array von Objekten ausspuckt, ideal für die Verwendung in API-Antworten oder zum Einlesen von Daten:

const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));

const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;

const parsed = csvToObjects(csvData);
// Result:
// [
//   { name: 'Peboy', age: '30', city: 'New York' },
//   { name: 'Peace', age: '25', city: 'San Francisco' },
//   { name: 'Lara', age: '35', city: 'Chicago' }
// ]

Altmodisch? Oh, Sie würden wahrscheinlich so etwas schreiben:

function convertCSVTheHardWay(csv) {
  const lines = csv.split('\n');
  const headers = lines[0].split(',');
  const result = [];

  for (let i = 1; i < lines.length; i++) {
    const obj = {};
    const currentLine = lines[i].split(',');

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j];
    }
    result.push(obj);
  }
  return result;
}

Es ist eine effektive Methode zur Datentransformation mit einem Einzeiler, aber fügen Sie etwas Fehlerbehandlung hinzu, bevor Sie sie in die Produktion überführen.

Array-Operationen: Duplikate entfernen und sortieren

Hier ist ein verkürzter Einzeiler, der Duplikate entfernt und gleichzeitig Ihr Array sortiert, perfekt zum Bereinigen eines Datensatzes:

const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);

// Example of its use:
const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const cleaned = uniqueSorted(messyArray);
// Result: [1, 2, 3, 4, 5, 6, 9]

// For string sorting

const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana'];
const cleanedStrings = [...new Set(messyStrings)].sort();
// Result: ['apple', 'banana', 'cherry']

So sah die alte Art früher aus:

function cleanArrayManually(arr) {
  const unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (unique.indexOf(arr[i]) === -1) {
      unique.push(arr[i]);
    }
  }
  return unique.sort((a, b) => a - b);
}

Das Set kümmert sich perfekt um Duplikate und der Spread-Operator wandelt es dann wieder in ein Array um. Und danach rufst du einfach sort() auf!

DOM-Manipulation: Mehrere Elemente abfragen und transformieren

Hier ist ein leistungsstarker Einzeiler, mit dem Sie mehrere DOM-Elemente auf einmal abfragen und transformieren können:

const flattenArray = arr => arr.flat(Infinity);

const nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]];
const cleanArray = flattenArray(nestedArray);
// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Der traditionelle Ansatz wäre:

function flattenTheHardWay(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenTheHardWay(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

Dies funktioniert in allen modernen Browsern und erspart Ihnen das Schreiben von sich wiederholendem DOM-Manipulationscode.

Parallele API-Aufrufe mit sauberer Fehlerbehandlung

Dies ist eine weitere klare Zeile, einzeilig, die parallele Aufrufe an APIs ausführt und dies in einer sehr sauberen Fehlerbehandlung tut.

const deepClone = obj => JSON.parse(JSON.stringify(obj));

const complexObj = {
  user: { name: 'Alex', date: new Date() },
  scores: [1, 2, [3, 4]],
  active: true
};

const cloned = deepClone(complexObj);

Ausführlicher wäre:

function manualDeepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);

  const clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = manualDeepClone(obj[key]);
    }
  }
  return clone;
}

Promise.allSettled ist hier der Held; Es schlägt nicht fehl, wenn eine Anfrage fehlschlägt, und es gibt für jeden Anruf saubere Statusinformationen zurück.

Datums-/Uhrzeitformatierung: Bereinigen Sie Datumszeichenfolgen ohne Bibliotheken

Hier ist ein süßer Einzeiler, der Datumsangaben in saubere, lesbare Zeichenfolgen ohne externe Abhängigkeiten umwandelt:

const csvToObjects = csv => csv.split('\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));

const csvData = `name,age,city
Peboy,30,New York
Peace,25,San Francisco
Lara,35,Chicago`;

const parsed = csvToObjects(csvData);
// Result:
// [
//   { name: 'Peboy', age: '30', city: 'New York' },
//   { name: 'Peace', age: '25', city: 'San Francisco' },
//   { name: 'Lara', age: '35', city: 'Chicago' }
// ]

Der altmodische Weg würde so aussehen:

function convertCSVTheHardWay(csv) {
  const lines = csv.split('\n');
  const headers = lines[0].split(',');
  const result = [];

  for (let i = 1; i < lines.length; i++) {
    const obj = {};
    const currentLine = lines[i].split(',');

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j];
    }
    result.push(obj);
  }
  return result;
}

Intl.DateTimeFormat übernimmt die ganze schwere Arbeit, einschließlich der Lokalisierung. Kein manuelles Erstellen von Datumszeichenfolgen mehr!

Ereignisbehandlung: Entprellen ohne Aufblähen

Hier ist ein sauberer Einzeiler, der eine entprellte Version jeder Funktion erstellt – perfekt für Sucheingaben oder Handler zur Fenstergrößenänderung:

const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);

// Example of its use:
const messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const cleaned = uniqueSorted(messyArray);
// Result: [1, 2, 3, 4, 5, 6, 9]

// For string sorting

const messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana'];
const cleanedStrings = [...new Set(messyStrings)].sort();
// Result: ['apple', 'banana', 'cherry']

Der traditionelle Weg würde so aussehen:

function cleanArrayManually(arr) {
  const unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (unique.indexOf(arr[i]) === -1) {
      unique.push(arr[i]);
    }
  }
  return unique.sort((a, b) => a - b);
}

Dieser Einzeiler deckt alle grundlegenden Anwendungsfälle der Entprellung ab und erspart Ihnen den unnötigen Aufruf von Funktionen, insbesondere wenn Eingaben schnell hintereinander generiert werden, wie z. B. Eingaben oder Größenänderungen.

Lokaler Speicher: Objektspeicher mit Validierung

Hier ist nur ein weiterer sauberer Einzeiler, der die Objektspeicherung in localStorage mit integrierter Validierung und Fehlerbehandlung verwaltet:

const modifyElements = selector => Array.from(document.querySelectorAll(selector)).forEach(el => el.style);

// Use it like this:
const updateButtons = modifyElements('.btn')
  .map(style => Object.assign(style, {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '10px 20px'
}));

// Or even simpler for class updates:
const toggleAll = selector => document.querySelectorAll(selector).forEach(el => el.classList.toggle('active'));

Der alte Weg würde so etwas brauchen:

function updateElementsManually(selector) {
  const elements = document.querySelectorAll(selector);
  for (let i = 0; i < elements.length; i++) {
    const el = elements[i];
    el.style.backgroundColor = '#007bff';
    el.style.color = 'white';
    el.style.padding = '10px 20px';
  }
}

Der Wrapper stellt Ihnen eine saubere API für localStorage-Vorgänge zur Verfügung und übernimmt die gesamte JSON-Analyse/Stringifizierung automatisch.

Zusammenfassung

Bei diesen Einzeilern geht es nicht nur darum, weniger Code zu schreiben – es geht darum, intelligenteren Code zu schreiben. Jeder von ihnen löst eine häufige JavaScript-Herausforderung auf saubere und wartbare Weise. Obwohl diese Snippets leistungsstark sind, denken Sie daran, dass die Lesbarkeit immer an erster Stelle stehen sollte. Wenn ein Einzeiler das Verständnis Ihres Codes erschwert, teilen Sie ihn in mehrere Zeilen auf.

Sie können diese Muster in Ihren Projekten beliebig kombinieren und vergessen Sie nicht, die Browserkompatibilität für neuere JavaScript-Funktionen wie flat() oder Intl.DateTimeFormat zu überprüfen, wenn Sie ältere Browser unterstützen.

Haben Sie Ihre eigenen leistungsstarken JavaScript-Einzeiler? Ich würde sie gerne sehen!

Folgen Sie mir auf X für weitere JavaScript-Tipps, Tricks und Diskussionen zur Webentwicklung. Ich teile regelmäßig Codeausschnitte und Best Practices, die unser Entwicklerleben einfacher machen.

Bleiben Sie neugierig, programmieren Sie weiter und denken Sie daran: Bei gutem Code kommt es nicht darauf an, wie wenig Sie schreiben, sondern wie klar Sie Ihre Absicht zum Ausdruck bringen.

Das obige ist der detaillierte Inhalt vonAvaScript-Einzeiler, die Codezeilen ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!