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

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

js復制代碼let a = 1, b = 2;  // 交換值 [a, b] = [b, a];  // 結果: a = 2, b = 1 

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

2. 對象解構，讓數(shù)據訪問更便捷

js復制代碼const { name, age } = { name: '張三', age: 23 };  // 結果: name = '張三', age = 23 

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

3. 淺克隆對象

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

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

4. 合并對象

js復制代碼const obj1 = { name: '張三' }; const obj2 = { age: 22 };  const mergedObj = { ...obj1, ...obj2 };  // 結果: mergedObj = { name: '張三', age: 22 } 

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

5. 清理數(shù)組

js復制代碼const arr = [ 0, 1, false, 2, '', 3 ];  const cleanedArray = arr.filter(Boolean);  // 結果: cleanedArray = [1, 2, 3] 

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

6. 將 NodeList 轉換為數(shù)組

js復制代碼const nodesArray = [ ...document.querySelectorAll('div') ]; 

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

7. 檢查數(shù)組是否滿足指定條件

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

js復制代碼const arr = [ 1, 2, 3, -5, 4 ];  // 數(shù)組中是否有負數(shù) const hasNegativeNumbers = arr.some(num => num < 0);  // 結果: hasNegativeNumbers = true 

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

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

js復制代碼const arr = [ 1, 2, 3, -5, 4 ];  // 數(shù)組元素是否全部為正 const allPositive = arr.every(num => num > 0);  // 結果: allPositive = false 

8. 將文本復制到剪貼板

js復制代碼navigator.clipboard.writeText('Text to copy'); 

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

9. 刪除數(shù)組重復項

js復制代碼const arr = [1, 2, 2, 3, 4, 4, 5];  const unique = [...new Set(arr)];  // 結果: unique = [1, 2, 3, 4, 5] 

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

10. 取兩個數(shù)組的交集

js復制代碼const arr1 = [1, 2, 3, 4]; const arr2 = [2, 4, 6, 8];  // 取兩個數(shù)組中公共的元素 const intersection = arr1.filter(value => arr2.includes(value));  // 結果: intersection = [2, 4] 

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

可以在筆COOL上運行上述演示代碼

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

11. 求數(shù)組元素的總和

js復制代碼const arr = [1, 2, 3, 4];  // 求總和 const sum = arr.reduce((total, value) => total + value, 0);  // 結果: sum = 10 

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

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

js復制代碼const condition = true; const value = '你好，世界';  // 如果條件為真，則將 value 變量的值賦給 newObject.key 屬性 const newObject = {...(condition && {key: value})};  // 結果: newObject = { key: '你好，世界' } 

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

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

js復制代碼const dynamicKey = 'name'; const value = '張三';  // 使用一個動態(tài)的變量作為 key const obj = {[dynamicKey]: value};  // 結果: obj = { name: '張三' } 

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

14. 離線狀態(tài)檢查器

js復制代碼const isOnline = navigator.onLine ? '在線' : '離線';  // 結果: isOnline = '在線' 或 '離線' 

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

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

js復制代碼window.onbeforeunload = () => '你確定要離開嗎？'; 

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

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

js復制代碼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函數(shù)使用Array.prototype.reduce()對數(shù)組中元素特定鍵的值求和。這是一種根據給定鍵計算對象數(shù)組總和的靈活方法。

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

js復制代碼const query = 'name=John&age=30';  // 將字符串解析為對象 const parseQuery = query => Object.fromEntries(new URLSearchParams(query));  // 結果: parseQuery = { name: 'John', age: '30' } 

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

18. 將秒數(shù)轉換為時間格式的字符串

js復制代碼const seconds = 3661; // 一小時是 3600 秒，多出 61 秒  const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);  toTimeString(seconds));  // 結果: '01:01:01' 

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

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

js復制代碼// 數(shù)學、語文、英語成績 const scores = { math: 95, chinese: 99, english: 88 };  const maxObjectValue = obj => Math.max(...Object.values(obj));  // 最高分 maxObjectValue(scores));  // 結果: 99 

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

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

js復制代碼const person = { name: '張三', age: 30 };  const hasValue = (obj, value) => Object.values(obj).includes(value);  hasValue(person, 30);  // 結果: true 

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

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

js復制代碼const user = { profile: { name: '張三' } };  const userName = user.profile?.name ?? '匿名';  // 結果: userName = '張三' 

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

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

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

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

22. 條件執(zhí)行語句

js復制代碼const isEligible = true;  isEligible && performAction();  // 如果 isEligible 為真，則調用 performAction() 

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

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

js復制代碼const isEligible = true; let value = '';  // 需要將賦值語句用用括號括起來 isEligible && (value = '條件達成');  // 如果 isEligible 為真，則執(zhí)行 (value = '條件達成') 語句 

23. 創(chuàng)建包含值為指定數(shù)字范圍的數(shù)組

例如創(chuàng)建數(shù)字5以內所有正數(shù)的數(shù)組

js復制代碼const range = Array.from({ length: 5 }, (_, i) => i + 1);  // 結果: range = [1, 2, 3, 4, 5] 

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

24. 提取文件擴展名

js復制代碼const fileName = 'example.png';  const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);  // 結果: getFileExtension = 'png' 

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

25. 切換元素的 class

js復制代碼const element = document.querySelector('.my-element');  const toggleClass = (el, className) => el.classList.toggle(className);  toggleClass(element, 'active'); 

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

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

在筆COOL上運行上述演示代碼

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