JavaScript是一種強大、靈活的語言，了解一些很酷的技巧可以讓您的程式碼更乾淨、更快、更有效率。以下是 20 個實用的 JavaScript 提示和技巧，您可以在實際應用程式中使用它們來增強您的開發流程。
1.一步解構重命名
您可以在物件解構期間重命名變數，這在存在命名衝突時很有用。
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 252.函數呼叫的可選連結
可選鏈可以與函數一起使用，確保函數在呼叫之前存在。
const user = {
getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined3.使用||=運算子進行預設賦值
只有當變數為null或undefined或錯誤值（如0時，邏輯或賦值 ( ||= ) 才會賦值。
let count;
count ||= 10;
console.log(count); // 104.使用 Spread 運算子將 NodeList 轉換為陣列
擴充運算子提供了一種將NodeList轉換為陣列的快速方法。
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true5.使用預設值的陣列/物件解構
在解構期間分配預設值以避免鍵遺失時undefined 。
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 256.從陣列中刪除假值
使用filter()從陣列中刪除falsy值（例如0 、 null 、 undefined 、 false ）。
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]7.依屬性對物件陣列進行排序
依特定屬性輕鬆對物件陣列進行排序。
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]8.延遲載入的動態導入
動態導入可讓您僅在需要時載入模組，從而減少初始載入時間。
const loadModule = async () => {
const module = await import('./myModule.js');
module.default(); // Calls the default export function
};
loadModule();9.物件解構的預設參數
使用預設參數時，您也可以解構並設定特定屬性的預設值。
function createUser({ name = 'Guest', age = 18 } = {}) {
console.log(name, age);
}
createUser(); // Guest 18
createUser({ name: 'Alice' }); // Alice 1810.使用Object.assign()進行淺複製
Object.assign()對於淺複製物件而不更改原始物件非常方便。
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged)在 github 上關注我：
https://github.com/jagroop2001
11.記憶函數以提高表現
記憶化根據參數快取昂貴的函數呼叫的結果，這對於計算量大的函數很有用。
const memoize = (fn) => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)12.使用reduce對陣列項進行分組
reduce()可以根據資料處理中經常需要的屬性對陣列項進行分組。
const people = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
(acc[person.role] = acc[person.role] || []).push(person);
return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }13.使用Array.flat(Infinity)展平嵌套陣列
使用Array.flat(Infinity)可以讓多層巢狀陣列變得簡單。
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]14.使用!切換布林值
切換布林值就像應用 NOT 運算子兩次一樣簡單。
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true15.使用concat()合併多個陣列
concat()對於在單一語句中合併多個陣列很有幫助。
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]16.使用for...of和await進行非同步陣列迭代
當迭代一系列 Promise 時， for...of和await可確保每個 Promise 在下一個 Promise 執行之前解析。
const fetchData = async () => {
const urls = ['url1', 'url2'];
for (const url of urls) {
const response = await fetch(url);
console.log(await response.json());
}
};17.快速取得陣列中的最後一項
檢索陣列中的最後一項，無需知道長度。
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 418.使用Intl進行日期格式化
Intl.DateTimeFormat提供了一種跨區域設定格式化日期的強大方法。
const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Monday, 25 October 2021"19.使用Math.round()和模板文字對數字進行舍入
模板文字可以直接格式化四捨五入的數字。
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.1420.使用Array.from()將類別陣列物件轉換為陣列
使用Array.from()將類似陣列的物件（例如，參數）轉換為真正的陣列。
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]這些技巧中的每一個都簡化了 JavaScript 中的常見編碼模式。將它們整合到您的工作流程中，以編寫高效且富有表現力的程式碼。
快樂編碼！ 🚀
原文出處：https://dev.to/jagroop2001/20-javascript-tricks-every-developer-must-know-4pcj
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式