JavaScript 是一種多功能且功能強大的語言，但它也很難掌握。這裡有 20 個 JavaScript 技巧和技巧，每個開發人員都應該了解它們，以便編寫更清晰、更有效率的程式碼並改進他們的開發工作流程。 🌟
請訂閱我的 YouTube 頻道
來支援我的頻道並獲取更多 Web 開發教學。
-
使用
let和const代替var🚫
避免使用var宣告變數。相反，使用let和const來確保區塊作用域並避免提升問題。
例子：
let name = 'John';
const age = 30;-
解構賦值 🌟
解構允許您從陣列中提取值或從物件中提取屬性到不同的變數中。
例子：
const person = { name: 'Jane', age: 25 };
const { name, age } = person;
const numbers = [1, 2, 3];
const [first, second] = numbers;-
範本文字 📜
模板文字提供了將變數和表達式插入字串的簡單方法。
例子：
const name = 'John';
const greeting = `Hello, ${name}!`;-
預設參數🛠️
設定函數參數的預設值以避免undefined錯誤。
例子：
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}-
箭頭函數🎯
箭頭函數提供簡潔的語法並依詞法綁定this值。
例子：
const add = (a, b) => a + b;-
傳播運算子
...🌐
擴充運算子可讓您擴展可迭代物件（如陣列）的元素或物件的屬性。
例子：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const obj1 = { name: 'John' };
const obj2 = { ...obj1, age: 30 };-
休息參數
...🌟
剩餘參數可讓您將不定數量的參數表示為陣列。
例子：
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}-
短路評估 && 和 || 🛠️
對條件式和預設值使用短路求值。
例子：
const user = { name: 'John' };
const name = user.name || 'Guest';
const isAdmin = user.isAdmin && 'Admin';-
物件屬性簡寫 🚀
當屬性名稱和變數名稱相同時，使用簡寫語法建立物件。
例子：
const name = 'John';
const age = 30;
const person = { name, age };-
可選連結
?.🌐
可選連結可讓您安全地存取深層嵌套的屬性，而無需檢查每個引用是否有效。
例子：
const user = { name: 'John', address: { city: 'New York' } };
const city = user.address?.city;-
空合併
??🌟
空合併 ( ?? ) 提供了一種在左側運算元為null或undefined時傳回右側運算元的方法。
例子：
const user = { name: 'John' };
const name = user.name ?? 'Guest';-
陣列方法：map()、filter()、reduce() 🛠️
使用map() 、 filter()和reduce()等陣列方法以函數方式對陣列執行常見運算。
例子：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);-
Promise 鍊和非同步/等待 🎯
使用 Promises 和 async/await 語法處理非同步操作，以獲得更清晰、更易讀的程式碼。
承諾範例：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));異步/等待範例：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}-
去抖動和節流 🌟
透過對頻繁呼叫的函數（例如在滾動或調整大小事件期間）進行去抖動和限制來優化效能。
去抖範例：
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Resized');
}, 300));節流範例：
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Scrolled');
}, 300));-
使用
for...of進行迭代 🚀
使用for...of循環對陣列、字串和其他可迭代物件進行更易讀的迭代。
例子：
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}-
克隆物件和陣列🛠️
使用展開運算子或Object.assign()複製物件和陣列。
例子：
const original = { name: 'John', age: 30 };
const clone = { ...original };
const arr = [1, 2, 3];
const arrClone = [...arr];-
動態屬性名稱🌟
使用計算屬性名稱動態設定物件屬性。
例子：
const propName = 'age';
const person = {
name: 'John',
[propName]: 30
};-
使用
setTimeout和setInterval🎯
使用setTimeout和setInterval安排程式碼執行。
例子：
setTimeout(() => {
console.log('This runs after 2 seconds');
}, 2000);
const intervalId = setInterval(() => {
console.log('This runs every 3 seconds');
}, 3000);
// To clear the interval
clearInterval(intervalId);-
字串方法：includes()、startsWith()、endsWith() 📜
使用現代字串方法執行常見的字串操作。
例子：
const str = 'Hello, World!';
console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true20.有效使用console進行除錯🛠️
利用各種console方法進行更有效的除錯。
例子：
console.log('Simple log');
console.warn('This is a warning');
console.error('This is an error');
console.table([{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]);
console.group('Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();掌握這些 JavaScript 技巧和技巧將幫助您編寫更清晰、更有效率的程式碼並改善您的開發工作流程。快樂編碼！ ✨
原文出處：https://dev.to/dipakahirav/top-20-javascript-tricks-and-tips-for-every-developer-3apb
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式