1.已知如下对象，请基于es6的proxy方法设计一个属性拦截读取操作的例子，要求实现去访问目标对像example中不存在的属性时，跑出错误：Property “$(property)” does not exit (今日头条)

  1. // 案例代码
  2. const man = {
  3.     name:'jscoder',
  4.   age:22
  5. }
  6. // 补全代码
  7. const proxy = new Proxy(...)
  8. proxy.name  // 'jscoder'
  9. proxy.age   // 22
  10. proxy.location // Property '$(property)' does not exist
  1. // 案例代码
  2. const man = {
  3.     name:'jscoder',
  4.   age:22
  5. }
  7. const proxy = new Proxy(man,{
  8.   get(target,property){
  9.     if (target){
  10.       return target[property]
  11.     }else{
  12.       throw new TypeError(`Property ${property} does not exist`)
  13.     }
  14.   }
  15. })

2.红灯三秒亮一次，绿灯一秒亮一次，黄灯两秒亮一次，实现一个函数，如何让三个灯不断交替重复亮灯？（用Promise实现）三个亮灯函数已经存在：

  1. function red(){
  2.   console.log('red')
  3. }
  4. function green(){
  5.   console.log('green')
  6. }
  7. function yellow(){
  8.   console.log('yellow')
  9. }
  1. function red() {
  2.   console.log('red');
  3. }
  4. function green() {
  5.   console.log('green');
  6. }
  7. function yellow() {
  8.   console.log('yellow');
  9. }
  11. function light(color, timer) {
  12.   return new Promise(resolve => {
  13.       setTimeout(() => {
  14.         color();
  15.         resolve()
  16.       }, timer);
  17.   })
  18. }
  20. function start() {
  21.   Promise.resolve().then(() => {
  22.       return light(red, 3000)
  23.   }).then(() => {
  24.       return light(green, 2000)
  25.   }).then(() => {
  26.       return light(yellow, 1000)
  27.   }).finally(() => {
  28.       return start()
  29.   })
  30. }

3.按顺序写出控制台打印结果（2020碧桂园）

  1. var User = {
  2.   count:1,
  3.   action:{
  4.     getCount:function(){
  5.       return this.count
  6.     }
  7.   }
  8. }
  9. var getCount = User.action.getCount
  10. setTimeout(() => {
  11.   console.log('result 1',User.action.getCount())
  12. });
  13. console.log("result 2",getCount())
  15. //result 2 undefined
  16. //result 1 undefined

4.简答（字节跳动 二面）

你觉得TS和JS有什么区别
TS你都用过哪些类型
TS中type和interface的区别

  1. TS为静态语言需要进行数据类型的指定，而JS是动态弱类型语言。
  2. 交叉类型
  3. 联合类型
  4. 类型保护
  5. 可为null的类型
  6. 字符串字面量类型
  7. type的作用是给类型生成一个新的别名，而interface的作用是定义一组具体的对象。

6.asyn/await 方法右边执行出错怎么处理

  1. 代码简单的话用Try catch
  2. 复杂的话单个运行方法添加独立的catch处理

7.说一下event loop的过程?promise定义时传入的函数是什么时候执行的？

  1. 事件循环：事件循环的作用是持续监听调用栈和消息队列，一旦调用栈所有的任务都结束了，事件循环就会从消息队列当中取出第一个回调函数压入到调用栈之中
  2. 调用者指定执行成功或者失败时执行

8.说一下防抖函数的应用场景，并简单说一下实现方式

  1. 滚动条滚动触发函数执行一类的高频触发
  2. 通过闭包定时器来实现防抖函数

9.说一下V8的垃圾回收机制

  1. 采用分代回收的思想
  2. 内存分为新生代、老生代
  3. 针对不同对象采用不同算法

10.performance API 中什么指标可以衡量首屏时间

  1. performance.timing.loadEventEnd:返回当前网页 load 事件的回调函数运行结束时的 Unix 毫秒时间戳。如果该事件还没有发生,返回 0。
  2. performance.timing.navigationStart:当前浏览器窗口的前一个网页关闭,发生 unload 事件时的 Unix 毫秒时间戳。如果没有前一个网页,则等于 fetchStart 属性，或者在mounted生命周期中调用performance.now()得到当前网页 从 performance.timing.navigationStart 到 当前时间的的 微秒数。

11.在EcmaScript新特性中，暂时性死区有什么作用

形成封闭作用域

12.观察者模式和发布订阅模式的区别

观察者模式由具体目标调度，每个被订阅的目标里面都需要有对观察者的处理，会造成代码的冗余。而发布订阅模式则统一由调度中心处理，消除了发布者和订阅者之间的依赖。

13.gulp的构建流程

第一步gulp安装
第二步样式编译
第三步脚本编译
第四部模板文件编译
第五步图片和字体文件转换
第六步其他文件及文件清除
第七步自动加载插件
第八步热更新开发服务器
第九步监事变化以及构建优化
第十步useref文件引用处理
第十一步文件压缩
第十二步重新规划构建过程

14.package-lock.json 有什么作用，如果项目中没有他会怎么样，举例说明

是将使用的库的版本锁定,如果下次再安装依然使用这些版本的库

  1. 执行安装一次npm install,它就会自动生成
  2. 如果你用npm,同事也一定要用npm,如果对方用yarn(yarn对应的是yarn.lock),就不起作用,这种情况就只能写死package.json容易出问题的库的版本

15.webpack 常用配置项有哪些，并且说明用途

入口文件配置：entry参数
输出文件：output参数
path参数表示生成文件的根目录，需要传入一个绝对路径。path参数和后面的filename参数共同组成入口文件的完整路径
publicPath参数表示的是一个URL路径（指向生成文件的根目录），用于生成css/js/图片/字体文件等资源的路径，以确保网页能正确地加载到这些资源。
各种Loader配置：module参数

16.阐述 webpack css-loader 的作用和原理

对CSS进行打包，借助于Loader就可以加载任何类型的资源
处理其他类型文件的模块打包工作需要加载对应类型文件的加载器
内部的loader只能加载处理JS文件，对于其他文件添加对应loader
安装加载对应模块后还需在配置文件中对加载规则进行配置

17.webpack中loader和plugin的区别是什么

1 . loader运行在打包文件之前（loader为在模块加载时的预处理文件）
2. plugins在整个编译周期都起作用。

18.webpack、rollup、parcel他们的优劣

webpack为处理资源管理和分割代码而生，可以包含任何类型的文件。灵活，插件多。

rollup用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。

parcel超快的打包速度，多线程在多核上并发编译，不用任何配置。

19.babel.config.js 和 .babelrc 有什么区别

baberc 的加载规则是按目录加载的，是只针对自己的代码。config的配置针对了第三方的组件和自己的代码内容。babel.config.js 是一个项目级别的配置，一般有了babel.config.js 就不会在去执行.babelrc的设置。

20.webpack中tree shaking 的用途和原理是什么

「摇掉」代码中未引用部分
未引用代码（dead-code）
自动监测未引用代码自动移除
Tree-Shaking 不是指某个配置选项，是一组功能搭配使用后的优化效果，生产模式（production）下自动开启
Tree-shaking的usedExports负责标记「枯树叶」只是为死代码做标记，真正移除（minimize）是通过压缩工具来进行的，使用terser-webpack-plugin

21.阐述一下 eventbus 的原理，讲述 eventbus 在 vue中的实践

EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。

  1. class Bus {
  2.   constructor () {
  3.     this.callbacks = {}
  4.   }
  5.   $on(name,fn) {
  6.     this.callbacks[name] = this.callbacks[name] || []
  7.     this.callbacks[name].push(fn)
  8.   }
  9.   $emit(name,args) {
  10.     if(this.callbacks[name]){
  11.        //存在遍历所有callback
  12.        this.callbacks[name].forEach(cb => cb(args))
  13.     }
  14.   }
  15. }

22.vue-loader 的实现原理是什么

基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取