suchen

Heim >Web-Frontend >js-Tutorial >Sie wissen es vielleicht nicht: Wichtige und wenig bekannte Funktion in JavaScript

Sie wissen es vielleicht nicht: Wichtige und wenig bekannte Funktion in JavaScript

Linda Hamilton
Linda HamiltonOriginal
2024-10-02 18:17:29412Durchsuche

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript ist einer der Eckpfeiler der Webentwicklungswelt. Selbst wenn Sie diese Sprache schon seit Jahren verwenden, haben Sie möglicherweise einige erweiterte Funktionen noch nicht entdeckt. In diesem Artikel werden wir die 5 wichtigsten und am wenigsten bekannten Funktionen von JavaScript behandeln.

1. Sicherer Zugriff mit optionaler Verkettung (?.)

Das Erreichen eines Werts in der verschachtelten Struktur von Objekten in JavaScript kann manchmal das Risiko eines Fehlers bergen. Wenn ein tiefer Wert undefiniert oder null ist, kann dies einen Fehler verursachen. 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, hata vermez

2. Nullish Coalescing (??)

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

Beispiele:

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

Debouncen ist eine Technik, die sicherstellt, dass eine Funktion nur einmal in einem bestimmten Zeitraum ausgeführt wird. Dies ist besonders nützlich für häufig ausgelöste Ereignisse bei Benutzerinteraktionen (z. B. Tippen, Scrollen). Entprellen , wird normalerweise verwendet, um eine Aktion (z. B. einen API-Aufruf) zu starten, nachdem der Benutzer etwas abgeschlossen hat.

Wenn der Benutzer in ein Sucheingabefeld tippt, wird durch die Entprellung sichergestellt, dass der API-Aufruf nur erfolgt, wenn der Benutzer mit der Eingabe aufhört, anstatt bei jedem Tastendruck einen API-Aufruf durchzuführen:

  • Verhindert Serverüberlastung: Eine große Anzahl von Anfragen wird nicht gesendet, wodurch der Server effizienter arbeitet.

  • Reduziert Verzögerung:Benutzer erhält schnellere Antwort.

  • Verbessert die Benutzererfahrung: Der Benutzer erwartet, dass Vorschläge erst dann kommen, wenn er mit der Eingabe aufhört.

Beispiel:

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

Proxy ermöglicht das Erfassen und Ändern von Vorgängen für ein Objekt. Diese Funktion ist nützlich, um benutzerdefinierte Verhaltensweisen zu definieren, bevor Vorgänge am 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

Durch die Verwendung beider Strukturen ist es möglich, doppelte Werte zu vermeiden. Beispiele, die zeigen, wie man es mit beiden Strukturen macht:

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

Abschluss

Bei diesen Funktionen handelt es sich um Tools, mit denen Sie die Leistungsfähigkeit und Flexibilität von JavaScript voll ausschöpfen können. Sie können diese Funktionen in Ihren Projekten nutzen, um sicherzustellen, dass Ihre Codes leistungsfähiger, sauberer und nachhaltiger sind.

Das obige ist der detaillierte Inhalt vonSie wissen es vielleicht nicht: Wichtige und wenig bekannte Funktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript NULL undefined input
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：Kernkonzepte von React, die jeder Entwickler kennen sollteNächster Artikel：Kernkonzepte von React, die jeder Entwickler kennen sollte

In Verbindung stehende Artikel

Mehr sehen