프론트엔드 인터뷰 코드 questions

프론트엔드 인터뷰 코드 질문

2024-07-12

이 기사에는 인터뷰 과정에서 직면하게 되는 코딩 질문이 요약되어 있습니다.

1. 변수 승격

2. 배열 관련 방법

반환되는 실제 값은 필터링이 아닌 보존을 위한 것이므로 잊지 마십시오. 별것도 아닌데, 반년 동안 직접 안 적으면 잊어버릴 뿐입니다. . .

arr.filter((item, index, current) => {return arr.indexOf(item) == index});.무게를 없앨 수 있다

필터의 핵심은 새로운 배열을 생성하는 것이며 콜백 함수가 true를 반환하면 유지됩니다. 위의 코드 줄은 첫 번째 시간만 내부에 배치된다는 의미입니다.

이중 포인터 중복 제거:

이중 포인터를 사용하여 배열을 재정렬합니다. 동일하면 빠른 포인터가 한 위치 오른쪽으로 이동합니다. 동일하지 않으면 느린 포인터가 빠른 위치의 값을 저장하고 이동합니다. 다음 시간과 비교하기 위해 오른쪽에 빠른 포인터:


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

[1,1,2,2,4,4]를 입력하고 [1,2,4]를 출력합니다.

배열이 객체인 경우:

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

{아이디:3,시간:2}];

이제 ID를 기준으로 중복 항목을 제거해야 합니다. ID가 동일하면 시간이 가장 큰 객체만 유지됩니다.

[{"아이디":1,"시간":4},{"아이디":2,"시간":4},{"아이디":3,"시간":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)); 그게 다입니다.

물론, 빈 개체를 이용하여 기억할 수도 있습니다. 매번 개체의 ID에 해당하는 시간을 비교하여 덮어쓸지 여부를 선택하세요. 순회한 후 for in 루프를 사용하여 객체를 배열로 변환합니다. 하지만 데이터의 양이 많으면 이중 포인터를 사용하는 것이 더 효율적입니다.

3. 참고자료 관련

참조 유형 변수의 등호 할당은 서로 영향을 미치지 않습니다.

하지만 얕은 복사본으로 간주되는 ab를 사용하면 아래와 같이 영향을 받게 됩니다.


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

인용과 관련된 고전적인 사례를 살펴보겠습니다. 배열을 트리 구조로 변환하면 제가 처음 접했을 때 적지 않았던 질문이기도 합니다.


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

러시아 마트료시카 인형처럼 직접 복사해서 보면 1번째 레이어에 2번째 레이어를 추가하면 이해하기 쉽습니다. 또한 첫 번째 레이어의 두 번째 레이어 아래에 세 번째 레이어도 있습니다. 사실 잘 생각해보면 a["1"] 아래에 a["1"].children["2"]가 있다는 것을 알 수 있습니다. 그 값은 a["2"]와 동일할 뿐만 아니라 참조도 모두 동일하며 a["1"].children.push(a["2"]);를 실행합니다. 이 이점은 a["3"]={...item, children:[]} 이 실행되고 a["2"].children.push(a["3"]) 이 내부에 있기 때문에 실행될 때 발생합니다. 작업 데이터가 있으므로 동일한 참조(예: a=b, b.push도 a.push에 영향을 미침)가 있는 장소도 푸시되므로 a["1"].children["2"]가 표시됩니다. .children a["3"]. 이것이 올바른 트리 구조입니다.

그래도 이해가 되지 않는다면 다음을 시도해 보세요.

위에 표시된 것처럼 b1은 a1의 첫 번째 수준 노드로 간주되며 b1을 수정하면 a1에 영향을 미칩니다. 위의 내용은 루프이지만 각 범위의 참조는 동일합니다.

3. 매크로 작업과 마이크로 작업

2 4 5개의 동기 코드, 3개의 마이크로 태스크, 1개의 매크로 태스크.유일한 함정은 4가 인쇄되지만 return 3은 실행되지 않는다는 것입니다.

4. 비교 연산자

암시적 변환 비교 중에 배열은 toString 메서드를 호출합니다.

5. 손떨림 방지 및 조절 필기 기능

직접 작성해야 하며, 이전에 작성한 적이 없다면 인터뷰 중에 찢어야 하며, 아마도 찢어지지 않을 것입니다.다음은 손떨림 방지 즉시 실행 및 지연 실행, 즉시 실행 제한 및 지연 실행입니다.


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

args를 가져와야 한다는 점을 기억하세요. 흔들림 방지와 조절의 근본적인 차이점은 조절이 항상 트리거되는 경우 특정 시간 간격 내에 실행되고 한 번만 실행된다는 것입니다. 흔들림 방지가 1분 동안 실행되면 한 번만 실행됩니다(마지막 클릭에 의해 즉시 실행 또는 지연 실행).

기술나눔