&

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

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

js復(fù)制代碼let a = 1, b = 2;  // 交換值 [a, b] = [b, a];  // 結(jié)果: a = 2, b = 1

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

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

js復(fù)制代碼const { name, age } = { name: '張三', age: 23 };  // 結(jié)果: name = '張三', age = 23

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

3. 淺克隆對象

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

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

4. 合并對象

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

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

5. 清理數(shù)組

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

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

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

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

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

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

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

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

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

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

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

8. 將文本復(fù)制到剪貼板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

js復(fù)制代碼const isOnline = navigator.onLine ? '在線' : '離線';  // 結(jié)果: isOnline = '在線' 或 '離線'

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

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

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

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

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

js復(fù)制代碼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'));  // 結(jié)果: 6

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

17. 將 url 問號后面的查詢字符串轉(zhuǎn)為對象

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

js復(fù)制代碼const range = Array.from({ length: 5 }, (_, i) => i + 1);  // 結(jié)果: 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復(fù)制代碼const fileName = 'example.png';  const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);  // 結(jié)果: getFileExtension = 'png'

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

25. 切換元素的 class

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

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

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