知らないかもしれない: JavaScript の重要な機能とあまり知られていない機能-jsチュートリアル-php.cn

知らないかもしれない: JavaScript の重要な機能とあまり知られていない機能

DDD

リリース： 2024-10-02 18:18:01

オリジナル

431 人が閲覧しました

You Might Not Know These: mportant and Lesser-Known Features in JavaScript

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

ログイン後にコピー

2. ヌルリッシュ合体(??)

JavaScript の

ヌル合体 (??) 演算子は、値が null または未定義の場合に代替値を返します。この演算子は、変数に値がない場合、または未定義の場合にデフォルト値を提供する場合に特に便利です。

例:

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);

ログイン後にコピー

3. デバウンスによるパフォーマンスの向上

デバウンス は、関数が特定の時間枠内で 1 回だけ実行されるようにする手法です。これは、イベントを頻繁にトリガーするユーザー操作 (入力、スクロールなど) に特に役立ちます。デバウンスは通常、ユーザーがアクションを完了した後にプロセス(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>

ログイン後にコピー

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; // 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)

ログイン後にコピー