2020-11-01

前端面试学习

  离职后一直没有工作，一直在家里啃老本。现在终于决定要找工作了，却对学习提不起兴趣，面试题也刷不下去。
 写文章激励自己，一日一更，希望自己可以找到工作。我是个三分钟热度的人，十分害怕自己面一家一家不行，就想回炉重造，所以想再坚持坚持。
 今天先整理一下我面的两家，一家是电话面试，一家是直接去通州面的。因为没怎么看面试题，面的时候一脸懵逼，现在我找我认为的正确的答案放在问题下面，如果各位大佬有更好的答案可以在评论区留言，感觉您的帮助。

第一家电面

• 登录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.$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里面新增一个属性 让页面理解响应

$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

前端其实知识点很碎，如果可以，一起学习吧！一个不喜欢一个人刷题的小疯子。有可能遇到的面试题也可以在评论下面写，我想我一定会看的🧐。