2020.8腾讯前端秋招面经

2020.8秋招腾讯前端面经

第一次一面

1. 数学与统计学院的学生为什么选择前端
2. 二叉树的中序遍历
3. n阶台阶，一步或者两步走，有多少种走法

定义$f(n)$为n阶台阶的走法种类，以逆向思维来考虑，走向第n阶台阶前可能位于第n-1阶台阶或者n-2阶台阶，转换为表达式：$f(n)=f(n-1)+f(n-2)$

首先从数学的角度去思考问题
$f(n)-bf(n-1)=a(f(n-1)-bf(n-2))$
易解得$a=(-1-\sqrt{5})/2,b=(-1+\sqrt{5})/2$
令$a_n=f(n)-(-1+\sqrt{5})/2f(n-1)$，则$$a_n=(-1-\sqrt{5})/2a_{n-1}$$

再以程序员的角度思考
利用循环会比递归效率更高

function jumpFloor(number)
{
    if(number===0){
        return 0;
    }
    else if(number===1){
        return 1;
    }
    else if(number===2){
        return 2;
    }
    else{
        var pre = 1;
        var cur = 2;
        for(var i = 2;i<number;i++){
            cur+=pre;
            pre = cur-pre;
        }
        return cur;
    }
}

4. 闭包
5. 原型链
6. SQL学生成绩，如何按区间筛选，并且求出每个区间的平均值

第二次一面

1. 两个字符串最大子串

想写下面这个算法的，但是最后没写出来，面试官点评说，想不出来可以考虑，先截取子串，再利用 indexOf 去判断是否存在就可以

function lcs(word1,word2) {
	var max = 0;
	var index = 0;
	var lcsarr = new Array(word1.length + 1);
	for (var i = 0; i <=word1.length + 1; i++) {
		lcsarr[i] = new Array(word2.length + 1)
		for (var j = 0; j <= word2.length+1; j++) {
			lcsarr[i][j] = 0;
		}
	}
	for (var i = 0; i <=word1.length; i++) {
		for (var j = 0; j <= word2.length; j++) {
			if (i == 0 || j == 0) {
				lcsarr[i][j] = 0;
			}else {
				if (word1[i - 1] == word2[j - 1]) {
					lcsarr[i][j] = lcsarr[i - 1][j - 1] + 1;
				}else {
					lcsarr[i][j] = 0;
				}
			}
			if (max < lcsarr[i][j]) {
				max = lcsarr[i][j];
				index = i;
			}
		}
	}
	var str = "";
	if (max == 0) {
		return "";
	}else{
		for (var i = index - max; i < index; i++) {
			str += word2[i];
		}
		return str;
	}
}

2. 实现fun函数满足fun(2)(3)(4)=2，要求考虑扩展

函数柯里化

function fun(num){
    var sum = 1;
    sum= sum * num;
    var tempFun=function(numB){
        if(arguments.length===0){
            return sum;
        }else{
            sum= sum * numB;
            return tempFun;
        }

    }
    
    tempFun.valueOf=function(){
        return sum;
    }
    tempFun.toString=function(){
        return sum+'';
    }
    
    return tempFun;
}

3. watch和computed区别，对于computed缓存性的理解

计算属性是自动监听依赖值的变化，从而动态返回内容；监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
区别
1.computed具有缓存性，不会重复计算，适用于一个数据受多个数据影响/当数据变化需要执行异步或开销较大的操作。
2.watch不具有缓存性，适用于一个数据影响多个数据/存在复杂逻辑的操作。
补充
1.watch同样可以实现监听多个数据
利用computed将多个数据整合成一个对象，再用watch监听合成的对象。
2.computed 和 methods 的区别
methods是一个方法，它可以接受参数，而computed不能。但computed是可以缓存的，methods不可以。
3.computed 是否能依赖其它组件的数据？
computed可以依赖其他computed，甚至是其他组件的data
4.watch 是一个对象时，它有哪些选项？
handler（处理事件）
deep 是否深度 （可以利用这个选项监听对象中的属性变动）
immediate 是否立即执行
5.为什么computed具有缓存性
看完这篇你一定懂computed的原理
以我的理解来看，主要是因为computed里面有个dirty属性，每次执行之后watcher.dirty会设置为false，只要依赖的data值改变时才会触发，watcher.dirty为true,从而获取值时从新计算。

4. 惰性加载

vue 懒加载

5. vue-router怎么触发模块变化

hash模式
在浏览器中符号#以及#后面的字符称之为hash，用window.location.hash读取。
hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
特点：
1.hash虽然在URL中，但不被包括在HTTP请求中；#用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
2.hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
3.每一次改变#后的部分，令在浏览器增加历史记录，允许使用“后退”

history模式
history采用HTML5的新特性；提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
特点：
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，后端如果没有对应的路由处理，将返回 404 错误。

路由守卫

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

动态路由
利用 addRoutes API可以实现增加路由