前端面试代码题

本文总结面试过程中遇到的代码题。

1. 变量提升

2. 数组相关的方法

注意返回true值是保留不是过滤，别记反。没啥，就是gap半年在面不写会忘的。。。

arr.filter((item, index, current) => {return arr.indexOf(item) == index});。可以去重

filter本质还是建了一个新的数组，回调函数里返回true则保留。上面一行代码表示重复的只往里面放第一次。

双指针去重：

使用双指针去重排序好的数组，相等的话fast指针右移一位，不相等的话slow右移一位，将fast位置的值保存，fast右移一位比较下一次：

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,time: 2},{id:1,time: 4},{id:2,time: 2},{id:2,time: 4},{id:3,time: 5},

{id:3,time: 2}];

 现在需要根据id去重，id相等的情况下，只保留time最大的对象，输出：

[ { id: 1, time: 4 }, { id: 2, time: 4 }, { id: 3, time: 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对应的那个time比较，选择是否覆盖。遍历完使用for in循环将对象转数组。

3. 引用相关

引用类型变量的等于号赋值，不会相互影响。

但是通过a.b的方式会影响，此时算浅复制,如下所示。

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

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，防抖和节流本质的区别是防抖一直在重置定时器，节流不是的，节流一直触发的话在一定时间间隔内都会执行且只执行一次。防抖如果一直触发个一分钟，那也只会执行一次（立即执行或者最后一次点击时触发延迟执行）。