Vous ne les connaissez peut-être pas : fonctionnalités importantes et moins connues de JavaScript-js tutoriel-php.cn

Vous ne les connaissez peut-être pas : fonctionnalités importantes et moins connues de JavaScript

DDD

Libérer： 2024-10-02 18:18:01

original

450 Les gens l'ont consulté

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

Même si vous utilisez JavaScript depuis des années, vous n'avez peut-être pas découvert certaines fonctionnalités avancées. Dans cet article, nous aborderons les fonctionnalités importantes et moins connues de JavaScript.

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

Accéder à une valeur dans une structure d'objets profondément imbriquées en JavaScript peut parfois présenter un risque d'erreurs. Si une valeur au fond est indéfinie ou nulle, cela peut conduire à 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, does not throw an error

Copier après la connexion

2. Coalescence nulle (??)

L'opérateur de fusion nulle (??) en JavaScript renvoie 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 lorsqu'une variable n'a aucune valeur ou n'est pas définie.

Exemples :

et x = 0;
let y = x ?? 42; // returns 0 because 0 is not null or undefined
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

Anti-rebond est une technique qui garantit qu'une fonction n'est exécutée qu'une seule fois dans un certain laps de temps. Ceci est particulièrement utile pour les interactions utilisateur (par exemple, saisie, défilement) qui déclenchent fréquemment des événements. L'anti-rebond est couramment utilisé pour lancer un processus (par exemple, un appel API) après qu'un utilisateur a terminé une action.

Dans un champ de saisie de recherche, au lieu d'effectuer un appel API à chaque frappe, l'anti-rebond permet à l'appel API de se produire uniquement lorsque l'utilisateur arrête de taper :

Empêche la surcharge du serveur : Moins de requêtes sont envoyées, ce qui permet au serveur de fonctionner plus efficacement.
Réduit la latence : Les utilisateurs reçoivent des réponses plus rapides.
Améliore l'expérience utilisateur : Les utilisateurs attendent que les suggestions apparaissent seulement après avoir arrêté de taper.

Exemple :

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

Copier après la connexion

4. Gestion des objets avec proxy

Proxy permet d'intercepter et de redéfinir des opérations sur un objet. Cette fonctionnalité est utile pour définir des comportements personnalisés avant d'effectuer des opérations sur un 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évention des valeurs en double avec Set et WeakSet

Les deux structures peuvent être utilisées pour éviter les valeurs en double. Voici des exemples d'utilisation de chaque structure :

Prévenir les 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; // 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)

Copier après la connexion

Conclusion

Ces fonctionnalités fournissent des outils permettant d'exploiter pleinement la puissance et la flexibilité de JavaScript. N'hésitez pas à intégrer ces fonctionnalités dans vos projets pour rendre votre code plus performant, propre et maintenable.

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!