ホームページ >ウェブフロントエンド >jsチュートリアル >知らないかもしれない: JavaScript の重要な機能とあまり知られていない機能
知らないかもしれない: JavaScript の重要な機能とあまり知られていない機能
- Linda Hamiltonオリジナル
- 2024-10-02 18:17:29421ブラウズ
JavaScript は、Web 開発の世界の基礎の 1 つです。この言語を何年も使用している場合でも、いくつかの高度な機能を発見していない可能性があります。この記事では、JavaScript の最も重要でありながらあまり知られていない 5 つの機能について説明します。
1. オプションのチェーン (?.) による安全なアクセス
JavaScript でオブジェクトの入れ子構造内の値に到達すると、エラーが発生するリスクが伴う場合があります。深い値が未定義または null の場合、エラーが発生する可能性があります。オプションの連鎖 (?.) 演算子により、この問題は解決されます。
例:
const user = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(user.address?.city); // 'New York'
console.log(user.address?.zipcode); // undefined, hata vermez
2. ヌルリッシュ合体(??)
JavaScript の ヌル合体 (??) 演算子は、値が ヌルまたは未定義 の場合に代替値を返すために使用されます。この演算子は、変数に値がない場合、または変数が定義されていない場合にデフォルト値を提供する場合に特に便利です。
例:
let x = 0; let y = x ?? 42; // 0 döner, çünkü 0 null veya undefined değildir 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);
3. デバウンスによるパフォーマンスの向上
デバウンスは、関数が一定期間内に 1 回だけ実行されるようにする手法です。 これは、ユーザー操作 (入力、スクロールなど) で頻繁にトリガーされるイベントに特に役立ちます。 デバウンス。通常は ユーザーが何かを完了した後にアクション (API 呼び出しなど) を開始するために使用されます。
ユーザーが検索入力フィールドに入力しているとき、キーストロークごとに API 呼び出しを行うのではなく、デバウンスにより、ユーザーが入力をやめたときにのみ API 呼び出しが行われるようになります。
サーバーの過負荷を防止します: 大量のリクエストが送信されなくなり、サーバーがより効率的に動作します。
遅延の削減: ユーザーの応答が速くなります。
ユーザー エクスペリエンスの向上: ユーザーは、入力をやめたときにのみ提案が表示されることを期待します。
例:
<!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>
// Debounce fonksiyonu
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId); // Önceki zamanlayıcıyı temizle
timeoutId = setTimeout(() => func.apply(this, args), delay); // Yeni bir zamanlayıcı ayarla
};
}
const search = debounce((query) => {
console.log(`Searching for ${query}`);
// Burada bir API çağrısı yapabilirsiniz
document.getElementById('result').innerText = `Sonuçlar için arama yapılıyor: ${query}`;
}, 300);
// Input olayını dinleme
document.getElementById('searchInput').addEventListener('input', (event) => {
search(event.target.value);
});
</script>
</body>
</html>
4. プロキシによるオブジェクト管理
プロキシ を使用すると、オブジェクトに対する操作のキャプチャと変更が可能になります。この機能は、オブジェクトに対して操作を実行する前に、カスタマイズされた動作を定義するのに役立ちます。
例:
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
5. SetとWeakSetによる重複値の防止
両方の構造を使用することで値の重複を避けることが可能です。両方の構造を使用してこれを行う方法を示す例:
Set による重複値の防止
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]
WeakSet による重複値の防止
const uniqueObjects = new WeakSet();
const objA = { name: 'Alice' };
const objB = { name: 'Bob' };
const objC = objB; // Aynı referans
// Değer ekleme
uniqueObjects.add(objA);
uniqueObjects.add(objB);
uniqueObjects.add(objC); // objB'nin referansı olduğu için bu eklenmeyecek
console.log(uniqueObjects); // WeakSet { ... } (objA ve objB ile gösterir)
結論
これらの機能は、JavaScript のパワーと柔軟性を最大限に活用できるツールです。これらの機能をプロジェクトで使用すると、コードのパフォーマンスが向上し、クリーンで持続可能なものになります。
以上が知らないかもしれない: JavaScript の重要な機能とあまり知られていない機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。