疫情期间的4次远程面试+答案整理

最近开始了久违的面试之旅，感觉金三银四感觉还是存在的。于是就想分享一下最近面试到的几家公司给大家，虽然也不是什么一线厂，但是问的问题感觉也有很多共通点，整理整理之后对前端面试也自信了许多。感觉把公司名字直接贴上来有点不是很尊重，就暂时隐去了。视频面试的题我面试完马上进行记录，电话面试的根据录音一点点整理出来的。希望能给大家一点帮助吧。

第一家公司（一面）

• 社保参保人数：737
• 公司行业：软件和信息技术服务业

1. 你用vue做了什么？

此处表示很迷惑，这个问题比较大范围。后来沟通之后才知道面试官想要问你最近用vue实现了一些什么功能，然后再根据你回答的内容进一步提问。

2. JSON.stringfy() JSON.parse() 有什么作用？有多少个参数？

JSON.stringify：有三个参数,第二个参数是对内容进行处理，第三个参数是设置缩进的值
str_pretty2 = JSON.stringify(str, null, 4)

JSON.parse()：有两个参数,JSON.parse(text[, reviver])
JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
复制代码

3. 如何实现一个深拷贝？

参考下面的连接，主要是把简单的思路讲清楚就好了。建议先自己整理一遍简单思路，不然讲出来会很乱。深拷贝实现

4. websocket的相关接口有哪些？

new Websocket('')
this.ws.onopen = ()=>{}
this.ws.onclose = ()=>{}
this.ws.onmessage = ()=>{}
this.ws.onerror = ()=>{}
复制代码

5. 你知道的数组相关的API有哪些？

包括下一个答案的内容，还有pop、push、shift、unshift、slice、splice、reverse
复制代码

6. 除了 for of，遍历数组还有哪些方法？

1.for循环
2.forEach循环
3.map循环
4.for of循环
5.filter循环
6.every遍历
7.some遍历
8.reduce累加器
9.reduceRight从末位计算的累加器
10.find
11.findIndex
12.keys、values、entries
13.while
复制代码

7. 如何对下面数据实现过滤？

arr: [
  {
    key: '01',
    value: '西施'
  }, {
    key: '02',
    value: '王昭君'
  }, {
    key: '03',
    value: '杨玉环'
  }, {
    key: '04',
    value: '貂蝉'
  }, {
    key: '01',
    value: '西施'
  }, {
    key: '01',
    value: '西施'
  }
],
};

let finalResult = []
let attr = {}
for(let item of this.arr){
    if(!attr[item.key]){
      finalResult.push(item)
      attr[item.key]=true
    }
}
复制代码

8. 你知道的ES6使用到的API有哪些？

略。一般你说什么就会更深入地问你。
复制代码

9. Promise和Async的使用场景有哪些？

Promise和async/await常用的就是用来优化多重异步和异步嵌套，防止回调地狱。

加载文件、图片，接口需要先后顺序调用等。
复制代码

10. 如何让前面两个接口其中一个返回了立马调用下一个接口？

Promise.race

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    fetch('/resource-that-may-take-a-while2')
  })
]);

p
.then(console.log)
.catch(console.error);
复制代码

11. 如果有五个接口同时调用怎么办？

const p = Promise.all([p1, p2, p3, p4, p5]);
复制代码

12. vue路由如何做导航拦截？

router.beforeEach

13. vue组件通信方式有哪几种？跨组件一般怎么通信？

六种通信方式，基本上不用全答出来，常用的理解到就好。

14. vuex一般使用场景是什么？

vuex是一个专门为vue构建的状态管理工具，主要是解决多组建状态共享的问题。强调的是集中式管理。 常见场景：购物车的数据共享，登入注册

15. vue的destroy生命周期你一般怎么使用？怎么回收内存？

beforeCreated 一般用于写一个loading created一般用于请求数据，可以将loading去掉 mounted之后与dom相关的操作，因为dom才解析完成之后才触发mounted beforeDestroy一般用于在移除组件的一些定时器，绑定的事件等

内存回收： removeEventListener 用于移除事件 ClearTimeOut和ClearInterval 用于移除定时器

16. 如何动态加载组件？

VUE的动态加载组件

17. 纯前端如何控制权限？你们项目控制权限用的是什么方式？

参考链接。感觉大概答出来配合后端，在vue-router里面配合导航拦截就差不多了。

18. 下面数据如何结构赋值获取到line的第二个数据？

const node = {
    loc: {
      start: {
        line: [1,2,3],
        column: 5
      }
    }
};

let { loc: { start: {line:[,num]}} } = node;
复制代码

19. webpack如何配置某个loader只遍历部分文件？

参考链接。配置loader中的include设置遍历范围。

20. webpack如何设置别名？

vuecli3.0里面在vue.config.js的文件里配置。
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('./src'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
    }
}

纯webpack的话，可参考：https://www.cnblogs.com