45 個開發人員都應該知道的 JavaScript 超級實用技巧
JavaScript 是一種功能強大的語言，對于現代 Web 開發至關重要。今天我將分享一些超級實用的JavaScript技巧，它們將使你成為更高效、更有效的 JavaScript 開發人員，每個技巧都有詳細的解釋和示例。
1. 使用 `let` 和 `const` 代替 `var`
問題：`var` 具有函數作用域，這可能導致錯誤和不可預測的行為。
解決方案：使用具有塊作用域的 `let` 和 `const`。
let count = 0;
const PI = 3.14;使用 `let` 和 `const` 有助于防止與作用域相關的錯誤，因為它確保變量只能在定義的塊內訪問。
2. 默認參數
問題：如果沒有提供參數，函數可能會失敗。
解決方案：使用默認參數設置后備值。
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"默認參數確保函數具有合理的默認值，從而防止錯誤并使代碼更加健壯。
3. 模板文字
問題：字符串連接可能很麻煩且容易出錯。
解決方案：使用模板文字進行更清晰、更易讀的字符串插值。
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"模板文字使創建帶有嵌入表達式和多行字符串的字符串變得更加容易。
4. 解構賦值
問題：從對象和數組中提取值可能非常冗長。
解決方案：使用解構賦值更簡潔地提取值。
const user = { name: 'Jane', age: 25 };
const { name, age } = user;
console.log(name, age); // "Jane" 25解構賦值允許你輕松地將對象中的屬性和數組中的元素提取到不同的變量中。
5. 箭頭函數
問題：傳統函數表達式可能很冗長，并且不會在詞匯上綁定“this”。
解決方案：使用箭頭函數來實現更短的語法和詞匯“this”。
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5箭頭函數為函數表達式提供了簡潔的語法，并確保 `this` 在詞匯上是綁定的。
6. 擴展運算符
問題：組合數組或對象可能很麻煩。
解決方案：使用擴展運算符可以輕松組合數組和對象。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]擴展運算符允許你將一個數組或對象的元素擴展到另一個數組或對象中。
7. 剩余參數
問題：處理可變數量的函數參數可能很棘手。
解決方案：使用剩余參數捕獲數組中的所有參數。
function sum(…args) {
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10剩余參數允許你將無限數量的參數作為數組處理，從而使你的函數更加靈活。
8. 短路求值
問題：編寫條件語句可能很冗長。
解決方案：使用短路求值編寫簡潔的條件。
const isLoggedIn = true;
const user = isLoggedIn && { name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }短路求值使用邏輯運算符 `&&` 和 `||` 來簡化條件表達式。
9. 可選鏈
問題：如果鏈中的任何部分為 `null` 或 `undefined`，則訪問深層嵌套的屬性可能會導致錯誤。
解決方案：使用可選鏈安全地訪問嵌套屬性。
const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"可選鏈式連接允許你安全地訪問嵌套屬性，而無需明確檢查鏈式連接的每一級是否為 `null` 或 `undefined`。
10. 空值合并
問題：如果值為 `0` 或 `””`，則使用 `||` 提供默認值可能會產生意外結果。
解決方案：僅在 `null` 或 `undefined` 時使用空值合并 (`??`) 提供默認值。
const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0空值合并僅允許在左側為“null”或“undefined”時提供默認值。
11. 對象屬性簡寫
問題：將變量分配給對象屬性可能會重復。
解決方案：使用屬性簡寫來簡化對象創建。
const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }屬性簡寫允許你在屬性名稱與變量名稱匹配時省略屬性名稱，從而使代碼更簡潔。
12. 動態屬性名稱
問題：使用動態屬性名稱創建對象可能很冗長。
解決方案：使用計算屬性名稱動態創建對象屬性。
const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }計算屬性名稱允許你動態創建對象屬性，使用表達式的值作為屬性名稱。
13. 數組 `map()`、`filter()` 和 `reduce()`
問題：迭代數組以轉換、過濾或累積值可能會重復。
解決方案：使用 `map()`、`filter()` 和 `reduce()` 進行常見的數組操作。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15這些數組方法提供了一種轉換、過濾和減少數組的函數式方法，使你的代碼更具表現力和簡潔性。
14. 字符串 `includes()`、`startsWith()` 和 `endsWith()`
問題：檢查字符串是否包含、以子字符串開頭或以子字符串結尾可能很冗長。
解決方案：使用 `includes()`、`startsWith()` 和 `endsWith()` 進行更簡單的字符串檢查。
const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true這些字符串方法提供了一種簡單易讀的方法來檢查子字符串的存在、開始或結束。
15. 函數參數中的數組和對象解構
問題：從作為函數參數傳遞的數組或對象中提取值可能很冗長。
解決方案：在函數參數中使用解構來直接提取值。
const user = { name: 'Jane', age: 25 };
function greet({ name, age }) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet(user)); // "Hello, Jane! You are 25 years old."函數參數中的解構允許你直接從傳遞給函數的對象或數組中提取值，從而使代碼更簡潔、更易讀。
16. 解構中的默認值
問題：解構對象時處理缺失的屬性可能很麻煩。
解決方案：在解構中使用默認值來提供后備值。
const user = { name: 'Jane' };
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18解構中的默認值允許你為可能缺失的屬性提供后備值，從而使你的代碼更加健壯。
17. 對象 `assign()`
問題：克隆或合并對象可能很冗長且容易出錯。
解決方案：使用 `Object.assign()` 克隆或合并對象。
const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2 }`Object.assign()` 允許你高效地克隆或合并對象，從而減少手動復制的需要。
18. 數組 `find()` 和 `findIndex()`
問題：使用循環在數組中查找元素或其索引可能很麻煩。
解決方案：使用 `find()` 和 `findIndex()` 使代碼更易讀。
const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
const user = users.find(u => u.id === 1);
console.log(user); // { id: 1, name: 'Jane' }
const index = users.findIndex(u => u.id === 1);
console.log(index); // 0這些數組方法提供了一種根據條件查找元素或其索引的簡單方法，從而提高了代碼的可讀性。
19. 數組 `some()` 和 `every()`
問題：檢查數組中的部分或全部元素是否滿足條件可能會很冗長。
解決方案：使用 `some()` 和 `every()` 來獲得更簡潔的代碼。
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false這些數組方法允許你以簡潔的方式檢查數組中的部分或全部元素是否滿足條件。
20. 數組 `flat()` 和 `flatMap()`
問題：展平嵌套數組或映射和展平數組可能很麻煩。
解決方案：使用 `flat()` 和 `flatMap()` 使代碼更易讀。
const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(2);
console.log(flat); // [1, 2, 3, [4]]
const mapped = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]這些數組方法提供了一種簡單的方法來展平嵌套數組，并在一個步驟中映射和展平。
21. 數組 `from()` 和 `of()`
問題：從可迭代對象或參數創建數組可能很冗長。
解決方案：使用 `Array.from()` 和 `Array.of()` 獲得更簡潔的代碼。
const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
const arrOfNumbers = Array.of(1, 2, 3);
console.log(arrOfNumbers); // [1, 2, 3]`Array.from()` 允許你從可迭代對象創建數組，而 `Array.of()` 允許你從參數列表創建數組。
22. 回調中的參數解構
問題：訪問傳遞給回調的對象的屬性可能很冗長。
解決方案：在回調參數中使用解構以獲得更簡潔的代碼。
const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
users.forEach(({ id, name }) => {
console.log(`User ID: ${id}, User Name: ${name}`);
});回調參數中的解構允許你直接訪問傳遞給回調的對象的屬性，從而使代碼更簡潔。
23. 可選回調函數
問題：處理可選回調函數可能很麻煩。
解決方案：使用短路求值來調用可選回調。
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => {
callback && callback(data);
});
}短路求值允許您僅在提供可選回調函數時才調用該函數，從而使代碼更加健壯。
24. Promisify 回調
問題：將基于回調的函數轉換為promises可能很麻煩。
解決方案：使用實用函數來 promisify 回調。
function promisify(fn) {
return function (…args) {
return new Promise((resolve, reject) => {
fn(…args, (err, result) => {
if (err) reject(err);
else resolve(result);
});
});
};
}
const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
.then(data => console.log(data))
.catch(err => console.error(err));Promisifying 允許你將基于回調的函數轉換為promises，從而更輕松地使用 async/await 語法。
25. 用于類似同步代碼的 Async/Await
問題：使用promises編寫異步代碼可能冗長且難以閱讀。
解決方案：使用 async/await 以同步風格編寫異步代碼。
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData('https://api.example.com/data');Async/await 提供了一種編寫外觀和行為都像同步代碼的異步代碼的方法，從而提高了可讀性和可維護性。
26. 鏈接承諾
問題：按順序處理多個異步操作可能很麻煩。
解決方案：鏈式承諾處理多個異步操作。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data:', data);
return fetch('https://api.example.com/more-data');
})
.then(response => response.json())
.then(moreData => {
console.log('More Data:', moreData);
})
.catch(error => {
console.error('Error:', error);
});鏈接 Promise 可讓你按順序處理多個異步操作，從而提高可讀性和可維護性。
27. Promise.all 用于并發執行
問題：同時處理多個異步操作可能具有挑戰性。
解決方案：使用 `Promise.all` 來處理并發異步操作。
const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());
Promise.all([fetchData1, fetchData2])
.then(([data1, data2]) => {
console.log('Data 1:', data1);
console.log('Data 2:', data2);
})
.catch(error => {
console.error('Error:', error);
});`Promise.all` 允許你同時處理多個異步操作，并在所有操作完成后繼續執行。
28. 防抖動函數
問題：頻繁的函數調用（例如在窗口調整大小事件期間）會降低性能。
解決方案：使用防抖動函數來限制函數執行的速率。
function debounce(func, wait) {
let timeout;
return function (…args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Window resized');
}, 200));防抖動函數可確保函數僅在一段時間不活動后才被調用，從而提高性能。
29. 節流閥函數
問題：限制頻繁觸發的事件（如滾動或調整大?。┑暮瘮祱绦兴俾省?/span>
解決方案：使用節流閥函數來限制函數的執行速率。
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function (…args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Window scrolled');
}, 200));節流函數可確保在指定時間段內最多只調用一次函數，從而提高頻繁觸發事件的性能。
30. 深度克隆對象
問題：克隆嵌套對象可能很棘手且容易出錯。
解決方案：使用結構化克隆或 Lodash 等庫來深度克隆對象。
const obj = { a: 1, b: { c: 2 } };
const deepClone = JSON.parse(JSON.stringify(obj));
console.log(deepClone); // { a: 1, b: { c: 2 } }深度克隆確保嵌套對象按值復制，而不是按引用復制，從而防止對原始對象進行意外修改。
31. 記憶化
問題：反復調用昂貴的函數會降低性能。
解決方案：使用記憶化來緩存昂貴的函數調用的結果。
function memoize(func) {
const cache = new Map();
return function (…args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = func.apply(this, args);
cache.set(key, result);
return result;
};
}
const expensiveFunction = memoize((num) => {
console.log('Computing…');
return num * 2;
});
console.log(expensiveFunction(2)); // "Comput
ing…" 4
console.log(expensiveFunction(2)); // 4記憶化通過緩存昂貴的函數調用結果并返回緩存的結果以供后續具有相同參數的調用來提高性能。
32. 柯里化函數
問題：創建具有多個參數的函數可能很麻煩。
解決方案：使用柯里化創建具有部分應用參數的函數。
function curry(func) {
return function curried(…args) {
if (args.length >= func.length) {
return func.apply(this, args);
}
return function (…nextArgs) {
return curried.apply(this, args.concat(nextArgs));
};
};
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6通過柯里化，你可以創建可以用較少參數調用的函數，并返回接受其余參數的新函數。
33. 部分應用
問題：調用帶有重復參數的函數可能很繁瑣。
解決方案：使用部分應用將一些參數預先應用于函數。
function partial(func, …presetArgs) {
return function (…laterArgs) {
return func(…presetArgs, …laterArgs);
};
}
const multiply = (a, b, c) => a * b * c;
const double = partial(multiply, 2);
console.log(double(3, 4)); // 24部分應用允許你通過預先應用一些參數來創建新函數，從而使你的代碼更加靈活和可重用。
34. 函數組合
問題：將多個函數組合成一個操作可能很麻煩。
解決方案：使用函數組合來組合多個函數。
const compose = (…funcs) => (arg) =>
funcs.reduceRight((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = compose(multiply, add);
console.log(addThenMultiply(5)); // 12函數組合允許你通過組合多個函數來創建新函數，從而使你的代碼更加模塊化和可重用。
35. 函數流水線
問題：將一系列函數應用于一個值可能會很冗長。
解決方案：使用函數流水線按順序應用一系列函數。
const pipe = (…funcs) => (arg) =>
funcs.reduce((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = pipe(add, multiply);
console.log(addThenMultiply(5)); // 12函數流水線允許你按順序將一系列函數應用于一個值，從而提高代碼的可讀性和可維護性。
36. 自調用函數
問題：定義后立即執行函數可能很麻煩。
解決方案：使用立即調用函數表達式 (IIFE)。
(function () {
console.log('This runs immediately!');
})();IIFE 允許你在定義后立即執行函數，這對于創建隔離范圍和避免污染全局命名空間非常有用。
37. 避免使用全局變量
問題：全局變量可能導致沖突和意外的副作用。
解決方案：使用局部變量和模塊來避免污染全局命名空間。
// Using local variables
function doSomething() {
let localVariable = 'This is local';
console.log(localVariable);
}
// Using modules
const myModule = (function () {
let privateVariable = 'This is private';
return {
publicMethod() {
console.log(privateVariable);
},
};
})();
myModule.publicMethod(); // "This is private"避免使用全局變量有助于防止沖突和意外副作用，從而使你的代碼更加模塊化和易于維護。
38. 使用閉包進行封裝
問題：暴露函數的內部細節可能會導致誤用。
解決方案：使用閉包封裝內部細節。
function createCounter() {
let count = 0;
return {
increment() {
count++;
return count;
},
decrement() {
count - ;
return count;
},
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1閉包允許你封裝內部細節并僅公開必要的功能，從而提高代碼的安全性和可維護性。
39. 模塊模式
問題：將代碼組織成可重用的模塊可能具有挑戰性。
解決方案：使用模塊模式創建可重用和封裝的代碼。
const myModule = (function () {
let privateVariable = 'This is private';
function privateMethod() {
console.log(privateVariable);
}
return {
publicMethod() {
privateMethod();
},
};
})();
myModule.publicMethod(); // "This is private"模塊模式允許你創建可重用和封裝的代碼，從而改善代碼組織和可維護性。
40. 單例模式
問題：確保只創建一個類的實例可能具有挑戰性。
解決方案：使用單例模式創建單個實例。
const singleton = (function () {
let instance;
function createInstance() {
return {
name: 'Singleton Instance',
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
},
};
})();
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();
console.log(instance1 === instance2); // true單例模式確保只創建一個類的實例，這對于管理共享資源或配置很有用。
41. 工廠模式
問題：創建具有復雜初始化的對象可能很麻煩。
解決方案：使用工廠模式創建對象。
function createUser(name, role) {
return {
name,
role,
sayHello() {
console.log(`Hello, my name is ${this.name} and I am a ${this.role}`);
},
};
}
const admin = createUser('Alice', 'admin');
const user = createUser('Bob', 'user');
admin.sayHello(); // "Hello, my name is Alice and I am an admin"
user.sayHello(); // "Hello, my name is Bob and I am a user"工廠模式允許你以靈活且可重用的方式創建具有復雜初始化的對象。
42. 觀察者模式
問題：管理狀態變化和通知多個組件可能具有挑戰性。
解決方案：使用觀察者模式來管理狀態變化并通知觀察者。
function Subject() {
this.observers = [];
}
Subject.prototype = {
subscribe(observer) {
this.observers.push(observer);
},
unsubscribe(observer) {
this.observers = this.observers.filter((obs) => obs !== observer);
},
notify(data) {
this.observers.forEach((observer) => observer.update(data));
},
};
function Observer(name) {
this.name = name;
}
Observer.prototype.update = function (data) {
console.log(`${this.name} received data: ${data}`);
};
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('New data available'); // "Observer 1 received data: New data available" "Observer 2 received data: New data available"觀察者模式允許你管理狀態變化并通知多個觀察者，從而改善代碼組織和可維護性。
43. 事件委托
問題：向多個元素添加事件監聽器會降低性能。
解決方案：使用事件委托有效地管理事件。
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target && event.target.matches('button.className')) {
console.log('Button clicked:', event.target.textContent);
}
});事件委托允許你通過向公共父元素添加單個事件偵聽器并處理多個子元素的事件來有效地管理事件。
44. 避免使用 `eval()`
問題：使用 `eval()` 可能導致安全漏洞和性能問題。
解決方案：避免使用 `eval()` 并使用更安全的替代方案。
// Avoid
const code = 'console.log("Hello, world!")';
eval(code); // "Hello, world!"
// Use safer alternatives
const func = new Function('console.log("Hello, world!")');
func(); // "Hello, world!"避免使用 `eval()` 有助于防止安全漏洞和性能問題，從而使你的代碼更安全、更高效。
45. 使用 `for…of` 進行迭代
問題：使用 `for…in` 迭代數組容易出錯。
解決方案：使用 `for…of` 迭代數組和其他可迭代對象。
const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
console.log(value);
}
// 1
// 2
// 3
// 4
// 5`for…of` 提供了一種簡單而安全的方法
總結
無論你是想要提升技能的經驗豐富的開發人員，還是渴望學習基礎知識的新手，今天內容，我想都能滿足你的需求。深入了解并像專業人士一樣掌握 JavaScript 的秘訣！”
