Rumah > Artikel > hujung hadapan web > Anda Mungkin Tidak Tahu Ini: Ciri penting dan Kurang Diketahui dalam JavaScript

Anda Mungkin Tidak Tahu Ini: Ciri penting dan Kurang Diketahui dalam JavaScript

DDDasal: 2024-10-02 18:18:01425semak imbas

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

Walaupun anda telah menggunakan JavaScript selama bertahun-tahun, anda mungkin tidak menemui beberapa ciri lanjutan. Dalam artikel ini, kami akan membincangkan ciri penting dan kurang dikenali dalam JavaScript.

1. Akses Selamat dengan Rantaian Pilihan (?.)

Mengakses nilai dalam struktur objek bersarang yang mendalam dalam JavaScript kadangkala boleh menimbulkan risiko ralat. Jika nilai jauh di dalam adalah tidak ditentukan atau batal, ini boleh menyebabkan ralat. Pengendali rantaian pilihan (?.) menghapuskan isu ini.

Contoh:

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. Penggabungjalinan Batal (??)

Pengendali penggabungan batal (??) dalam JavaScript mengembalikan nilai alternatif apabila nilai adalah batal atau tidak ditentukan. Operator ini amat berguna untuk menyediakan nilai lalai apabila pembolehubah tidak mempunyai nilai atau tidak ditentukan.

Contoh:

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

Menyahlantun ialah teknik yang memastikan fungsi dilaksanakan sekali sahaja dalam jangka masa tertentu. Ini amat berguna untuk interaksi pengguna (cth., menaip, menatal) yang kerap mencetuskan peristiwa. Nyahlantun biasanya digunakan untuk memulakan proses (mis., panggilan API) selepas pengguna menyelesaikan tindakan.

Dalam medan input carian, bukannya membuat panggilan API untuk setiap ketukan kekunci, nyahlantun membenarkan panggilan API berlaku hanya apabila pengguna berhenti menaip:

Menghalang lebihan pelayan: Lebih sedikit permintaan dihantar, membolehkan pelayan beroperasi dengan lebih cekap.
Mengurangkan kependaman: Pengguna menerima respons yang lebih pantas.
Meningkatkan pengalaman pengguna: Pengguna menunggu cadangan muncul hanya selepas berhenti menaip.

Contoh:

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

Proksi membolehkan anda memintas dan mentakrifkan semula operasi pada 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

Kedua-dua struktur boleh digunakan untuk mengelakkan nilai pendua. Berikut ialah contoh cara menggunakan setiap 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; // 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)

Kesimpulan

Ciri ini menyediakan alatan untuk memanfaatkan sepenuhnya kuasa dan fleksibiliti JavaScript. Jangan teragak-agak untuk memasukkan ciri ini ke dalam projek anda untuk menjadikan kod anda lebih berprestasi, bersih dan boleh diselenggara.

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

JavaScript Object NULL if for Error using operator undefined function default this input issue Access

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：Anda Mungkin Tidak Tahu: Ciri Penting dan Kurang Diketahui dalam JavaScriptArtikel seterusnya：Anda Mungkin Tidak Tahu: Ciri Penting dan Kurang Diketahui dalam JavaScript

Artikel berkaitan

Lihat lagi