前言

最近刚面试了一家互联网公司的中级前端开发工程师。好家伙，一面上来直接开始手写题，考算法什么的。

特此记录一下考题。看能不能帮助到大家，有些题忘记了，记录个大概吧。

1.let，var区别

for(let i = 0; i<5; i++) {

setTimeout(() => console.log(i),0)

}

问执行结果，以及let换成var的执行结果

我的回答：

我当时一看就是靠let块级作用域的，我一般for循环的话也喜欢用let，所以基本是答对了，但是却输错了循环次数，无语子。。。

正确答案：

let: 0 1 2 3 4

var: 5 5 5 5 5

解析：

var声明的是全局变量，然后的话setTimeout是异步函数，等循环完i变成了5，所以输出了5个5；

而let是块级的，每次循环有自己的局部作用域，因此输出0-4

2. event loop执行结果

题记不清了，大概是下面这两种，我大概写了一下

setTimeout(function() {
  console.log('1')
  new Promise(function() {
      console.log('2')
  }).then(
    console.log('3')
  )
},0)


new Promise(function() {
  console.log('4')
}).then(
  console.log('5')
)

setTimeout(function() {
  new Promise(function() {
      console.log('6')
  }).then(
    console.log('7')
  )
},0)

正确答案:

script start 2 3 script end 1 4

setTimeout(function() {
  console.log('1')
  new Promise(function() {
      console.log('2')
  }).then(
    console.log('3')
  )
},0)


new Promise(function() {
  console.log('4')
}).then(
  console.log('5')
)

setTimeout(function() {
  new Promise(function() {
      console.log('6')
  })
},0)

正确答案:

4 5 1 2 3 6

我的回答:

第一个回答挺顺利的，然后第二个卡住了，当时有点蒙了，第一次写结果想成了执行完所有宏任务再去执行微任务队列。后来反应过来了，是执行一个宏任务，然后执行所有微任务。

所以当时就卡在了最后是1263 还是 1236 ，还好最后改正了

3. 算法题

有一个函数add：

执行 add(1)(1+2+3+4) ，结果为11

执行 add(2)(1+2+3+4) ，结果为12

执行 add(2)(1+2+3+4+1+1) ，结果为14

请写出add这个函数

我的回答：

首先的话，我先去观察这个函数的特点。

观察片刻，发现是第二次输入的值加上第一次输入的值

然后的话，该函数能连续执行，肯定add函数内部要返回一个方法

所以我的答案:

第一次写出来：

function add(num) {
  let result 
  return function(num,...rest){
    let result = rest.reduce((a,b) => a+b)+n
    return result
  }
}

第一次的答案我按照我的思路，后面的值加前面的值，所以后面值接收用...rest剩余参数，因为第二次传参数量不一定嘛，但是面试官提示，第二次调用没有传num。所以我才反应过来，第二次只是传第二次的值。

然后我立马想到用arguments代替rest参数，然后的话，第一个传入的数字在第一层函数里声明下，这要就构成了闭包，第二层函数可以直接用了~ Nice

function add(num) {
  let n = num
  return function(){
    let arr = Array.from(arguments)
    let result = arr.reduce((a,b) => a+b)+n
    return result
  }
}

4. promise考察

var a = Promise.resolve()
var b = Promise.resolve('foo')
var c = Promise.resolve(() => null)
var d = Promise.resolve(() => undefined)
var e = Promise.resolve(() => 'foo')
var f = Promise.resolve(() => Promise.resolve('foo'))
var g = Promise.resolve(() => Promise.reject('err'))
var h = Promise.resolve(() => new Promise(() => {
  Error('err')
}))
console.log(a,b,c,d,e,f,g,h)

请写出a，b，c，d，e，f，g，h的值

我的回答：

我看到这题，直接一脸懵逼，瞎说了一通，一半答错了

正确答案：
Promise {<fulfilled>: undefined}

Promise {<fulfilled>: 'foo'}

Promise {<fulfilled>: f}

解析：

MDN详解

Promise.resolve()方法返回一个 Promise使用给定值解析的对象。如果该值是一个承诺，则返回该承诺；如果值是一个 thenable（即有一个 "then" method），返回的 promise 将“跟随”那个 thenable，采用它的最终状态；否则返回的 Promise 将用该值实现。这个函数将嵌套的类似 promise 的对象层（例如，解析为解析为某事物的 promise）扁平化为单层。

有时需要将现有对象转换为promise对象，Promise.resolve()方法就起到了这个作用。

Promise.resolve('foo')

等价于

new Promise(resolve => resolve('foo'))

Promise.resolve()共有四种参数

第一种：不带任何参数

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');
// one two three

相当于一个resolve状态的promise对象

第二种：普通变量或者普通对象

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

相当于resolve状态的promise对象

第三种：参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

第四种：参数是一个thenable对象

//thenable对象指的是具有then方法的对象，比如下面这个对象

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
//Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});
//thenable对象的then方法执行后，对象p1的状态就变为resolved，
//从而立即执行最后那个then方法指定的回调函数，输出 42

5. 算法题，判断有效括号

写一个方法，输入一个只有括号的字符串，(){}[] [(),{}] {[()]} 这些都会返回true

([)] (}) 这种都会返回false

我的回答：

我一看这个题，心想：好家伙，我在力扣上刷到过，稳了!再一想，忘了怎么做了。。。焯！

第一次作答：

我的思路是先判断是不是空字符串和偶数，排除特殊情况。

然后遍历这个字符串，对元素的六种情况（ , ）,{ , } , [ , ] ，分别做判断，比如如果是左小括号，它的右侧必须是右小括号。

but！面试官提示，只能判断 (){}[] 这种情况，那 {[()]}这种怎么办呢？

第二次作答：

我反手想到另一种解决办法，双指针，遍历两层字符串，第一层正向，第二层反向，然后比如第一层如果是左小括号，第二层就必须是右小括号。

but！面试官提示，这只能判断{[()]}这种情况了

第三次作答：

焯！！什么鬼，我蒙圈了。突然我灵机一动，想到挨个去找到匹配成功的括号，然后将匹配成功的括号从字符串中删除，最后看这个字符串剩下什么。

就在这时，面试官也提示我，可以想想换一种数据结构，考虑一下用栈。其实我的想法基本也是和栈差不离，只不过不会。。。

正确答案：

var isValid = function(s) {
    const n = s.length;
    if (n % 2 === 1) {
        return false;
    }
    const pairs = new Map([
        [')', '('],
        [']', '['],
        ['}', '{']
    ]);
    const stk = [];
    for (let ch of s){
        if (pairs.has(ch)) {
            if (!stk.length || stk[stk.length - 1] !== pairs.get(ch)) {
                return false;
            }
            stk.pop();
        } 
        else {
            stk.push(ch);
        }
    };
    return !stk.length;
};

到这里，手写题就结束了，然后问了一些技术题：

6. 说一下diff算法

我的回答：

1. vue的diff算法是从两侧向中间节点去对比的。并且使用了双指针，边对比边更新。而react的diff算法是从左到右去对比的，对比时把改变的节点生成patch树，对比完才去打补丁。

2. diff算法一般要指定节点key，也就是唯一值，这样才能在节点进行删除或者排序操作后，保证diff对比的准确性。

3. vue3的diff算法相比vue2做了优化，它会在编译阶段判断每个节点是否是动态节点，通过看节点上有没有像v-on，:class等这种符号，然后收集动态节点生成block tree，在dom发生变化时，只会去比对block tree。因为vue3对静态节点做了静态提升，所以静态节点只会渲染一次。

4. vue3的diff算法还再用了patchFlag标记动态节点，更高效的判断修改了哪些东西。

7. 输入url到页面显示的过程

1. url没输入完成时，查找书签，历史记录等，可以智能提示，补全地址

2. 因为输入的是域名，所以要先解析出域名映射的ip地址。所以要先进行DNS解析，首先去看浏览器缓存有没有，没有的话请求本地DNS服务器，也就是本地运营商，还没有再请求根DNS服务器，然后再顶级域名服务器，最后权威域名服务器。知道找到为止。

3. 解析出ip地址后，进行tcp连接

4. 浏览器网络进程发起请求，三次握手请求数据，拿到数据后，四次挥手，释放tcp连接

5. 浏览器浏览器进程准备开始渲染，准备好后ipc进程通信通知渲染进程开始渲染

6. 渲染进程开始渲染，先解析html，生成dom树，然后解析css规则，生成css树，然后结合生成render树，这时的render树会去掉head标签以及dispaly：none的节点，所以和dom树结构不完全相同。最后布局，绘制。

8. webpack工作过程，以及使用过webpack的哪些东西

工作过程的话，我可能当时没理解对，说了点ast抽象语法树的东西。实际应该是说这个：

compile 开始编译
make 从入口点分析模块及其依赖的模块，创建这些模块对象
build-module 构建模块
after-compile 完成构建
seal 封装构建结果
emit 把各个chunk输出到结果文件
after-emit 完成输出

然后使用我说的这些：

1. 配置svg啥的loader

2. 开sourcemap

3. 开gzip压缩

4. 配置跨域

5. 分包

6. 安装插件

7. 第三方库按需加载

最后

如果哪里有不对或者补充的，欢迎大家指正或补充！

【面试】中级前端面试题记录及答案总结

前言

目录

1.let，var区别

2. event loop执行结果

3. 算法题

4. promise考察

Promise.resolve()共有四种参数

5. 算法题，判断有效括号

6. 说一下diff算法

7. 输入url到页面显示的过程

8. webpack工作过程，以及使用过webpack的哪些东西

最后

猜你喜欢