suchen

Heim >Web-Frontend >js-Tutorial >Sie kennen diese möglicherweise nicht: wichtige und weniger bekannte Funktionen in JavaScript

Sie kennen diese möglicherweise nicht: wichtige und weniger bekannte Funktionen in JavaScript

DDD
DDDOriginal
2024-10-02 18:18:01456Durchsuche

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

Selbst wenn Sie JavaScript schon seit Jahren verwenden, haben Sie möglicherweise einige erweiterte Funktionen noch nicht entdeckt. In diesem Artikel besprechen wir wichtige und weniger bekannte Funktionen in JavaScript.

1. Sicherer Zugriff mit optionaler Verkettung (?.)

Der Zugriff auf einen Wert in einer tief verschachtelten Struktur von Objekten in JavaScript kann manchmal ein Fehlerrisiko bergen. Wenn ein Wert tief im Inneren undefiniert oder null ist, kann dies zu einem Fehler führen. Der optionale Verkettungsoperator (?.) beseitigt dieses Problem.

Beispiel:

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. Nullish Coalescing (??)

Der Nullish-Coalescing-Operator (??) in JavaScript gibt einen alternativen Wert zurück, wenn ein Wert null oder undefiniert ist. Dieser Operator ist besonders nützlich, um einen Standardwert bereitzustellen, wenn eine Variable keinen Wert hat oder undefiniert ist.

Beispiele:

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. Leistungsverbesserung durch Entprellen

Entprellen ist eine Technik, die sicherstellt, dass eine Funktion nur einmal innerhalb eines bestimmten Zeitrahmens ausgeführt wird. Dies ist besonders nützlich für Benutzerinteraktionen (z. B. Tippen, Scrollen), die häufig Ereignisse auslösen. Entprellen wird üblicherweise verwendet, um einen Prozess (z. B. einen API-Aufruf) zu initiieren, nachdem ein Benutzer eine Aktion abgeschlossen hat.

Anstatt in einem Sucheingabefeld bei jedem Tastendruck einen API-Aufruf durchzuführen, ermöglicht die Entprellung, dass der API-Aufruf nur dann erfolgt, wenn der Benutzer mit der Eingabe aufhört:

  • Verhindert Serverüberlastung:Es werden weniger Anfragen gesendet, wodurch der Server effizienter arbeiten kann.

  • Reduziert die Latenz:Benutzer erhalten schnellere Antworten.

  • Verbessert die Benutzererfahrung:Benutzer warten erst auf die Anzeige von Vorschlägen, nachdem sie mit der Eingabe aufgehört haben.

Beispiel:

<!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. Objekte mit Proxy verwalten

Mit

Proxy können Sie Vorgänge an einem Objekt abfangen und neu definieren. Diese Funktion ist nützlich, um benutzerdefinierte Verhaltensweisen zu definieren, bevor Vorgänge an einem Objekt ausgeführt werden.

Beispiel:

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. Verhindern doppelter Werte mit Set und WeakSet

Beide Strukturen können verwendet werden, um doppelte Werte zu verhindern. Hier sind Beispiele für die Verwendung der einzelnen Strukturen:

  • Doppelte Werte mit Set verhindern 
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]
  • Doppelte Werte mit WeakSet verhindern 
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)

Abschluss

Diese Funktionen bieten Tools, mit denen Sie die Leistungsfähigkeit und Flexibilität von JavaScript voll ausschöpfen können. Zögern Sie nicht, diese Funktionen in Ihre Projekte zu integrieren, um Ihren Code leistungsfähiger, sauberer und wartbarer zu machen.

Das obige ist der detaillierte Inhalt vonSie kennen diese möglicherweise nicht: wichtige und weniger bekannte Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Object NULL if for Error using operator undefined function default this input issue Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sie wissen es vielleicht nicht: Wichtige und wenig bekannte Funktion in JavaScriptNächster Artikel：Sie wissen es vielleicht nicht: Wichtige und wenig bekannte Funktion in JavaScript

In Verbindung stehende Artikel

Mehr sehen