JavaScript 是 Web 開發世界的基石之一。即使您已經使用這種語言多年,您可能還沒有發現一些高級功能。在本文中,我們將介紹 JavaScript 的 5 個最重要且鮮為人知的功能。
1. 透過可選鏈實現安全存取 (?.)
在 JavaScript 中取得物件嵌套結構中的值有時會帶來錯誤的風險。如果深度值未定義或為 null,則可能會導致錯誤。可選連結 (?.) 運算子消除了這個問題。
範例:
1 2 3 4 5 6 7 8 9 | const user = {
name: 'John' ,
address: {
city: 'New York'
}
};
console.log(user.address?.city);
console.log(user.address?.zipcode);
|
登入後複製
2. 空值合併 (??)
JavaScript 中的 空值合併 (??) 運算子用於在值為 null 或未定義 時傳回替代值。如果變數沒有值或未定義,此運算子對於提供預設值特別有用。
範例:
1 2 3 | let x = 0;
let y = x ?? 42;
console.log(y);
|
登入後複製
1 2 3 4 5 6 7 | function getConfig(config) {
return config ?? { timeout: 1000, retries: 3 };
}
let userConfig = null;
let finalConfig = getConfig(userConfig);
console.log(finalConfig);
|
登入後複製
3. 通過去抖動提高性能
去抖動是一種確保函數在給定時間段內僅運行一次的技術。 這對於用戶互動中頻繁觸發的事件(例如打字、滾動)特別有用。 去抖動,通常用於在使用者完成某些操作後啟動一個操作(例如 API 呼叫)。
當使用者在搜尋輸入欄位中鍵入時,去抖功能不會在每次按鍵時都進行API 調用,而是確保僅在使用者停止鍵入時才進行API 呼叫:
範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
<html lang= "tr" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title>Debounce Örneği</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>Arama Örneği</h1>
<input type= "text" id= "searchInput" />
<div id= "result" ></div>
<script>
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
const search = debounce((query) => {
console.log(`Searching for ${query}`);
document.getElementById( 'result' ).innerText = `Sonuçlar için arama yapılıyor: ${query}`;
}, 300);
document.getElementById( 'searchInput' ).addEventListener( 'input' , (event) => {
search(event.target.value);
});
</script>
</body>
</html>
|
登入後複製
4. 使用代理進行物件管理
Proxy 允許捕獲和修改針對物件的操作。此功能對於在對物件執行操作之前定義自訂行為非常有用。
範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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);
console.log(proxy.nonExistent);
|
登入後複製
5.用Set和WeakSet防止重複值
使用這兩種結構可以避免重複值。展示如何使用這兩種結構的範例:
使用 Set 防止重複值
1 2 3 4 | const numbers = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 9];
const uniqueNumbers = [... new Set(numbers)];
console.log(uniqueNumbers);
|
登入後複製
使用 WealSet 來防止重複值
1 2 3 4 5 6 7 8 9 10 11 12 | const uniqueObjects = new WeakSet();
const objA = { name: 'Alice' };
const objB = { name: 'Bob' };
const objC = objB;
uniqueObjects.add(objA);
uniqueObjects.add(objB);
uniqueObjects.add(objC);
console.log(uniqueObjects);
|
登入後複製
結論
這些功能將使您能夠充分利用 JavaScript 的強大功能和靈活性。您可以在專案中使用這些功能,以確保您的程式碼更有效率、更乾淨、更永續。
以上是你可能不知道:JavaScript 中重要且鮮為人知的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!