替代程式碼行的 avaScript 單行程式碼

我們所有人都曾在某個時候看著一堵可怕的 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 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

這一行涵蓋了所有基本的去抖動用例，並使您免於不必要地調用函數，特別是當快速連續生成輸入（例如鍵入或調整大小）時。

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

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

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

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

總結

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

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

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

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

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

以上是替代程式碼行的 avaScript 單行程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！