前端常见面试题

1.关于防抖/节流

题目要求很明确，要求最终输出“searchText1”，并且在500ms后输出“searchText7”，很明显就是关于同一个函数在短时间内重复调用，如何限制其调用频率的功能实现。

    function throttle(action, threshold) {
        // TODO:
    }

    let timer = true;
    const triggerScroll = throttle((val) => {
        console.log(val);
    }, 300);

    triggerScroll("searchText1");
    triggerScroll("searchText2");
    triggerScroll("searchText3");
    triggerScroll("searchText4");
    triggerScroll("searchText5");
    triggerScroll("searchText6");

    setTimeout(() => {}, 500);

    // 期望输出结果：
    // searchText1
    // 500ms 后输出 searchText7

首先，拿到题目后我们先运行一下，运行后报错，显示“triggerScroll is not a function”；由于题目中throttle函数没有返回值，所以triggerScroll接收到的throttle返回值为undefined，首先我们要在throttle函数中return一个函数，也就是throttle在调用时传进去的第一个参数。

 function throttle(action, threshold) {
    return action
 }

这时再运行，控制台打印“searchText1-6”；这时我们只需要把防抖的通用模板套进去就可以实现了，我这里用的防抖，其实使用节流函数也是可以实现的，原理相同，我这里就不展示了，完整代码如下：

    function throttle(action, threshold) {
        return action
    }

    let timer = true;
    const triggerScroll = throttle((val) => {
        if (timer) {
            timer = false;
            setTimeout(() => {
                timer = true;
                console.log(val);
            }, 300)
        } else {
            return false;
        }
    }, 300);

    triggerScroll("searchText1");
    triggerScroll("searchText2");
    triggerScroll("searchText3");
    triggerScroll("searchText4");
    triggerScroll("searchText5");
    triggerScroll("searchText6");

    setTimeout(() => {
        triggerScroll("searchText7");
    }, 500);

另附上防抖和节流的通用模板：

//防抖
let timeid = null;
function debounce() {
    if (timeid) {
        clearTimeout(timeid);
    }
    timeid = setTimeout(() => {
        //这里写操作
        console.log(Math.random());
    }, 500);

}
window.onscroll = debounce;//窗口滚动事件防抖

//节流
let timeid = null;
function debounce(func, wait = 0) {
    if (!timeid) {
        timeid = setTimeout(() => {
            console.log(Math.random());
            timeid = null;
        }, 500);
    }
}
window.onscroll = debounce;

---

 2.js预编译以及运行流程

最终输出结果为“1 1 2 0”。这一题也会涉及到闭包，作用域等知识点。

var i = 0;
function fn() {
    i = 1;
    console.log(i);
    var i;
    return function () {
        console.log(i);
        i += 1;
    }
}

var fun = fn();//1
fun();//1
fun();//2
console.log(i);//0

首先我们需要了解js运行流程：首先进行语法解析；先通篇的检查js语法，若语法有误，则报错。其实进行预编译；即发生在代码执行之前，为代码的执行做的准备工作，一般表现于变量提升，即把变量的声明提前，但是赋值还是在响应位置赋值，再者就是把整个函数声明提前。最后js运行流程进入最后一步即解析执行。

搞懂js运行流程再区分作用域，即全局作用域和函数作用域，全局作用域顾名思义就是全局声明的变量或函数等。函数作用域也就是函数内部的作用域，在函数内部中声明的变量或函数是不会传到全局作用域的。

搞懂这两个概念这一题就能够迎刃而解了，首先全局声明了一个变量i并赋值为0，在声明一个fun接受fn执行后的返回值，所以fn会执行一次，局部变量i在fn函数中重新声明，变量提升，这时函数fn中使用的i都为函数作用域中声明的i，并且重新赋值为1，输出结果1。这里不会影响到全局变量i的值。再观望整体代码，全局变量i未被重新赋值，所以最后一行i输出为0.

再往下走，fu函数的返回值也是一个函数，所以fun接收到的是一个函数，fun函数被执行两次，注意到在fn函数中，i被重新声明过，所以这里的返回值函数即fun函数的作用域为局部作用域，使用的变量i为局部变量，即再fn函数中声明的i，所以输出1。输出之后i自增1，即 i = i+1，局部作用域i的值在fun函数弟一次执行后变为2，再次执行后，输出i为2。

---

3.值类型和引用类型

这一题主要涉及到值类型和引用类型的存储方式，即堆内存和栈内存。

function fn(obj) {
    obj.name = "name";
    obj = new Object();
    obj.name = "newName";
}
var xt = new Object();
fn(xt);
console.log(xt.name);//name

首先题目中声明了一个函数fn和一个对象xt，调用fn函数，并把xt传入函数。这是第二行的obj和xt都为引用类型，新增了obj的属性name值也为name。由于此时obj和xt指向的同一片内存空间，所以xt也会新增name属性，并设置值为name。故最后一个输出name。

在第三行中可以看到obj被重新赋值，即重新开辟了一片内存空间，这时obj依然为新增name属性而不是修改name属性，并将name属性设置为newName，所以这是obj新增的属性不会影响到对象xt的属性。

---

4.同步和异步

这一题主要是考察异步代码和同步代码执行的先后顺序以及js任务队列。

   for (let index = 0; index < 5; index++) {
        setTimeout(() => {
            console.log(index);
        }, 200);
    }

    for (let j = 0; j < 5; j++) {
        setTimeout(() => {
            console.log(j);
        }, 200);
    }

首先可以看到题目中有两个循环体，两个循环体中分别有两个延时200ms的延时器。做题之前我们应该先了解到JavaScript对于同步代码和异步代码的处理方式，js会先执行同步代码，遇到异步代码（例：延时器、计时器、Promise等）会先放置任务队列，等待触发条件依次执行。这个概念了解清楚后这题就能够迎刃而解了。

首先两个循环体为同步代码，会先执行。此时第一个循环体会将循环出的五个延时器放置任务队列，等待200ms后执行。第二个循环体也是如此，所以输出为“0 1 2 3 4  0 1 2 3 4”。

---

5.宏任务和微任务

此题主要是考察对于同步异步，以及宏任务和微任务的理解。

//写出执行结果
setTimeout(() => {
    console.log(1);
}, 0);

new Promise((res) => {
    console.log(2);
    for (var index = 0; index < 1000; index++) {
        index = 9999 && res()

    }
    console.log(3);
}).then(() => {
    console.log(4);
})
console.log(5);

此题最终输出结果为“2 3 5 4 1”；

解答此题我们需要先了解到Promise的特性。Promise是异步编程的一种解决方案，是解决恐怖回调/回调噩梦的一种方案，其就相当于一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

创建promise对象，function就相当于容器，用于存放异步代码（不仅限于异步，同步也可以），此函数在页面加载时会正常执行，同步代码会进入主线程执行，异步代码会进入任务队列，未来才会得到结果。并且Promise有三种状态，进行时（pending默认值），已成功（fulfilled/resolved），已失败（rejected）一旦状态改变，就不会再变，任何时候都可以得到这个结果，成功后会调用.then()方法，then方法接受两个参数，皆为回调函数，第一个函数promise状态变为已成功时触发的，第二个函数promise状态变为已失败时触发。

了解了Promise后，我们还需要搞清楚宏任务和微任务的概念。在上面我们提到过，js会见异步代码放置任务队列，宏任务是由宿主（Node、浏览器）发起的，常见的就是计时器和延时器；而微任务是由js引擎发起的，常见的就时Promise；执行顺序为微任务先执行，宏任务后执行。

这时我们就可以来解答这个题目了，首先遇到延时器，为宏任务，放入任务队列，其实遇到promise，先执行promise的同步代码，输出2，再进入循环，第一次进入循环index被重新赋值为9999，并且将promise的状态改为已成功，再往下走输出3；

此时promise状态为已成功，触发then方法的第一个函数，但是promise响应为异步响应。并且为微任务，放置任务队列，排在宏任务之前。再往下走就输出5。

此时同步代码执行完毕，开始执行异步代码，先执行微任务，输出4，在执行延时器代码。输出5。

---

好啦。以上就是小谭今天分享的内容啦，也欢迎各位一起来讨论技术呀！文章中有不足的地方小谭也欢迎各位指正探讨，不胜感激！