高階前端開發需要知道的 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的每一個元素，從而得到兩個陣列的交集。

可以在這線上執行上述演示程式碼

筆COOL，一個功能完備前端作品分享平臺、使用便捷的線上HTML/CSS/JS程式碼編輯器，實時執行​

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 單行程式碼，以簡短高效的方式提供強大的功能。希望您今天能有所收穫！

線上執行上述演示程式碼

筆COOL，一個功能完備前端作品分享平臺、使用便捷的線上HTML/CSS/JS程式碼編輯器