Kode wawancara front-end question

Pertanyaan kode wawancara front-end

2024-07-12

Artikel ini merangkum pertanyaan coding yang ditemui selama proses wawancara.

1. Promosi variabel

2. Metode yang berhubungan dengan array

Perhatikan bahwa nilai sebenarnya yang dikembalikan adalah untuk retensi, bukan pemfilteran, jadi jangan lupakan itu. Bukan apa-apa, hanya saja saya akan melupakannya jika tidak menuliskannya sendiri selama setengah tahun. . .

arr.filter((item, indeks, arus) => {return arr.indexOf(item) == indeks});.Dapat menghilangkan berat badan

Inti dari filter adalah membuat array baru, dan jika fungsi panggilan balik mengembalikan nilai true, maka akan dipertahankan. Baris kode di atas berarti hanya pertama kali yang ditempatkan di dalam.

Deduplikasi penunjuk ganda:

Gunakan penunjuk ganda untuk menyusun ulang array. Jika sama, penunjuk cepat akan berpindah satu bit ke kanan. Jika tidak sama, penunjuk lambat akan berpindah satu bit ke kanan pindahkan penunjuk cepat ke kanan sedikit untuk membandingkan dengan waktu berikutnya:


function doublePointer(nums) {
    if(nums.length < 2) {
        return nums;
    }
    let slow = 0;
    let fast = 1;
    let result = [nums[0]];
    while(fast < nums.length) {
        if (result[slow] == nums[fast]) {
            fast++;
        } else {
            slow++;
            result[slow] = nums[fast];
            fast++;
        }
    }
    return result;
}
const arr = [1,1,2,2,4,4];
console.log(doublePointer(arr));

Masukan [1,1,2,2,4,4] dan keluaran [1,2,4].

Jika array adalah sebuah objek:

const arr2 = [{id:1,waktu: 2},{id:1,waktu: 4},{id:2,waktu: 2},{id:2,waktu: 4},{id:3,waktu: 5},

{id:3,waktu: 2}];

Sekarang kita perlu menghapus duplikat berdasarkan ID. Jika ID sama, hanya objek dengan waktu terbesar yang akan dipertahankan.

[{"id":1,"waktu":4},{"id":2,"waktu":4},{"id":3,"waktu":5}]


function doublePointerByorder(nums) {
    if(nums.length < 2) {
        return nums;
    }
    let slow = 0;
    let fast = 1;
    let result = [nums[0]];
    while(fast < nums.length) {
        if (result[slow].id == nums[fast].id) {
            if(result[slow].time < nums[fast].time) {
                result[slow] = nums[fast];
            }
            fast++;
        } else {
            slow++;
            result[slow] = nums[fast];
            fast++;
        }
    }
    return result;
}

console.log(doublePointerByorder(arr2)); Itu saja.

Tentu saja, Anda dapat menggunakan objek kosong untuk mengingatnya. Setiap kali, bandingkan waktu yang sesuai dengan ID dalam objek dan pilih apakah akan menimpanya. Setelah melintasi, gunakan perulangan for in untuk mengubah objek menjadi array. Namun double pointer sangat efisien. Jika jumlah datanya banyak, akan lebih tepat menggunakan double pointer.

3. Referensi terkait

Penetapan tanda sama dengan variabel tipe referensi tidak akan mempengaruhi satu sama lain.

Namun, hal ini akan terpengaruh dengan penggunaan ab, yang dianggap sebagai salinan dangkal, seperti yang ditunjukkan di bawah ini.


person1 = {name: 3};
members = person1;
members.name = 4;   // person1.name=4

Mari kita lihat kasus klasik terkait kutipan, yang juga merupakan pertanyaan yang tidak saya tulis saat pertama kali menemukannya saat wawancara. Ubah array menjadi struktur pohon:


function arrayToTree(items) {
    const tree = {};
    const map = {};
    items.forEach((item, index) => {
        const { id, parentId } = item;
        if (!map[id]) map[id] = { children: [] };
        const node = { ...item, children: map[id].children};
        map[id] = node;
        if (parentId) {
            if (!map[parentId]) {
                map[parentId] = { children: [] };
            } map[parentId].children.push(node);
        } else {
            tree[id] = node;
        }
    });
    console.log(map);
}
 
// 示例数组
const items = [
    { id: 1, parentId: null, value: "A" },
    { id: 2, parentId: 1, value: "B" },
    { id: 3, parentId: 1, value: "C" },
    { id: 4, parentId: 2, value: "D" },
    { id: 5, parentId: 3, value: "E" }
];
 
// 转换为树
const tree = arrayToTree(items);

Anda bisa menyalinnya langsung untuk melihat efeknya, seperti boneka matryoshka Rusia. Sangat mudah untuk memahami ketika lapisan kedua ditambahkan ke lapisan pertama, ada juga lapisan ketiga di bawah lapisan kedua dari lapisan pertama. Faktanya, jika Anda memikirkannya dengan cermat, Anda dapat memahami bahwa ada["1"].children["2"] di bawah a["1"], dan nilainya tidak hanya sama dengan a["2"], tetapi juga referensi. Semua sama, dan jalankan a["1"].children.push(a["2"]);. Manfaat ini datang ketika a["3"]={...item, kids:[]} dijalankan, a["2"].children.push(a["3"]) dijalankan, karena berada di dalam data operasi, jadi tempat dengan referensi yang sama (misalnya, a=b, b.push juga akan mempengaruhi a.push) juga akan didorong, sehingga Anda akan melihat a["1"].children["2"] .anak-anak a["3"]. Ini adalah struktur pohon yang tepat.

Jika masih belum paham, Anda bisa mencoba cara berikut ini:

Seperti yang ditunjukkan di atas: b1 dianggap sebagai node tingkat pertama dari a1, dan memodifikasi b1 akan mempengaruhi a1. Meskipun di atas adalah perulangan, referensi di setiap cakupannya sama.

3. Tugas makro dan tugas mikro

2 4 5 kode sinkron, 3 tugas mikro, 1 tugas makro.Satu-satunya kendala adalah 4 akan dicetak, tetapi pengembalian 3 tidak akan dieksekusi.

4. Operator perbandingan

Selama perbandingan konversi implisit, array memanggil metode toString.

5. Tulisan tangan anti-guncangan dan pelambatan

Anda harus menulisnya sendiri. Jika Anda pernah melihatnya dan belum pernah menulisnya sebelumnya, Anda harus merobeknya dengan tangan selama wawancara, dan kemungkinan besar Anda tidak akan bisa merobeknya.Berikut ini adalah: eksekusi segera anti-guncangan dan eksekusi tertunda, pembatasan eksekusi segera dan eksekusi tertunda


function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}
 
function debounce_immediate(fn, delay, immediate = false) {
    let timer = null;
    let flag = true;
    return function (...args) {
        timer && clearTimeout(timer);
        if (immediate) {
            if (flag) {
                fn.apply(this, args);
                flag = false;
            }
            timer = setTimeout(() => {
                flag = true;
            }, delay);
 
        } else {
            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        }
    }
}
 
function throttle(fn, delay) {
    let lastTime = 0;
    let timer = null;
    return function (...args) {
        const nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn.apply(this, args);
            lastTime = nowTime;
        }
    }
}
 
function throttle_D(func, delayTime) {
    let delay = delayTime || 1000;
    let timer = null;
    return function (...args) {
        if (!timer) {
            timer = setTimeout(function () {
                func.apply(this, args);
                timer = null;
            }, delay);
        }
    }
}

Ingatlah untuk membawa args. Perbedaan mendasar antara anti-shake dan throttling adalah anti-shake selalu mereset timer, sedangkan throttling tidak. Jika throttling selalu terpicu, maka akan dieksekusi dalam interval waktu tertentu dan hanya dieksekusi satu kali. Jika anti-guncangan dipicu selama satu menit, maka hanya akan dijalankan satu kali (eksekusi langsung atau eksekusi tertunda saat klik terakhir dipicu).

Berbagi teknologi