Anda Mungkin Tidak Tahu Ini: Ciri penting dan Kurang Diketahui dalam JavaScript-tutorial js-php.cn

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

DDD

Lepaskan： 2024-10-02 18:18:01

asal

450 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

function getConfig(config) {
    return config ?? { timeout: 1000, retries: 3 };
}

let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 } 
console.log(finalConfig);

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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]

Salin selepas log masuk

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)

Salin selepas log masuk

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!