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

前言

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

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

目录

--手写题--

1.let,var区别

2. event loop执行结果

3. 算法题

4. promise考察

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

--技术题--

6. 说一下diff算法

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

9. webpack工作过程,以及使用过webpack的哪些东西

最后


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 {: undefined}

Promise {: 'foo'}

Promise {: f}

Promise {: f}

Promise {: f}

Promise {: f}

Promise {: 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. 第三方库按需加载

最后

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

你可能感兴趣的:(前端实用知识学习,面试,算法,promise,闭包)