Fungsi JavaScript penting Setiap Pembangun Perlu Tahu

JavaScript ialah bahasa serba boleh yang menguasai sebahagian besar web hari ini. Di antara banyak cirinya, fungsi tertentu menonjol untuk utiliti dan pengoptimuman prestasi mereka. Dalam blog ini, kami akan meneroka enam fungsi JavaScript penting yang boleh meningkatkan kit alat pengekodan anda: Debounce, Throttle, Currying, Memoization, Deep Clone dan fungsi bonus untuk ukuran yang baik.

1. Fungsi Debounce

Fungsi nyahlantun ialah alat yang berkuasa untuk mengehadkan kadar fungsi boleh menyala. Ini amat berguna untuk mengoptimumkan prestasi dalam senario seperti saiz semula tetingkap, menatal atau peristiwa ketukan kekunci. Dengan memastikan bahawa fungsi hanya dilaksanakan selepas kelewatan yang ditentukan sejak seruan terakhir, ia membantu mengelakkan kesesakan prestasi.

function debounce(fn, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Usage
const logResize = debounce(() => console.log('Resized!'), 2000);
window.addEventListener('resize', logResize);

2. Fungsi Pendikit

Fungsi pendikit memastikan bahawa fungsi dilaksanakan paling banyak sekali dalam jangka masa yang ditetapkan. Ini amat berfaedah untuk acara yang boleh dicetuskan dengan pantas, seperti menatal atau mengubah saiz.

function throttle(fn, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        if (!lastRan) {
            fn.apply(this, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    fn.apply(this, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

// Usage
const logScroll = throttle(() => console.log('Scrolled!'), 2000);
window.addEventListener('scroll', logScroll);

3. Fungsi Karipap

Kari ialah teknik pengaturcaraan berfungsi yang mengubah fungsi dengan berbilang argumen kepada urutan fungsi, masing-masing mengambil satu hujah. Ini membolehkan lebih fleksibiliti dan kebolehgunaan semula fungsi.

function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        return function(...args2) {
            return curried.apply(this, [...args, ...args2]);
        };
    };
}

// Usage
function add(a, b, c) {
    return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // Output: 6

4. Fungsi Menghafal

Memoization ialah teknik pengoptimuman yang menyimpan hasil panggilan fungsi yang mahal dan mengembalikan hasil cache apabila input yang sama berlaku lagi. Ini boleh meningkatkan prestasi dengan ketara untuk fungsi dengan pengiraan mahal.

function memoize(fn) {
    const cache = {};
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache[key]) {
            return cache[key];
        }
        const result = fn.apply(this, args);
        cache[key] = result;
        return result;
    };
}

// Usage
const fibonacci = memoize(n => (n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)));
console.log(fibonacci(40)); // Output: 102334155

5. Fungsi Klon Dalam

Satu fungsi klon dalam mencipta objek baharu yang merupakan salinan dalam objek asal. Ini memastikan objek bersarang turut disalin dan bukannya dirujuk.

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

// Usage
const originalObject = { x: 1, y: { z: 2 } };
const clonedObject = deepClone(originalObject);
clonedObject.y.z = 3;
console.log(originalObject.y.z); // Output: 2

6. Fungsi Susunan Ratakan

Sebagai bonus, kami memperkenalkan fungsi tatasusunan rata, yang mengubah tatasusunan bersarang menjadi tatasusunan satu dimensi. Ini berguna untuk memudahkan struktur data.

function flattenArray(arr) {
    return arr.reduce((accumulator, currentValue) => 
        accumulator.concat(Array.isArray(currentValue) ? flattenArray(currentValue) : currentValue), []);
}

// Usage
const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenArray(nestedArray);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Kesimpulan

Enam fungsi JavaScript ini—Debounce, Throttle, Currying, Memoization, Deep Clone dan Flatten Array—adalah alatan penting dalam mana-mana kit alat pembangun. Mereka bukan sahaja meningkatkan prestasi tetapi juga mempromosikan kod yang lebih bersih dan lebih boleh diselenggara. Dengan memasukkan fungsi ini ke dalam projek anda, anda boleh mengoptimumkan aplikasi anda dan meningkatkan pengalaman pengguna dengan ketara. Selamat mengekod!

Atas ialah kandungan terperinci Fungsi JavaScript penting Setiap Pembangun Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!