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算法原理
五、计算机网络部分
8.HTTP 1.0 和 HTTP 1.1 之间有哪些区别?HTTP 1.1 和 HTTP 2.0 的区别?
9.长连接,短连接
六、应用
10.PC端、移动端如何进行适配?