Vous ne le savez peut-être pas : fonctionnalité importante et peu connue de JavaScript-js tutoriel-php.cn

Vous ne le savez peut-être pas : fonctionnalité importante et peu connue de JavaScript

Linda Hamilton

Libérer： 2024-10-02 18:17:29

original

415 Les gens l'ont consulté

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript est l'une des pierres angulaires du monde du développement web. Même si vous utilisez ce langage depuis des années, vous n'avez peut-être pas découvert certaines fonctionnalités avancées. Dans cet article, nous aborderons les 5 fonctionnalités les plus importantes et les moins connues de JavaScript.

1. Accès sécurisé avec chaînage optionnel (?.)

Atteindre une valeur dans la structure imbriquée des objets en JavaScript peut parfois comporter un risque d'erreur. Si une valeur profonde est indéfinie ou nulle, cela peut provoquer une erreur. L'opérateur de chaînage facultatif (?.) élimine ce problème.

Exemple :

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

console.log(user.address?.city); // 'New York'
console.log(user.address?.zipcode); // undefined, hata vermez

Copier après la connexion

2. Coalescence nulle (??)

L'opérateur coalescence nulle (??) en JavaScript est utilisé pour renvoyer une valeur alternative lorsqu'une valeur est nulle ou indéfinie. Cet opérateur est particulièrement utile pour fournir une valeur par défaut si une variable n'a pas de valeur ou n'est pas définie.

Exemples :

let x = 0;
let y = x ?? 42; // 0 döner, çünkü 0 null veya undefined değildir
console.log(y);

Copier après la connexion

function getConfig(config) {
    return config ?? { timeout: 1000, retries: 3 };
}

let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 } 
console.log(finalConfig);

Copier après la connexion

3. Amélioration des performances avec anti-rebond

L'anti-rebond est une technique qui garantit qu'une fonction ne s'exécute qu'une seule fois dans une période de temps donnée. Ceci est particulièrement utile pour événements fréquemment déclenchés dans les interactions de l'utilisateur (par exemple, saisie, défilement). Anti-rebond, généralement utilisé pour démarrer une action (par exemple un appel API) après que l'utilisateur a terminé quelque chose.

Lorsque l'utilisateur tape dans un champ de saisie de recherche, au lieu d'effectuer un appel API à chaque frappe, l'anti-rebond garantit que l'appel API est effectué uniquement lorsque l'utilisateur arrête de taper :

Empêche la surcharge du serveur : Un grand nombre de requêtes ne seront pas envoyées, ce qui rend le serveur plus efficace.
Réduit le délai : L'utilisateur obtient une réponse plus rapide.
Améliore l'expérience utilisateur : L'utilisateur s'attend à ce que les suggestions arrivent uniquement lorsqu'il arrête de taper.

Exemple :

<!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>

Copier après la connexion

4. Gestion d'objets avec proxy

Proxy permet de capturer et de modifier des opérations sur un objet. Cette fonctionnalité est utile pour définir des comportements personnalisés avant d'effectuer des opérations sur l'objet.

Exemple :

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

Copier après la connexion

5. Prévenir les valeurs en double avec Set et WeakSet

Il est possible d'éviter les valeurs en double en utilisant les deux structures. Exemples montrant comment le faire en utilisant les deux structures :

Prévention des valeurs en double avec 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]

Copier après la connexion

Prévenir les valeurs en double avec 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)

Copier après la connexion

Conclusion

Ces fonctionnalités sont des outils qui vous permettront d'utiliser pleinement la puissance et la flexibilité de JavaScript. Vous pouvez utiliser ces fonctionnalités dans vos projets pour garantir que vos codes sont plus performants, propres et durables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!