高級前端開發需要知道的 25 個 JavaScript 單行代碼

1. 不使用臨時變數來交換變數的值

例如我們想要將 a 於 b 的值交換

let a = 1, b = 2;

// 交換值
[a, b] = [b, a];

// 結果: a = 2, b = 1

這行代碼使用數組解構賦值的方式來交換兩個變數的值，無需定義新的臨時變數。這個巧妙的技巧可讓代碼看起來更簡潔明瞭。語法[a, b] = [b, a]通過解構右側的數組並將其分配給左側來實現交換它們的值。

2. 對象解構，讓數據訪問更便捷

const { name, age } = { name: '張三', age: 23 };

// 結果: name = '張三', age = 23

這裡使用對象解構賦值的方式將對象中的屬性直接提取到新的變數中。這種方法簡化了訪問對象屬性的過程，並增強了代碼的可讀性。

3. 淺克隆對象

const originalObj = { name: '張三', age: 24 };

const clonedObj = { ...originalObj };

// 結果: clonedObj = { name: '張三', age: 24 }
// 此時改變 clonedObj 的屬性，將不會影響到原始對象 originalObj

通過使用擴展運算符 ( ...) 創建originalObj的淺克隆對象。此技術將所有可枚舉的自身屬性從原始對象複製到新對象。

4. 合併對象

const obj1 = { name: '張三' };
const obj2 = { age: 22 };

const mergedObj = { ...obj1, ...obj2 };

// 結果: mergedObj = { name: '張三', age: 22 }

與克隆類似，通過擴展運算符將obj1和合併obj2為一個新的對象。如果有重疊的屬性，則最後一個對象的屬性將覆蓋前一個對象的屬性。

5. 清理數組

const arr = [ 0, 1, false, 2, '', 3 ];

const cleanedArray = arr.filter(Boolean);

// 結果: cleanedArray = [1, 2, 3]

通過Array.prototype.filter()函數並使用Boolean函數作為回調。它將會從數組中刪除所有假值（ 0，false，null，undefined，''，NaN）。

6. 將 NodeList 轉換為數組

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

通過擴展運算符將NodeList( document.querySelectorAll函數的返回值) 轉換為 JavaScript 數組，從而能夠使用數組的map方法filter去操作查找到的元素。

7. 檢查數組是否滿足指定條件

例如我們要判斷一個數組中是否存在負數

const arr = [ 1, 2, 3, -5, 4 ];

// 數組中是否有負數
const hasNegativeNumbers = arr.some(num => num < 0);

// 結果: hasNegativeNumbers = true

Array.prototype.some()函數用於檢查數組中是否至少有一個元素，通過所提供的回調函數實現的測試（此處判斷是否是負數，返回true表示通過）

另外，還可以使用Array.prototype.every()來檢查數組的所有元素是否全部通過測試（此處判斷是否是正數）

const arr = [ 1, 2, 3, -5, 4 ];

// 數組元素是否全部為正
const allPositive = arr.every(num => num > 0);

// 結果: allPositive = false

8. 將文本複製到剪貼板

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

通過使用 Clipboard API 以編程方式將文本複製到剪貼板。這是一種最新的複製方法，可讓文本複製變得無縫且高效（但目前各大瀏覽器支持度還不是很高，需要考慮相容性問題）。

9. 刪除數組重覆項

const arr = [1, 2, 2, 3, 4, 4, 5];

const unique = [...new Set(arr)];

// 結果: unique = [1, 2, 3, 4, 5]

這裡利用了Set對象存儲的值會保持唯一，以及擴展運算符能將Set轉換回數組的特性。這是一種優雅的刪除數組中重覆項的方式。

10. 取兩個數組的交集

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6, 8];

// 取兩個數組中公共的元素
const intersection = arr1.filter(value => arr2.includes(value));

// 結果: intersection = [2, 4]

此示例通過使用Array.prototype.filter()函數去查找arr1與arr2中的公共元素。傳入的回調函數會檢查arr2是否包含arr1的每一個元素，從而得到兩個數組的交集。

可以在這線上運行上述演示代碼

11. 求數組元素的總和

const arr = [1, 2, 3, 4];

// 求總和
const sum = arr.reduce((total, value) => total + value, 0);

// 結果: sum = 10

此示例使用Array.prototype.reduce()方法將數組中所有的值全部累加起來。reduce方法接收一個回調函數和一個初始值（即前一個回調函數累加值的初始值），這個回調函數有兩個參數：累加值total和當前值value。它將會遍曆數組所有元素，將每個元素添加到總和中（總和初始為0）。

12. 根據指定條件判斷，是否給對象的屬性賦值

const condition = true;
const value = '你好，世界';

// 如果條件為真，則將 value 變數的值賦給 newObject.key 屬性
const newObject = {...(condition && {key: value})};

// 結果: newObject = { key: '你好，世界' }

此案例使用擴展運算符 (...) 與短路求值(&&)，將屬性有條件地添加到對象中。 如果condition為真，則會將{key: value}擴展到對象中；否則不進行任何操作。

13. 使用變數作為對象的鍵

const dynamicKey = 'name';
const value = '張三';

// 使用一個動態的變數作為 key
const obj = {[dynamicKey]: value};

// 結果: obj = { name: '張三' }

這種語法稱為計算屬性名，它允許使用變數作為對象的鍵。方括弧內的dynamicKey表達式會計算其值，以將其用作屬性名稱。

14. 離線狀態檢查器

const isOnline = navigator.onLine ? '線上' : '離線';

// 結果: isOnline = '線上' 或 '離線'

這段代碼使用三元運算符檢查瀏覽器的線上狀態(navigator.onLine)，如果為真則返回'線上'，否則返回'離線'。這是一種動態檢查用戶網路連接狀態的方法。

15. 離開頁面彈出確認對話框

window.onbeforeunload = () => '你確定要離開嗎？';

這行代碼與window的onbeforeunload事件掛鉤，當用戶離開頁面時會彈出一個確認對話框，一般用於防止用戶因未保存更改就關閉頁面而導致數據丟失。

16. 對象數組，根據對象的某個key求對應值的總和

const arrayOfObjects = [{x: 1}, {x: 2}, {x: 3}];

// 指定要求和的 key值
const sumBy = (arr, key) => arr.reduce((acc, obj) => acc + obj[key], 0);

// 傳入 'x'，求元素對象 key 為 'x' 的值的總和
sumBy(arrayOfObjects, 'x'));

// 結果: 6

sumBy函數使用Array.prototype.reduce()對數組中元素特定鍵的值求和。這是一種根據給定鍵計算對象數組總和的靈活方法。

17. 將 url 問號後面的查詢字元串轉為對象

const query = 'name=John&age=30';

// 將字元串解析為對象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));

// 結果: parseQuery = { name: 'John', age: '30' }

此示例將一個查詢字元串轉換為了一個對象。其中URLSearchParams會進行字元串解析，它將返回一個可迭代對象，然後在通過Object.fromEntries將它轉換為對象，從而使 URL 參數檢索變得方便多了。

18. 將秒數轉換為時間格式的字元串

const seconds = 3661; // 一小時是 3600 秒，多出 61 秒

const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);

toTimeString(seconds));

// 結果: '01:01:01'

此示例將秒數轉換為 HH:MM:SS 格式的字元串。它通過給定的秒數加上時間戳起始點來創建一個新的 Date 對象，然後將其轉換為 ISO 字元串，並提取時間部分得到結果。

19. 求某對象所有屬性值的最大值

// 數學、語文、英語成績
const scores = { math: 95, chinese: 99, english: 88 };

const maxObjectValue = obj => Math.max(...Object.values(obj));

// 最高分
maxObjectValue(scores));

// 結果: 99

此示例用於在對象所有的屬性值中找到最大值。其中Object.values(obj)將對象所有的屬性值提取為數組，然後使用展開運算符將數組的所有元素作為Math.max函數的參數進行最大值查找。

20. 判斷對象的值中是否包含有某個值

const person = { name: '張三', age: 30 };

const hasValue = (obj, value) => Object.values(obj).includes(value);

hasValue(person, 30);

// 結果: true

hasValue函數會檢查對象的值中是否存在指定的值。其中Object.values(obj)用於獲取對象中所有的值的數組，然後通過includes(value)檢查指定值是否在該數組中。

21. 安全訪問深度嵌套的對象屬性

const user = { profile: { name: '張三' } };

const userName = user.profile?.name ?? '匿名';

// 結果: userName = '張三'

此代碼首先演示瞭如何使用可選鏈運算符 (?.) 安全地訪問user.profile的name值。如果user.profile是undefined或null，它會短路並返回undefined，從而避免潛在的類型錯誤TypeError。

然後，使用空值合併運算符 (??) 檢查左側是否為null或undefined，如果是，則使用預設值'匿名'。這可確保後備值不會是其他假值（如''或0）。這對於訪問數據結構中可能不存在某些中間屬性的深層嵌套屬性非常有用。

在 JavaScript 中，空值合併運算符 (??) 和邏輯或 (||) 都可以用於提供預設值，但它們處理假值的方式有所不同。

在上面的例子中，如果把??改為||，行為會稍微有些不同。||的左側如果為假值，它將會返回右側的值。JavaScript 中的假值包括null、undefined、0、NaN、''（空字元串）和false。這意味著||左邊的值不僅僅是null或undefined，如果還是其他假值，那麼都將返回右側的值。

22. 條件執行語句

const isEligible = true;

isEligible && performAction();

// 如果 isEligible 為真，則調用 performAction()

利用邏輯 AND ( &&) 運算符，函數performAction()僅會在isEligible結果為true時執行。這是一種無需if語句即可有條件地執行函數的簡介語法。這對於根據某些條件執行函數非常有用，尤其是在事件處理或回調中。

如果想要條件賦值，則可以這樣寫

const isEligible = true;
let value = '';

// 需要將賦值語句用用括弧括起來
isEligible && (value = '條件達成');

// 如果 isEligible 為真，則執行 (value = '條件達成') 語句

23. 創建包含值為指定數字範圍的數組

例如創建數字5以內所有正數的數組

const range = Array.from({ length: 5 }, (_, i) => i + 1);

// 結果: range = [1, 2, 3, 4, 5]

Array.from()從類數組或可迭代對象創建一個新數組。這裡，它接受一個具有屬性length和映射函數的對象。映射函數 ( (_, i) => i + 1) 使用索引 ( i) 生成從 1 到 5 的數字。下劃線 ( _) 是一種慣例，表示未使用該參數。

24. 提取文件擴展名

const fileName = 'example.png';

const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);

// 結果: getFileExtension = 'png'

這個案例實現了從字元串中提取文件擴展名。它先找到最後一次出現點號 (.) 位置，然後截取從該位置到末尾的字元串。位運算符 (>>>) 確保了即使未找到點號 (.) ，操作也是安全的，因為在這種情況下仍然會返回一個空字元串。

25. 切換元素的 class

const element = document.querySelector('.my-element');

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(element, 'active');

toggleClass函數使用classList.toggle()方法從一個元素的 class 列表中添加或移除某個 class。如果該 class 存在，則刪除，否則添加。這是一種根據用戶交互或應用程式狀態動態更新 class 的方法。非常適合實現響應式設計元素，例如菜單根據用戶操作顯示或隱藏。

以上 25 個 JavaScript 單行代碼，以簡短高效的方式提供強大的功能。希望您今天能有所收穫！

線上運行上述演示代碼