面试问题总结以及扩展11.14

1. Es6新增的特性
   1）let、const
   2）箭头函数
   3）解构赋值
   4）模范字符串
   5）展开语法
   6）set、map
   7）promise
   8）generator
2. Map和object的区别
   ​​​1)Object的key 必须是简单数据类型（整数、字符串、symbol），map的key可以是任何类型2)Map元素插入顺序是FIFO，object没有Map继承Object
   3)Map在存储大量元素的时候性能表现更好
   4)写入删除密集的情况应该使用 Map
3. set和map的区别
   1）Set以[value, value]的形式储存元素,Map以[key,value]的形式储存元素
   2）map的值不作为键，键和值是分开的
   
   扩展：set和map
4. 箭头函数和普通函数的区别
   1.箭头函数不会创建自己的this
   2.箭头函数继承而来的this指向永远不变（重要）
   3.call()、apply()、bind()无法改变箭头函数中this的指向
   4.箭头函数不绑定arguments,取而代之用rest参数…解决
   5.不能使用new操作符(作为构造函数使用)
   6.不能使用原型属性
   7.不能简单返回对象字面量
   8.箭头函数不能换行
5. For in 和for of的区别

   for in循环只遍历可枚举属性
   for of 不可以遍历普通对象
   for…in语句以任意顺序迭代对象的可枚举属性。
   for…of 语句遍历可迭代对象定义要迭代的数据。
   for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值
   for in总是得到对象的key或数组、字符串的下标
   for of总是得到对象的value或数组、字符串的值

6. 常用的hooks
7. useRef的详细内容
8. React18新增的hooks了解吗
   useId
   useTransition
   useDeferredValue
   useSyncExternalStore
   useInsertionEffect
9. 场景题：如何获取更新前的值
10. creatRef和useRef的区别
    createRef用于类组件
    useRef用于函数组件
11. webpack的loader和plugins
    
    loader:
    1)处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，最后一个loader最先执行，第一个loader最后执行。
    2)第一个执行的loader接受源文件作为参数内容，其他的loader接受前一个loader的返回值作为自己的参数，最后一个执行的loader会返回此模块的JavaScript源码。
     
12. 常见的loader和plugins
13. webpack配置
14. http协议
15. 服务端渲染
16. 浏览器缓存方式
17. Cookie、localStorage、sessionStorage的区别
    都是本地存储的方案

    ①存储位置：cookie是由服务器端写入的，而SessionStorage、LocalStorage都是由前端写入的；

    ②存储大小：cookie的存储空间比较小，大概4KB,而SessionStorage、LocalStorage存储空间比较大，大概5M；

    ③生命周期：cookie的生命周期是由服务器端在写入的时候就设置好的，SessionStorage是页面关闭的时候就会自动清除，LocalStorage是写入就一直存在，除非手动清除；刷新页面两种都还存在

    ④数据共享：三者的数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。

    ⑤发送请求时是否携带：在前端给后端发送请求的时候会自动携带cookie中的数据，但是SessionStorage、LocalStorage不会；

    ⑥应用场景：cookie一般用于存储登录验证信息SessionID或者token，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条功能，多页表单信息填写，LocalStorage常用于存储不易变动的数据，减轻服务器的压力。

18. ServiceWorker
    是浏览器的一个高级特性，是独立于网页运行的一个脚本，他的出生就是为了解放主线程。因为，浏览器中的JavaScript都是运行在单一个线程上，随着web业务变得越来越复杂，js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。 而web worker由于独立于主线程，则可以将一些复杂的逻辑交由它来去做，完成后再通过postMessage的方法告诉主线程。
    离线缓存的方式，但是不能操作DOM
    生命周期有注册register，安装install，激活active，拦截网络请求fetch
19. 首屏优化
20. 性能优化的方式