九個 JavaScript 單行代碼提升你的編程水平

作者：佚名 2025-02-25 11:12:53

在不斷發展的 Web 開發世界中，效率和優雅至高無上。作為 JavaScript 開發人員，我們一直在尋找編寫更干凈、更簡潔的代碼的方法，而不會影響可讀性。進入：JavaScript 單行代碼的神奇世界！

這些強大的 JavaScript 單行代碼片段可以在一行代碼中完成令人驚訝的工作，簡化您的工作流程并讓您成為同行羨慕的對象。

準備好了嗎？我們現在開始吧。

1. 交換變量

let a = 1, b = 2;
[a, b] = [b, a];
// Result: a = 2, b = 1

拋棄臨時變量！這種優雅的方法使用數組解構直接交換值。

2. 輕松的對象解構

const { name, age } = { name: 'John', age: 23 };
// Result: name = 'John', age = 23

使用解構可以輕松訪問對象屬性。不再需要繁瑣的 object.property 語法！

3. 快速克隆對象

const originalObj = { name: 'John', age: 24 };
const clonedObj = { ...originalObj };
// Result: clonedObj = { name: 'John', age: 24 }
// Modifying clonedObj won't affect originalObj

擴展運算符 (...) 是快速輕松克隆對象的秘密武器。

4. 優雅地合并對象

const obj1 = { name: 'John' };
const obj2 = { age: 22 };
const mergedObj = { ...obj1, ...obj2 };
// Result: mergedObj = { name: 'John', age: 22 }

合并對象變得更加順暢。請記住，如果有重疊，后面的屬性將覆蓋前面的屬性。

5. 像專業人士一樣清理數組

const arr = [ 0, 1, false, 2, '', 3 ];
const cleanedArray = arr.filter(Boolean);
// Result: cleanedArray = [1, 2, 3]

使用 .filter(Boolean) 告別不需要的假值。這就像魔術一樣，但效果更好！

6. 輕松將 NodeList 轉換為數組

const nodesArray = [ ...document.querySelectorAll('div') ];

使用擴展運算符將 NodeList 轉換為數組，釋放數組方法的強大功能。

7. 輕松檢查數組條件

const arr = [ 1, 2, 3, -5, 4 ];
const hasNegativeNumbers = arr.some(num => num < 0); 
// Result: hasNegativeNumbers = true


const allPositive = arr.every(num => num > 0);
// Result: allPositive = false

使用 .some() 檢查是否有任何元素符合條件，使用 .every() 檢查所有元素是否符合條件。

8. 立即將文本復制到剪貼板

navigator.clipboard.writeText('Text to copy');

使用剪貼板 API 為用戶提供無縫復制體驗。現代而高效！（請考慮瀏覽器兼容性。）

9. 消除重復數組值

const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)];
// Result: unique = [1, 2, 3, 4, 5]

創建集合以輕松刪除重復項。簡潔而優雅。

寫在最后

以上就是我今天與你分享的9個實用單行代碼片段，希望對你有用。

責任編輯：華軒來源： web前端開發

JavaScript 編程開發