面试遇到的问题

2021/9/18晚面试遇到的问题：

一、JS部分

1.写一个快速排序

快速排序（过程图解 参考啊哈算法）
跟着博主的思路和图解用自己的方法实现，再看答案。

2.用正则将url中的参数转成对象

我写了一个简单正则表达式的解析：传送门

掌握创建和执行正则表达式的语法和一些简单的正则知识即可。直接贴代码：

function urlToObj(url){
	var reg = /(\w+)=(\w+)/g; //使用捕获分组写法，即可在下面返回的数组中的第二项和第三项取到对应的值
	var res = null;
	var obj = {};
	//当reg.exec(url)的返回值为null时说明已经没有符合条件的匹配项了
	while((res = reg.exec(url))!=null){
	/*
	第一次循环res的值为一个数组，它有两个属性：index和input
	[
	  'name=xiaobai',   //表示与整个模式匹配的字符串
	  'name',           //与模式中的捕获组匹配的字符串
	  'xiaobai',        //与模式中的捕获组匹配的字符串
	  index: 23,        //表示匹配项在字符串中的位置
	  input: 'http://localhost:8080/?name=xiaobai&age=23',
	  				    //表示应用正则表达式的字符串，也就是url
	  groups: undefined //捕获组的名称
	]
	*/
		obj[res[1]] = res[2]; //给对象添加属性
	}
	return obj;
}
var url = "http://localhost:8080/?name=xiaobai&age=23";
console.log(urlToObj(url));

3.手写call函数

Function.prototype.myCall(context){
	if(typeof this !==  'function'){//this指向调用者，如果调用者不是函数，则抛出错误
		return new TypeError('Type error!');
	}
	let res = null;
	const args = [...arguments].slice(1); //取call函数第一个参数之后的其他所有参数
	context = context || window;  //如果没有第一个参数，则默认为window（浏览器环境下，node环境下为global）
	context.fn = this;  //将函数作为属性赋值给传入的对象
	res = context.fn(...args); //调用函数，将参数逐个传入
	delete context.fn;  //删除传入对象上的fn属性
	return res;
}

call方法可以接收多个参数，其中第一个参数为对象，其余参数依次追加在后面。
apply方法接收两个参数，第一个参数为对象，第二个参数为一个参数数组。
bind 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。这个解释有点绕，用代码看起来更直观。

var newFn = fn.bind(obj, args1); // newFn的this指向obj，bind方法的第一个参数作为newFn的第一个参数
newFn(args2, args3);//newFn在调用时传入的参数为他的第二、第三个参数……

二、CSS部分

4.用css实现涟漪

这题我画了三个⚪堆在一起然后就不会了。。。
还问到了transition与animate的区别，我也是一脸懵逼。
下面贴上copy过来的解答，摘自transition与animate动画区别与css中transition和animate有何区别？

1.transition没有中间状态，但多个transition可以连在一起，形成复杂效果
2.transition监听基本属性，例如height、width、padding、margin等，其值在发生改变时就会对文档流产生影响
3.动画渲染包含主线程渲染，合成线程（GPU）渲染，在transition不监听上面基本属性时，transition渲染的动画效果永远比animate线程使用更少，动画更流畅（不卡顿）
4.周期性运动，复杂动效使用animate
5. transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

• 具体实现我打算单写一个专门介绍css动画的文章，把这道题作为例题。

5.flex有哪些属性以及各属性的作用

容器属性： 项目属性：
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-items flex
align-content align-self
能说出这些属性和他们的作用以及属性值即可。

三、HTML部分

6.强缓存与协商缓存的使用场景以及如何使用。

彻底弄懂强缓存与协商缓存

四、Vue部分

7.vue的diff算法原理

Virtual Dom && Diff原理，极简版

五、计算机网络部分

8.HTTP 1.0 和 HTTP 1.1 之间有哪些区别？HTTP 1.1 和 HTTP 2.0 的区别？

HTTP1.0、HTTP1.1和HTTP2.0的区别

9.长连接，短连接

http的长连接和短连接（史上最通俗！）

六、应用

10.PC端、移动端如何进行适配？

前端常见的适配方式的方法