Front-End-Interviewcode questions

Fragen zum Front-End-Interviewcode

2024-07-12

Dieser Artikel fasst die Codierungsfragen zusammen, die während des Interviewprozesses auftreten.

1. Variable Förderung

2. Array-bezogene Methoden

Beachten Sie, dass der tatsächlich zurückgegebene Wert der Aufbewahrung und nicht der Filterung dient. Vergessen Sie ihn also nicht. Es ist nichts, ich werde es nur vergessen, wenn ich es ein halbes Jahr lang nicht persönlich aufschreibe. . .

arr.filter((item, index, current) => {return arr.indexOf(item) == index});.Kann Gewicht entfernen

Der Kern des Filters besteht darin, ein neues Array zu erstellen. Wenn die Rückruffunktion „true“ zurückgibt, wird es beibehalten. Die obige Codezeile bedeutet, dass nur das erste Mal darin platziert wird.

Doppelzeiger-Deduplizierung:

Verwenden Sie Doppelzeiger, um das Array neu anzuordnen. Wenn sie gleich sind, bewegt sich der schnelle Zeiger um eine Position nach rechts. Wenn sie nicht gleich sind, bewegt sich der langsame Zeiger um eine Position nach rechts der schnelle Zeiger nach rechts zum Vergleich mit der nächsten Zeit:


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

Eingabe [1,1,2,2,4,4] und Ausgabe [1,2,4].

Wenn das Array ein Objekt ist:

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

{id:3,zeit: 2}];

Jetzt müssen wir Duplikate basierend auf der ID entfernen. Wenn die IDs gleich sind, wird nur das Objekt mit der längsten Zeit beibehalten.

[{"id":1,"Zeit":4},{"id":2,"Zeit":4},{"id":3,"Zeit":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)); Das ist es.

Natürlich können Sie ein leeres Objekt verwenden, um es sich zu merken. Vergleichen Sie jedes Mal die Zeit, die der ID im Objekt entspricht, und entscheiden Sie, ob sie überschrieben werden soll. Verwenden Sie nach dem Durchlaufen eine for-in-Schleife, um das Objekt in ein Array umzuwandeln. Allerdings sind Doppelzeiger sehr effizient, wenn die Datenmenge groß ist, wäre es sinnvoller, Doppelzeiger zu verwenden.

3. Referenzbezogen

Die Gleichheitszeichenzuweisung von Referenztypvariablen hat keinen Einfluss aufeinander.

Die Verwendung von ab, das als flache Kopie betrachtet wird, wird jedoch beeinträchtigt, wie unten gezeigt.


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

Werfen wir einen Blick auf einen klassischen Fall im Zusammenhang mit Zitaten. Diese Frage habe ich auch nicht aufgeschrieben, als ich sie während des Interviews zum ersten Mal sah: Konvertieren Sie das Array in eine Baumstruktur.


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

Sie können es direkt kopieren, um den Effekt zu sehen, genau wie bei einer russischen Matroschka-Puppe. Es ist leicht zu verstehen, wenn die zweite Ebene zur zweiten Ebene hinzugefügt wird auch eine dritte Ebene unter der zweiten Ebene der ersten Ebene. Wenn Sie sorgfältig darüber nachdenken, können Sie tatsächlich verstehen, dass sich unter a["1"] ein["1"].children["2"] befindet. und sein Wert ist nicht nur gleich a["2"], sondern auch alle Referenzen sind gleich und führen a["1"].children.push(a["2"]); aus. Dieser Vorteil entsteht, wenn a["3"]={...item,children:[]} ausgeführt wird, a["2"].children.push(a["3"]) ausgeführt wird, da es sich darin befindet die Operationsdaten, sodass Orte mit derselben Referenz (z. B. a=b, b.push wirkt sich auch auf a.push aus) ebenfalls gepusht werden, sodass Sie a["1"].children["2"] sehen werden. .children a["3"]. Das ist die richtige Baumstruktur.

Wenn Sie es immer noch nicht verstehen, können Sie Folgendes versuchen:

Wie oben gezeigt: B1 wird als Knoten der ersten Ebene von A1 betrachtet, und eine Änderung von B1 wirkt sich auf A1 aus. Obwohl es sich bei dem Obigen um eine Schleife handelt, sind die Referenzen in jedem Bereich gleich.

3. Makroaufgaben und Mikroaufgaben

2 4 5 synchroner Code, 3 Mikroaufgaben, 1 Makroaufgabe.Die einzige Gefahr besteht darin, dass 4 ausgegeben wird, aber return 3 nicht ausgeführt wird.

4. Vergleichsoperatoren

Während des impliziten Konvertierungsvergleichs ruft das Array die toString-Methode auf.

5. Anti-Shake- und Drosselungs-Handschrift

Sie müssen es selbst schreiben. Wenn Sie es noch nie geschrieben haben, müssen Sie es während des Interviews zerreißen, und Sie werden es höchstwahrscheinlich nicht herausreißen können.Die folgenden sind: Anti-Shake-Sofortausführung und verzögerte Ausführung, Drosselung der sofortigen Ausführung und verzögerte Ausführung


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

Denken Sie daran, Argumente mitzubringen. Der wesentliche Unterschied zwischen Anti-Shake und Throttling besteht darin, dass Anti-Shake den Timer immer zurücksetzt, während Throttling dies nicht tut. Wenn die Drosselung immer ausgelöst wird, wird sie innerhalb eines bestimmten Zeitintervalls und nur einmal ausgeführt. Wenn Anti-Shake eine Minute lang ausgelöst wird, wird es nur einmal ausgeführt (sofortige Ausführung oder verzögerte Ausführung, ausgelöst durch den letzten Klick).

Technologieaustausch