学会这六道前端面试题，月薪30k不是梦！

1. 标题什么是高阶组件、受控组件、非受控组件？

1. 高阶组件
   是个函数，输出结果是个新组件，可以对输入的组件就行加工，并返回一个具有特定功能的组件。
2. 受控组件
   相当于input中的value值通过state值获取，onChange事件改变state中的value值。实现了双向绑定，任意一方的数据发生变化，另一方也会随之改变 。
3. 非受控组件
   不需要设置对应的state属性，可通过ref来直接操作真是的dom。

2. vuex和redux的区别

1. 表面区别就是vuex是通过将store注入到组件实例中，通过dispatch和commit来维护state的状态，并可以通过mapstate和this.$store来读取state数据。而redux则是需要通过connect将state和dispatch链接来映射state并操作state。redux没有commit，直接通过dispatch派发一个action来维护state的数据。并且只能通过reducer一个函数来操作state。
2. rudex使用的是不可变数据；vuex是可变的数据。
3. rudex每次都是返回一个新的state；而vuex是直接改变state。

3. http的缓存机制

• 关于HTTP的缓存机制来说，这些缓存策略都会体现在HTTP的头部信息的字段上，这些策略会根据是否需要重新向服务器发起请求可以分为强缓存和协商缓存两大类。
  强缓存：请求某个资源文件时，服务端就会在response
  header中对该资源文件做缓存配置：cache-control，常见的设置是max-age public private
  no-cache no-store immutable等。当用户打开某页面，浏览器会判断缓存是否过期，没有过期就会从缓存中读取数据。
  协商缓存：协商缓存就是需要客户端和服务器两端进行交互的；每次请求回来的response
  header中的etag和last-modified；下次请求带上，服务端会进行标识和对比，如果资源更新了就会返回新的资源和对应的etag和last-modified；反之资源没有变。

4. 什么是数组扁平化，实现扁平化的方法有哪些？

• 数组扁平化，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层数组。

1. arr.flat(Infinity)
   底层原理：通过foreach遍历和递归的方式进行一层一层的遍历。
2. arr.toString.split(“,”)
3. reduce和递归来实现
4. foreach遍历和递归

5. 什么是回流和重绘

1. 回流：当rendertree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化,导致需要重新构建页面的时候，回流就产生了。
2. 重绘: 当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。
3. 结论：回流必定触发重绘，而重绘不一定触发回流。

6.webpack中在使用babel插件处理js代码的时候，为什么使用polyfill，如何使用polyfill ？

• 因为在使用preset_env 处理js代码时，无法将所有的ES6的语法全部转换成ES5语法，就比如promise、array.from以及实例方法都无法转换，这个时候需要加入垫片。

1. 在入口文件引入@babel/polyfill ，会污染全局环境
2. 在配置文件中的entry中写 ，也会污染全局环境
3. 可以配置@babel/preset-env useBuiltIns接收3个参数
   entry：不管代码 有没有用到，只要目标浏览器不支持的都会引入对应的polyfill；自动引入polyfill模块
   usage: 根据代码的使用情况，按需引入；自动引入polyfill模块
   false：不会自动引入polyfill模块
4. corejs 3.0以后的版本； 如果参数为entry，则需要在入口文件中引入两个包