我們所有人都曾在某個時候看著一堵可怕的 JavaScript 程式碼牆，在內心默默咒罵，但很清楚應該有更好的方法。

經過一段時間的學習，我發現了一些簡潔的俏皮話，可以消除許多行冗長的程式碼。

這些是真正有用、可讀的技巧，它們利用現代 JavaScript 功能來解決常見問題。

因此，無論您是在清理程式碼還是剛開始一個新專案，這些技巧都可以幫助您編寫更優雅且可維護的程式碼。

這裡有 9 條這樣漂亮的俏皮話，你今天就可以使用。

展平嵌套陣列

曾經嘗試過展平如此深的陣列嗎？在過去，這意味著大量複雜的多重循環、臨時陣列以及太多的程式碼。

但現在它在強大的單行程式碼中執行得非常好：

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]

如果您以更傳統的方式執行此操作，您將得到以下結果：

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

所有艱苦的工作都由 flat() 處理，加入 Infinity 告訴它下降到任何可能的級別。簡單、乾淨而且有效。

物件轉換：無依賴的深度克隆

如果您需要一個物件的真正深度克隆而不需要拉入 lodash？這是一個處理巢狀物件、陣列甚至日期的零依賴解決方案：

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

老辦法？你必須輸入這樣的內容：

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

快速提醒：這一行確實有一些限制 - 它不能處理函數、符號或循環參考。但對於 90% 的用例來說，它幾乎是正確的。

字串處理：將 CSV 轉換為物件陣列

這是一個不錯的小單行程式碼，它會取得 CSV 資料並輸出一組可操作的物件，非常適合在 API 回應或讀取資料中使用：

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

老式的？哦，你可能會寫這樣的東西：

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

這是一種使用單行進行資料轉換的有效方法，但在投入生產之前加入一些錯誤處理。

陣列操作：刪除重複項和排序

這是一個縮短的單行程式碼，可以同時刪除重複項並對陣列進行排序，非常適合清理資料集：

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

這是舊方法的樣子：

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

Set 完美地處理重複項，然後展開運算子將其傳回陣列。然後你只需呼叫 sort() 即可！

DOM 操作：查詢與轉換多個元素

這是一個功能強大的單行程式碼，可讓您一次查詢和轉換多個 DOM 元素：

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

傳統的方法是：

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

這適用於所有現代瀏覽器，使您無需編寫重複的 DOM 操作程式碼。

具有乾淨錯誤處理功能的平行 API 呼叫

這是另一條乾淨的線路，它對 API 進行並行呼叫，並以非常乾淨的錯誤處理方式進行。

const parallelCalls = urls => Promise.allSettled(urls.map(url => fetch(url).then(r => r.json())));

// Put it to work:
const urls = [
  'https://api.example.com/users',
  'https://api.example.com/posts',
  'https://api.example.com/comments'
];

// One line to fetch them all:
const getData = async () => {
  const results = await parallelCalls(urls);
  const [users, posts, comments] = results.map(r => r.status === 'fulfilled' ? r.value : null);
};

更詳細的是：

async function fetchDataManually(urls) {
  const results = [];
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      results.push({ status: 'fulfilled', value: data });
    } catch (error) {
      results.push({ status: 'rejected', reason: error });
    }
  }
  return results;
}

Promise.allSettled是這裡的英雄；如果一個請求失敗，它也不會失敗，並且它會為每個呼叫傳回乾淨的狀態資訊。

日期/時間格式：無需庫即可清理日期字串

這是一個可愛的單行程式碼，可以將日期轉換為乾淨、可讀的字串，而無需任何外部依賴：

const formatDate = date => new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short' }).format(date);

const now = new Date();
console.log(formatDate(now));
// Output: "Thursday, December 3, 2024 at 2:30 PM"

// Want a different format? Easy:
const shortDate = date => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
// Output: "Dec 3, 2024"

老派的方式看起來像這樣：

function formatDateManually(date) {
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  const dayName = days[date.getDay()];
  const monthName = months[date.getMonth()];
  const day = date.getDate();
  const year = date.getFullYear();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const ampm = hours >= 12 ? 'PM' : 'AM';

  return `${dayName}, ${monthName} ${day}, ${year} at ${hours % 12}:${minutes.toString().padStart(2, '0')} ${ampm}`;
}

Intl.DateTimeFormat處理所有繁重的工作，包括本地化。不再需要手動建立日期字串！

事件處理：去發抖而不膨脹

這是一個乾淨的單行程式碼，它建立任何函數的去抖版本 - 非常適合搜尋輸入或視窗調整大小處理程序：

const debounce=(fn,ms)=>{let timeout;return(...args)=>{clearTimeout(timeout);timeout=setTimeout(()=>fn(...args),ms);};};

// Put it to work:
const expensiveSearch=query=>console.log('Searching for:',query);
const debouncedSearch=debounce(expensiveSearch,300);

// Use it in your event listener:
searchInput.addEventListener('input',e=>debouncedSearch(e.target.value));

傳統的方式看起來像這樣：

function createDebounce(fn, delay) {
  let timeoutId;

  return function debounced(...args) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(() => {
      fn.apply(this, args);
      timeoutId = null;
    }, delay);
  };
}

這一行程式碼涵蓋了所有基本的去抖動用例，並使您免於不必要地呼叫函數，尤其是在快速連續產生輸入（例如鍵入或調整大小）時。

本機儲存：帶有驗證的物件存儲

這是另一個乾淨的單行程式碼，它透過內建的驗證和錯誤處理來處理 localStorage 中的物件儲存：

const store = key => ({ get: () => JSON.parse(localStorage.getItem(key)), set: data => localStorage.setItem(key, JSON.stringify(data)), remove: () => localStorage.removeItem(key) });

// Use it like this:
const userStore = store('user');

// Save data
userStore.set({ id: 1, name: 'John', preferences: { theme: 'dark' } });

// Get data
const userData = userStore.get();

// Remove data
userStore.remove();

舊的方法需要這樣的東西：

function handleLocalStorage(key) {
  return {
    get: function() {
      try {
        const item = localStorage.getItem(key);
        return item ? JSON.parse(item) : null;
      } catch (e) {
        console.error('Error reading from localStorage', e);
        return null;
      }
    },
    set: function(data) {
      try {
        localStorage.setItem(key, JSON.stringify(data));
      } catch (e) {
        console.error('Error writing to localStorage', e);
      }
    },
    remove: function() {
      try {
        localStorage.removeItem(key);
      } catch (e) {
        console.error('Error removing from localStorage', e);
      }
    }
  };
}

包裝器為您提供了用於 localStorage 操作的乾淨 API，並自動處理所有 JSON 解析/字串化。

總結

這些俏皮話不僅是為了寫更少的程式碼，而是為了寫更聰明的程式碼。每一個都以一種乾淨、可維護的方式解決了常見的 JavaScript 挑戰。雖然這些片段很強大，但請記住，可讀性始終是第一位的。如果單行程式碼使您的程式碼更難以理解，請將其分解為多行。

請隨意在專案中混合和匹配這些模式，如果您支援舊版瀏覽器，請不要忘記檢查瀏覽器相容性以取得較新的 JavaScript 功能，例如flat()或Intl.DateTimeFormat 。

你有自己強大的 JavaScript 俏皮話嗎？我很想見他們！

在X上關注我，了解更多關於 Web 開發的 JavaScript 技巧、技巧和討論。我定期分享程式碼片段和最佳實踐，讓我們的開發生活更輕鬆。

保持好奇心，繼續編碼，並記住：好的程式碼不在於你寫得有多少，而在於你如何清楚地表達你的意圖。

原文出處：https://dev.to/peboycodes/9-javascript-one-liners-that-replace-50-lines-of-code-6j4