面试题20道（1）

1.rem和em的区别？

em长度单位相对于父元素的font-size，值是不固定的，一般用于字体大小，根据父元素大小缩放；

rem长度单位是相对于根元素的font-size，因为根元素只有一个，值是固定的，一般用于视口宽度，根据屏幕大小调整。

2.常见的http状态码有哪些？

200--成功；304--重定向（需要进一步操作）；404--页面未找到；500--服务器错误；401--需要身份验证。

3.跨域及解决方案。

跨域是一种安全措施，是当浏览器从一个源的文档向另一个源请求资源时，遇到协议或者域名等有差异，浏览器就会阻止这次请求。

只有浏览器才存在跨域
-cors后端配置响应头，真正意义上的解决跨域
-jsonp立勇<script>的src属性，需要前后端配合，并且只能解决get请求的跨域。
-配置代理服务器
    1.nginx
    2.利用vue-cli
        

-devServer:{proxy:'目标服务器地址'},请求是axios.get('代理服务器地址/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath()
        -devServer:{
            proxy:{
                '/api':{
                    target:'目标服务器地址',
                    pathRewrite:{'^/api':''}
                }
            }
        }
        axios.get('代理服务器地址/api/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath()

4.npm和yarn的区别。

两者都是node的包管理工具，其中yarn是新一代包管理工具，yarn使用本地缓存和并行下载来提高性能，在性能、可靠性、和安全性方面都优于npm，使用体验上也更加友好，但是npm也在不断改进。

5.this在JS中作用。

（1）全局作用域中，this指向window对象或global对象，严格模式下指向undefined。

（2）对象的函数方法中，this指向调用该函数的对象。

（3）使用了call、apply和bind的话，this指向绑定的对象。

（4）箭头函数的this取决于上一级作用域的this。

6.堆栈的数据清除的顺序。

在堆中，存储的数据没有固定位置，存储和释放都是由程序员手动管理的，数据的释放顺序是不确定的。

栈中的数据清除顺序是后进先出的，最后进到栈中的数据最先被清除。

7.暂存死区。

es6使用let和const声明变量时，在变量声明前访问该变量会抛出错误的现象。因为两者声明变量时，变量不会被提升，在代码块内部形成一个暂存死区，在这里变量不会被引用。

8.原型的概念。

原型是一个对象！

9.原型和原型链。解决的问题是什么？

原型就是对象，分为显式原型和隐式原型，

（1）每个函数都有一个显式原型（prototype）。

（2）每个对象都有一个隐式原型__proto__，指向对应函数的prototype。

（3）原型对象中有一个构造器constructor，指向函数本身。

（4）每个对象都有的隐式原型__proto__，它指向该对象的函数的原型，然后该原型又有一个__proto__，指向创建它的函数的原型对象。一直逐层深入直到顶层对象Object的原型对象，最后是指向null的，这就形成了原型链。

原型链的查找就是逐级向上，该层级找不到方法时跟着__proto__的指向逐级向上查找，找到就可以使用，找不到继续向上查找，直到null返回undefined。

解决的问题：通过原型对象可以实现函数的复用和继承，原型对象可以动态添加方法和属性。

10.this借用的三个方法。

call和apply方法都是立即调用函数，而bind方法会返回一个新函数，需要在之后显式调用才会执行；call和apply的第一个参数都是指定的this指向的对象，其他参数作为函数参数传入，call的参数需要一一列举出来，apply方法参数使用数组传递。

11.事件冒泡原理 【事件流】

在某个元素上触发某个事件时，浏览器执行该元素的事件处理函数，依次执行该元素的父元素的事件处理函数，直到所有的父元素都被执行完，事件沿着DOM树向上传递。

12.函数柯里化是什么？

将多个参数的函数转换成单一参数的函数，让函数更加灵活和复用。一般使用闭包的方式实现，在一个外部函数中返回一个内部函数，可以实现函数复用和模块化，使代码更加灵活、可读性更强。

13.event-loop  浏览器循环机制是什么？

event-loop也是事件循环机制，在确保异步任务完成后，将该异步任务加入到回调队列中并被执行。分为宏任务、微任务两种，宏任务一般有setTimeout、setInterval以及事件，微任务一般是promise。

14. Promise 解决回调地狱的方案

使用到了promise的then()方法返回一个新的promise对象，因为可以将多个promise对象进行链式调用，避免了回调函数的嵌套。

还可以根据catch()方法捕捉和处理错误，异步操作中出现错误，代码可以避免进一步的错误嵌套。

15.数组方法及返回值。

push、pop、shift、unshift、concat、map、filter、find。

16.深浅拷贝实现方案。

浅拷贝：object.assign()和展开运算符。

深拷贝：JSON的转字符串和转回来的方法；lodash中的clonedeep。

17.vuex 数据仓库 数据的存储位置。

store的state里存储数据。

18.微信的本地存储。

wx.setStorageSync('key','value')是一个同步的方法，存键值对，取使用key值用getStorageSync。

wx.removeStorageSync('key')、wx.clearStorageSync()

19.路由懒加载。

在需要时动态加载路由模块，而不是应用初始化时一次性加载所有路由模块，可以提高应用速度，减少应用的初始化时间。

20.v-if 和 v-for 连用报错的解决方案。

（1）使用computed计算属性过滤，代替v-if，得到index数组后再使用v-for进行渲染。

（2）使用template标签，因为该标签可以用作渲染的占位符，当做一个不可见的容器，在内部v-if和v-for连用就不存在报错。

21.$nextTick 的原理。

（1）vue用异步队列的方式控制DOM更新和nextTikc回调先后执行。

（2）能确保队列的微任务在一次时间循环前执行完毕，考虑兼容问题做了微任务像宏任务的降级方案。

22.  .env 环境变量的作用与 配置方法。

.en环境变量是一种可以传递给程序运行环境中的键值对信息，服务器地址、文件路径、数据库等这些需要进行配置。

一般在vue.config.js中设置环境变量，通过prosexx.env对象定义变量，在plugins属性中使用definePlugin插件将变量注入到代码中，在js文件中直接使用。

23. 微信小程序获取用户信息？

（1）调用wx.login()获取code；

（2）调用wx.request()将code再传给微信，换取openid登录凭证。

24. 微信支付流程。

在登录微信小程序的情况下：

（1）将openid和订单数据发送给后端接口，接口返回核心支付数据给小程序。

（2）小程序调用微信支付API，将核心数据发送给微信，自动唤起微信支付界面，输入密码完成支付。