前端面试学习
离职后一直没有工作,一直在家里啃老本。现在终于决定要找工作了,却对学习提不起兴趣,面试题也刷不下去。
写文章激励自己,一日一更,希望自己可以找到工作。我是个三分钟热度的人,十分害怕自己面一家一家不行,就想回炉重造,所以想再坚持坚持。
今天先整理一下我面的两家,一家是电话面试,一家是直接去通州面的。因为没怎么看面试题,面的时候一脸懵逼,现在我找我认为的正确的答案放在问题下面,如果各位大佬有更好的答案可以在评论区留言,感觉您的帮助。
第一家电面
- 登录tooken值存在那里
答:sessionStorage,localStorage
local session
- 你们做的后台管理系统权限是怎么做的?
与后台约定路由字段,后台根据登录时的用户名和密码对权限做判断,返回数组对象,前端与所有路由字段做对比,遍历出一个新的路由表,如果有不需要权限的路由可以单独,最后加进去(仅限本人上个公司)
- 有做过组件的封装 基于elementui?
其实很多实际应用中要自己去做封装的,比如弹窗样式,做出来一个固定的模块,用的时候只需要去改里面的一些显示,一些表格拖拉效果什么都可以进行二次封装(我其实对这个记的不太清楚了)
- vuex
vuex又叫状态管理器,用来管理vue的所有组件状态
为什么用vuex,它可以解决很多同步问题,比如子向父,父向子,孙向父,等等层级关系的一个数据更新,还有一些localstorage和sessionstorage.从开发的角度来说是能提高项目开发效率的。
- state提供一个响应式数据
Getter:借助vue的计算属性computed来实现缓存
Mutation:更改state方法
Action:是封装数据处理逻辑的一般方法,常用来封装异步操作。
Module:是vuex的模块拆分方案,用于解决由变量过多导致难以维护的问题。
(我其实用的的确不是很多,这个最好还是会比较好,之前组长不让用,说是会形成什么污染,后来就没有用过了,所以每家公司是不一样的,但你要会。)
- 父子组件传值
props
- 子组件改父组件的值
$emit
- 父组件和孙组件传值 abc ac是怎么传值的
this.
p
a
r
e
n
t
.
parent.
parent.parent.xx
注册全局的$bus
attrs listeners
- 怎么理解深浅拷贝
深浅拷贝问题其实就是基本类型和引用类型数据拷贝的问题。因为基本类型的数据大小是固定的,所以他保存在栈内存中;而引用类型的数据大小不固定,因而保存在堆内存中,单引用类型在栈内存中只保存一个指向堆内存的指针。
浅拷贝:对于浅拷贝来说,如果拷贝基本类型,那么就等于赋值一样,会直接拷贝其本身;但如果拷贝的是引用类型,就只会拷贝一层,如果 原对象发生改变,那么拷贝对象也会发生改变。
深拷贝:深拷贝的话就会拷贝多层,嵌套的对象也会被拷贝出来,相当于开辟一个新的内存地址用于存放拷贝的对象。
- 数组和对象的深浅拷贝
对象浅拷贝
遍历赋值
obj1={…obj}
数组浅拷贝
Array.from(arr)
Array.prototype.concat()
Array.prototype.slice()
对象深拷贝
Object.assign({},obj1) 对象有多层不能使用
JSON.parse(JSON.stringify(obj)) 方法不针对函数function
递归
- 往vue里面新增一个属性 让页面理解响应
s e t t h i s . set this. setthis.set(this.data,key,value)
- 插槽
slot
-移动端webapp项目是否是个人实现还是后端?
此为之前项目里面的问题
- 导出时如果需要传参数 通过某个ip
axios.get(’/gss/exports/orders?pageNo=1&pageSize=10’, {
responseType: ‘blob’
}).then(res=>{
if(res.status == 200){
let blob = res.data;
const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
// 新建个下载的a标签,完成后移除。
let a = document.createElement(‘a’);
let _fileName = ‘数据表格.xls’;
a.download = _fileName;
a.href = event.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
})
- 除eacharts,还知道什么其它图表库?
D3
Charts.js
Leaflet
cs
highcharts
img2css
下面第二家
- ajax原理
Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制
vue data为什么必须是个函数?
Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了。
javascript只有函数构成作用域(作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立不会相互影响。
- splice 实现添加 删除
arr.splice(p1,num,el)
p1,必需,待操作的下标位置
num,必需,要删除元素的个数 ,为0时表示添加元素
el,可靠,待添加的元素
原理
分析splice,根据参数的个数来确定是添加或删除
因为是自定义函数,所以数组必须是第一个参数
如果只有一个参数时,不合法
如果有两个参数,那么表示从第二个参数位置开始,删除数组后面位置的数据
如果有3个参数,那么表示从第二个参数位置开始,删除指定数量的数据,数量由第三个参数指定
如果有超过3个参数,在删除了指定数量数据之后,追加剩余参数所对应的数据
-
地址栏输入url,回车发生了什么
https://blog.csdn.net/Jochebed666/article/details/88377253?utm_source=app -
pomist
https://blog.csdn.net/qdmoment/article/details/98588764?utm_source=app
前端其实知识点很碎,如果可以,一起学习吧!一个不喜欢一个人刷题的小疯子。有可能遇到的面试题也可以在评论下面写,我想我一定会看的🧐。