Rumah >hujung hadapan web >tutorial js >Anda Mungkin Tidak Tahu: Ciri Penting dan Kurang Diketahui dalam JavaScript

Anda Mungkin Tidak Tahu: Ciri Penting dan Kurang Diketahui dalam JavaScript

Linda Hamiltonasal: 2024-10-02 18:17:29412semak imbas

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript ialah salah satu tunjang dunia pembangunan web. Walaupun anda telah menggunakan bahasa ini selama bertahun-tahun, anda mungkin tidak menemui beberapa ciri lanjutan. Dalam artikel ini, kami akan membincangkan 5 ciri JavaScript yang paling penting dan kurang diketahui.

1. Akses Selamat dengan Rantaian Pilihan (?.)

Mencapai nilai dalam struktur bersarang objek dalam JavaScript kadangkala boleh membawa risiko ralat. Jika nilai dalam tidak ditentukan atau batal, ini boleh menyebabkan ralat. Pengendali rantaian pilihan (?.) menghapuskan masalah ini.

Contoh:

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

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

2. Penggabungjalinan Batal (??)

Operator nullish coalescing (??) dalam JavaScript digunakan untuk mengembalikan nilai alternatif apabila nilai adalah null atau undefined. Operator ini amat berguna untuk menyediakan nilai lalai jika pembolehubah tidak mempunyai nilai atau tidak ditakrifkan.

Contoh:

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. Peningkatan Prestasi dengan Debouncing

Menyahlantun ialah teknik yang memastikan fungsi berjalan sekali sahaja dalam tempoh masa tertentu. Ini amat berguna untuk peristiwa yang sering dicetuskan dalam interaksi pengguna (cth. menaip, menatal). Nyahlantun , biasanya digunakan untuk memulakan tindakan (cth. panggilan API) selepas pengguna menyelesaikan sesuatu.

Apabila pengguna menaip dalam medan input carian, bukannya membuat panggilan API dengan setiap ketukan kekunci, nyahlantun memastikan bahawa panggilan API dibuat hanya apabila pengguna berhenti menaip:

Menghalang lebihan pelayan: Sebilangan besar permintaan tidak akan dihantar, yang menjadikan pelayan berfungsi dengan lebih cekap.
Mengurangkan kelewatan: Pengguna mendapat respons yang lebih pantas.
Meningkatkan pengalaman pengguna: Pengguna menjangkakan cadangan akan datang hanya apabila dia berhenti menaip.

Contoh:

<!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. Pengurusan Objek dengan Proksi

Proksi membenarkan menangkap dan mengubah suai operasi terhadap objek. Ciri ini berguna untuk menentukan gelagat tersuai sebelum melakukan operasi pada objek.

Contoh:

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. Mencegah Nilai Pendua dengan Set dan WeakSet

Adalah mungkin untuk mengelakkan nilai pendua dengan menggunakan kedua-dua struktur. Contoh yang menunjukkan cara melakukannya menggunakan kedua-dua struktur:

Mencegah Nilai Pendua dengan 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]

Mencegah Nilai Pendua dengan 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)

Kesimpulan

Ciri ini ialah alatan yang membolehkan anda menggunakan sepenuhnya kuasa dan fleksibiliti JavaScript. Anda boleh menggunakan ciri ini dalam projek anda untuk memastikan kod anda lebih berprestasi, bersih dan mampan.

Atas ialah kandungan terperinci Anda Mungkin Tidak Tahu: Ciri Penting dan Kurang Diketahui dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript NULL undefined input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Konsep Tindak Balas Teras Setiap Pembangun Perlu TahuArtikel seterusnya：Konsep Tindak Balas Teras Setiap Pembangun Perlu Tahu

Artikel berkaitan

Lihat lagi