20 多個讓你驚嘆的強大 JavaScript 單行代碼
JavaScript 是程序員的游樂場,單行代碼就像魔術一樣——簡短、有趣且功能強大。無論您是在清理代碼還是想給隊友留下深刻印象,這些代碼片段都可以挽救局面。
在這篇文章中,我將分享 20 多個令人驚嘆的 JavaScript 單行代碼,每個代碼都有一個實際示例來展示它們的作用。
讓我們開始吧!
1. 交換兩個變量而無需臨時變量
不再需要處理臨時變量!
let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b); // 10, 5
解構使這種交換變得順暢無比。
2. 在兩個值之間生成一個隨機數
非常適合擲骰子或隨機 ID:
const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;console.log(random(1, 6));
// e.g., 4 (random between 1 and 6)
嘗試一下快速游戲機制!
3. 檢查數字是否為偶數
模數經典:
const isEven = num => num % 2 === 0;
console.log(isEven(8)); // true
console.log(isEven(7)); // false
非常適合過濾或驗證。
4. 從數組中刪除重復項
告別重復:
const unique = arr => [...new Set(arr)];
console.log(unique([1, 2, 2, 3, 3, 4])); // [1, 2, 3, 4]
Set 對象負責完成所有繁重的工作。
5. 展平數組(一層)
解開嵌套數組:
const flat = arr => arr.flat();
console.log(flat([[1, 2], [3, 4]])); // [1, 2, 3, 4]
需要更多層級?使用 flat(2) 實現更深的嵌套。
6. 對數組中的所有數字求和
一次性將其相加:
const sum = arr => arr.reduce((a, b) => a + b, 0);
console.log(sum([1, 2, 3, 4])); // 10
Reduce 是你快速計算的好幫手。
7. 反轉字符串
輕松翻轉文本:
const reverse = str => str.split('').reverse().join('');
console.log(reverse("hello")); // "olleh"
嘗試一下有趣的文字游戲吧!
8. 檢查字符串是否為回文
找出那些鏡像詞:
const isPalindrome = str => str === str.split('').reverse().join('');
console.log(isPalindrome("radar")); // true
console.log(isPalindrome("hello")); // false
字符串挑戰的一個巧妙技巧。
9. 將字符串的首字母大寫
完善您的文本:
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalize("javascript")); // "Javascript"
非常適合用于姓名或頭銜。
10. 獲取數組中的最大值
查找最大數字:
const max = arr => Math.max(...arr);
console.log(max([3, 8, 1, 5])); // 8
擴展運算符讓這一切變得輕而易舉。
11. 獲取數組中的最小值
或者最小值:
const min = arr => Math.min(...arr);
console.log(min([3, 8, 1, 5])); // 1
同樣的技巧,不同的方向。
12. 生成數字數組
即時創建范圍:
const range = n => [...Array(n).keys()];
console.log(range(5)); // [0, 1, 2, 3, 4]
非常適合循環或測試數據。
13. 檢查數組是否為空
沒什么好說的,只是事實:
const isEmpty = arr => arr.length === 0;console.log(isEmpty([])); // true
console.log(isEmpty([1, 2])); // false
快速檢查完整性。
14. 克隆數組
保持原始數組安全:
const clone = arr => [...arr];
const arr = [1, 2, 3];
const copy = clone(arr);
copy.push(4);console.log(arr, copy); // [1, 2, 3], [1, 2, 3, 4]
這里沒有突變!
15. 從數組中選擇一個隨機元素
添加一些不可預測性:
const randomItem = arr => arr[Math.floor(Math.random() * arr.length)];
const fruits = ["apple", "banana", "orange"];
console.log(randomItem(fruits)); // e.g., "banana"
非常適合測驗或隨機排序。
16. 將數組轉換為對象
將對轉換為屬性:
const toObject = arr => Object.fromEntries(arr);
console.log(toObject([["name", "Alice"], ["age", 25]])); // { name: "Alice", age: 25 }
數據轉換非常干凈。
17. 檢查值是否為數字
毫無意外:
const isNumber = val => typeof val === 'number' && !isNaN(val);
console.log(isNumber(42)); // true
console.log(isNumber("42")); // false
保持邏輯嚴密。
18. 截斷字符串
使用樣式縮短:
const truncate = (str, n) => str.length > n ? str.slice(0, n) + '...' : str;
console.log(truncate("Hello world", 5)); // "Hello..."
非常適合預覽或工具提示。
19. 從數組中刪除虛假值
整理您的列表:
const clean = arr => arr.filter(Boolean);
console.log(clean([0, 1, false, 2, '', 3])); // [1, 2, 3]
假值消失!
20. 使用逗號格式化數字
使數字彈出:
const formatNumber = num => num.toLocaleString();
console.log(formatNumber(1234567)); // "1,234,567"
一行中即可讀出統計數據。
21. 消除函數抖動(獎勵!)
平息快速事件:
const debounce = (fn, ms) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), ms); }; };
const log = () => console.log("Clicked!");
const debouncedLog = debounce(log, 300);
debouncedLog(); // Logs "Clicked!" after 300ms, only once if called repeatedly
滾動或輸入處理程序的必備功能。
22. 合并兩個數組
合并和重復數據刪除:
const merge = (arr1, arr2) => [...new Set([...arr1, ...arr2])];
console.log(merge([1, 2], [2, 3])); // [1, 2, 3]
聯合變得簡單。
為什么這些單行代碼很棒
它們減少了冗長的內容,提高了可讀性,讓您專注于有趣的事情。從格式化字符串到馴服數組,它們都能滿足您的需求。