在日常開(kāi)發(fā)中，JavaScript 是我們繞不開(kāi)的核心語(yǔ)言。無(wú)論你是前端開(kāi)發(fā)、全棧工程師，還是剛?cè)腴T(mén)的初學(xué)者，掌握一些實(shí)用的 JavaScript 技巧，不僅能大幅提升開(kāi)發(fā)效率，還能讓你的代碼更加優(yōu)雅、簡(jiǎn)潔。
下面整理了 50 個(gè)常用且高頻的 JavaScript 技巧，涵蓋數(shù)組、對(duì)象、函數(shù)、DOM 操作等多個(gè)實(shí)戰(zhàn)場(chǎng)景，每個(gè)技巧都配有簡(jiǎn)潔的示例代碼，拿來(lái)就能用，快來(lái)查漏補(bǔ)缺吧！
一.基礎(chǔ)技巧
1.使用??代替||處理 null/undefined
const name = null;console.log(name ?? 'Guest');
2.使用?.安全訪(fǎng)問(wèn)嵌套屬性
const user = {};console.log(user.address?.city);
3.轉(zhuǎn)換為布爾值
const loggedIn = !!user; // true 或 false
4.數(shù)字轉(zhuǎn)字符串 / 字符串轉(zhuǎn)數(shù)字
String(123); Number("456");
5.使用typeof檢查變量類(lèi)型
二、數(shù)組技巧
6.去重?cái)?shù)組
const nested = [1, [2, [3]]];nested.flat(2);
7.查找最大值/最小值
Math.max(...[1, 2, 3]); // 3Math.min(...[1, 2, 3]); // 1
8.打亂數(shù)組順序
const arr = [1, 2, 3];arr.sort(() => Math.random() - 0.5);
9.生成固定長(zhǎng)度數(shù)組
Array.from({ length: 5 }, (_, i) => i + 1);
10.數(shù)組扁平化
const nested = [1, [2, [3]]];nested.flat(2);
11.數(shù)組分組
const groupBy = (arr, fn) => arr.reduce((acc, val) => { const key = fn(val); (acc[key] = acc[key] || []).push(val); return acc; }, {});
三、對(duì)象技巧
12.合并對(duì)象
const merged = { ...obj1, ...obj2 };
13.對(duì)象鍵值互換
const obj = { a: 1, b: 2 };const flipped = Object.fromEntries( Object.entries(obj).map(([k, v]) => [v, k]));
14.從對(duì)象中提取部分屬性
15.動(dòng)態(tài)屬性名
const key = "name";const user = { [key]: "Tom" };
16.刪除對(duì)象中 falsy 值
Object.fromEntries(Object.entries(obj).filter(([k, v]) => v));
四、函數(shù)技巧
17.默認(rèn)參數(shù)
function greet(name = 'Guest') { console.log(`Hello, ${name}`);}
18.箭頭函數(shù)簡(jiǎn)寫(xiě)
const double = x => x * 2;
19.立即執(zhí)行函數(shù)（IIFE）
(() => { console.log("Executed!");})();
20.函數(shù)緩存（記憶化）
const memo = fn => { const cache = {}; return x => cache[x] || (cache[x] = fn(x));};
21.函數(shù)節(jié)流（throttle）
function throttle(fn, delay) { let last = 0; return (...args) => { const now = Date.now(); if (now - last > delay) { last = now; fn(...args); } };}
22.函數(shù)防抖（debounce）
function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); };}
五、時(shí)間處理技巧
23.獲取當(dāng)前時(shí)間戳
24.格式化時(shí)間
new Date().toLocaleString();
25.延遲執(zhí)行
setTimeout(() => console.log("Hi"), 1000);
26.每秒執(zhí)行
const interval = setInterval(() => console.log("Tick"), 1000);clearInterval(interval);
六、字符串操作技巧
27.模板字符串
const msg = `Hello, ${name}`;
28.字符串反轉(zhuǎn)
"hello".split("").reverse().join(""); // "olleh"
29.字符串重復(fù)
"abc".repeat(3); // "abcabcabc"
30.替換所有
"foo foo".replaceAll("foo", "bar"); // "bar bar"
31.檢查字符串開(kāi)頭/結(jié)尾
str.startsWith("Hello");str.endsWith("!");
七、邏輯與運(yùn)算技巧
32.三元表達(dá)式
const status = isActive ? "active" : "inactive";
33.簡(jiǎn)寫(xiě) if
isLoggedIn && showDashboard();
34.短路賦值
35.按位取整
36.指數(shù)操作
八、工具類(lèi)技巧
37.深拷貝對(duì)象
const deepCopy = JSON.parse(JSON.stringify(obj));
38.獲取對(duì)象長(zhǎng)度
39.判斷是否為數(shù)組
40.隨機(jī)字符串
Math.random().toString(36).slice(2);
41.生成唯一 ID
const uuid = () => Date.now().toString(36) + Math.random().toString(36).slice(2);
九、DOM 操作技巧
42.選擇元素
document.querySelector(".btn");
43.添加事件
btn.addEventListener("click", () => alert("Clicked"));
44.創(chuàng)建元素
const el = document.createElement("div");
45.設(shè)置 innerHTML
el.innerHTML = "<p>Hello</p>"
46.設(shè)置樣式
47.操作類(lèi)名
el.classList.add("active");el.classList.remove("hidden");
十、實(shí)用判斷技巧
48.判斷空對(duì)象
Object.keys(obj).length === 0;
49.判斷為空值（null, undefined, ""）
50.判斷是否為數(shù)字
該文章在 2025/6/5 15:12:38 編輯過(guò)
400 186 1886
