即使您已經使用 JavaScript 多年，您也可能沒有發現一些進階功能。在本文中，我們將討論 JavaScript 中重要且鮮為人知的功能。
1。透過可選連結進行安全存取 (?.)
在 JavaScript 中存取深度物件嵌套結構中的值有時會帶來錯誤的風險。如果深層的值是未定義或null，這可能會導致錯誤。可選的連結運算子 (?.) 消除了這個問題。
範例：
const user = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(user.address?.city); // 'New York'
console.log(user.address?.zipcode); // undefined, does not throw an error
當值為 null 或未定義時，JavaScript 中的空合併 (??) 運算子會傳回替代值。當變數沒有值或未定義時，此運算子對於提供預設值特別有用。
範例：
et x = 0; let y = x ?? 42; // returns 0 because 0 is not null or undefined console.log(y);
function getConfig(config) {
return config ?? { timeout: 1000, retries: 3 };
}
let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 }
console.log(finalConfig);
去抖動是一種確保函數在特定時間範圍內只執行一次的技術。這對於頻繁觸發事件的使用者互動（例如打字、滾動）特別有用。去抖動通常用於在使用者完成操作後啟動進程（例如 API 呼叫）。
在搜尋輸入欄位中，去抖功能不是為每次按鍵都呼叫 API，而是僅在使用者停止輸入時才進行 API 呼叫：
防止伺服器過載：發送的請求更少，使伺服器能夠更有效率地運作。
減少延遲：使用者收到更快的回應。
增強使用者體驗：使用者僅在停止輸入後等待建議出現。
範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debounce Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#searchInput {
padding: 10px;
width: 300px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Search Example</h1>
<input type="text" id="searchInput"/>
<div id="result"></div>
<script>
// Debounce function
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId); // Clear previous timer
timeoutId = setTimeout(() => func.apply(this, args), delay); // Set a new timer
};
}
const search = debounce((query) => {
console.log(`Searching for ${query}`);
// You can make an API call here
document.getElementById('result').innerText = `Searching for results: ${query}`;
}, 300);
// Listening to input event
document.getElementById('searchInput').addEventListener('input', (event) => {
search(event.target.value);
});
</script>
</body>
</html>
Proxy 允許您攔截和重新定義物件上的操作。此功能對於在對物件執行操作之前定義自訂行為非常有用。
範例：
const target = {
message: 'Hello'
};
const handler = {
get: function(obj, prop) {
if (prop in obj) {
return obj[prop];
} else {
return `Property ${prop} does not exist`;
}
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.message); // Hello
console.log(proxy.nonExistent); // Property nonExistent does not exist
這兩種結構都可以用來防止重複值。以下是如何使用每個結構的範例：
const numbers = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 9]; const uniqueNumbers = [...new Set(numbers)]; console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
const uniqueObjects = new WeakSet();
const objA = { name: 'Alice' };
const objB = { name: 'Bob' };
const objC = objB; // Same reference
// Adding values
uniqueObjects.add(objA);
uniqueObjects.add(objB);
uniqueObjects.add(objC); // This won't be added since it's a reference to objB
console.log(uniqueObjects); // WeakSet { ... } (shows objA and objB)
這些功能提供了充分利用 JavaScript 的強大功能和靈活性的工具。請毫不猶豫地將這些功能合併到您的專案中，以使您的程式碼更加高效能、乾淨且可維護。
以上是您可能不知道這些：JavaScript 中重要且鮮為人知的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
