avaScript One-Liners qui remplacent les lignes de code

Nous avons tous, à un moment ou à un autre, regardé un horrible mur de code JavaScript maudissant silencieusement en nous-mêmes, sachant très bien qu'il devrait y avoir une meilleure solution.

Après un certain temps passé à apprendre, j'ai trouvé des one-liners intéressants qui effaceront de nombreuses lignes de code verbeux.

Ce sont des conseils vraiment utiles et lisibles qui tirent parti des fonctionnalités JavaScript modernes pour résoudre les problèmes courants.

Ainsi, que vous nettoyiez du code ou que vous démarriez tout simplement un nouveau projet, ces astuces peuvent vous aider avec un code plus élégant et plus maintenable.

Voici 9 one-liners astucieux que vous pouvez utiliser aujourd'hui.

Aplatir un tableau imbriqué

Avez-vous déjà essayé d'aplatir un tableau aussi profond ? À l’époque, cela signifiait beaucoup de boucles multiples compliquées, de tableaux temporaires et, dans l’ensemble, trop de code.

Mais maintenant, c'est très bien exécuté dans un puissant single-liner :

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]

Si vous faisiez cela de manière plus traditionnelle, vous obtiendriez quelque chose comme ceci :

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;
}

Tout le travail acharné est pris en charge par le flat(), et l'ajout d'Infinity lui indique de descendre à n'importe quel niveau possible. Simple, propre et ça marche.

Transformation d'objet : clonage profond sans dépendances

Si vous avez besoin d'un véritable clone profond d'un objet sans utiliser de lodash ? Voici une solution sans dépendance qui gère les objets imbriqués, les tableaux et même les dates :

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);

L'ancienne méthode ? Vous devrez taper quelque chose comme ceci :

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;
}

Avertissement rapide : Ce one-liner a quelques limitations : il ne gère pas les fonctions, les symboles ou les références circulaires. Mais pour 90 % des cas d’utilisation, c’est plutôt parfait.

Traitement des chaînes : convertir un fichier CSV en tableau d'objets

Il s'agit d'un joli petit one-liner qui prend des données CSV et crache un tableau d'objets manipulables, idéalement pour une utilisation dans les réponses API ou pour la lecture de données :

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' }
// ]

Démodé ? Oh, vous écririez probablement quelque chose comme ceci :

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;
}

C'est un moyen efficace de transformer des données avec une seule ligne, mais ajoutez un peu de gestion des erreurs avant de les plonger en production.

Opérations sur les tableaux : supprimer les doublons et trier

Voici un one-liner raccourci qui supprime les doublons et trie votre tableau en même temps, parfait pour nettoyer un ensemble de données :

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']

Voici à quoi ressemblait l'ancienne méthode :

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);
}

Le Set s'occupe parfaitement des doublons, puis l'opérateur de propagation le transforme à nouveau en tableau. Et vous appelez simplement sort() après !

Manipulation DOM : interroger et transformer plusieurs éléments

Voici un puissant one-liner qui vous permet d'interroger et de transformer plusieurs éléments DOM en une seule fois :

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]

L'approche traditionnelle serait :

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;
}

Cela fonctionne dans tous les navigateurs modernes et vous évite d'écrire du code de manipulation DOM répétitif.

Appels d'API parallèles avec gestion propre des erreurs

Il s'agit d'une autre ligne épurée, d'une seule ligne, qui effectue des appels parallèles aux API et le fait avec une gestion des erreurs très propre.

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);

Plus verbeux serait :

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 est le héros ici ; il n'échoue pas si une demande échoue et renvoie des informations d'état claires pour chaque appel.

Formatage de la date/heure : nettoyer les chaînes de date sans bibliothèques

Voici un joli one-liner qui transforme les dates en chaînes claires et lisibles sans aucune dépendance externe :

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' }
// ]

La méthode à l'ancienne ressemblerait à ceci :

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 gère tout le gros du travail, y compris la localisation. Fini la création manuelle de chaînes de date !

Gestion des événements : anti-rebond sans ballonnement

Voici un one-liner épuré qui crée une version anti-rebond de n'importe quelle fonction - parfait pour les gestionnaires de saisie de recherche ou de redimensionnement de fenêtre :

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']

La manière traditionnelle ressemblerait à ceci :

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);
}

Ce one-liner couvre tous les cas d'utilisation de base anti-rebond et vous évite d'appeler des fonctions inutilement, en particulier lorsque les entrées sont générées en succession rapide, comme la saisie ou le redimensionnement.

Stockage local : stockage d'objets avec validation

Voici juste un autre one-liner propre qui gère le stockage d'objets dans localStorage avec validation et gestion des erreurs intégrées :

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'));

L'ancienne méthode aurait besoin de quelque chose comme ceci :

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';
  }
}

Le wrapper vous offre une API propre pour les opérations localStorage et gère automatiquement toutes les analyses/stringify JSON.

Conclusion

Ces one-liners ne visent pas seulement à écrire moins de code, ils visent à écrire du code plus intelligent. Chacun résout un défi JavaScript courant de manière propre et maintenable. Bien que ces extraits soient puissants, n’oubliez pas que la lisibilité doit toujours primer. Si une seule ligne rend votre code plus difficile à comprendre, divisez-le en plusieurs lignes.

N'hésitez pas à mélanger et assortir ces modèles dans vos projets, et n'oubliez pas de vérifier la compatibilité du navigateur pour les nouvelles fonctionnalités JavaScript comme flat() ou Intl.DateTimeFormat si vous prenez en charge les navigateurs plus anciens.

Vous avez vos propres one-liners JavaScript puissants ? J'adorerais les voir !

Suivez-moi sur X pour plus de conseils, astuces et discussions JavaScript sur le développement Web. Je partage régulièrement des extraits de code et des bonnes pratiques qui facilitent la vie de nos développeurs.

Restez curieux, continuez à coder et rappelez-vous : un bon code ne dépend pas du peu que vous écrivez, mais de la clarté avec laquelle vous exprimez votre intention.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!