派大星的面试题以及解决

1、promise 与 async-await 有什么区别?

解答：

promise 是一个异步编程的解决方案，也是一个对象。提高了代码可读性，有效解决了**回调地狱问题，**它可以链式调用。
async 的用法，它作为一个关键字放到函数前面，调用该函数会返回一个 promise 对象，await 关键字只能放到 async 函数里面，await 是等待的意思。其实它后面可以放任何表达式，不过我们更多的是放一个返回 promise 对象的表达式，它等待的是 promise 对象的执行完毕，并返回结果。该promise的reosolve值就是函数return的值。(示例中reosolve值就是字符串”done”)
promise有三种状态
1、reosolve：意味着操作成功完成。还有个名称叫fulfilled；
2、rejected：意味着操作失败；
3、pending: 初始状态；

2、vue template 怎么理解

解答：

简捷明了的回答： vue template是用来声明虚拟dom的标签模版，相对于render函数 template是用来渲染虚拟dom的标签模版

vue 的模版语法，是一种形象描述视图的标记语言，在通过 vue 的 vue-template-compiler 解析成 render 函数，通过 vnode 加上 diff 算法统一替换 dom 形成真实视图，所以 vue 和 react 在本质上类似，也就是说 vue 可以和 react 一样通过 jsx 来描绘视图，不同的是 vue 提供了一套更符合前端思维的标记语言

3、路由传参

this.$router.push 进行编程式路由跳转
router-link 进行页面按钮式路由跳转
this.$router.params 获取路由传递参数
this.$route.quert 获取路由传递参数
params query 都是传递参数的，params 不会在 URL 上出现，params 参数是路由的一部分，一定要存在的 query 是我们通常看到的 URL 后边的？后面显示的参数

4、移动端 1 px 遇到过嘛你是如何解决的

解决：

第一种：只要关于1px 的设置一般类似于给border 设置都用 PX 不识别
第二种：使用子绝父相给子元素设置transform：scale （0.5）进行缩放一半
分为两种：假设给上边框设置就是 transform：scale Y（0.5）
以及给全部的边框设置就是 transform：scale （0.5）
第三种：就是引用 less 喝 sass 库
```
以上三种都可以解决这个问题
```

5、数组去重文档

1、双重for循环

使用方法: 双层循环，外层循环元素，内层循环时比较值。值相同时，然后splice 删去这个值。
注意事项：在第二层最后面设置 => j - - 防止数组塌陷

function unique(arr){            for(var i=0; i<arr.length; i++){for(var j=i+1; j<arr.length; j++){if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个arr.splice(j,1);j--;}}}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,
NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]    //NaN和{}没有去重，两个null直接消失了

2、利用ES6 Set去重（ES6中最常用）

使用方法： ES6中利用 set 中元素都自带唯一标识然而进行数组去重

function unique (arr) {return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,NaN，NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

3、利用indexOf去重

使用方法：利用for循环遍历数组，通过indexOf 判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array = [];for (var i = 0; i < arr.length; i++) {if (array .indexOf(arr[i]) === -1) {array .push(arr[i])}}return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,
NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重

4、利用filter

使用方法：通过filter方法数组去重使用indexOf 判断循环当前数组元素的索引和循环的索引是否一致，一致就返回，然后再通过filter方法筛选数组返回满足条件的元素

function unique(arr) {return arr.filter(function(item, index, arr) {//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素return arr.indexOf(item, 0) === index;});
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

5、利用Map数据结构去重

使用方法：创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

function arrayNonRepeatfy(arr) {let map = new Map();let array = new Array();  // 数组用于返回结果for (let i = 0; i < arr.length; i++) {if(map .has(arr[i])) {  // 如果有该key值map .set(arr[i], true); } else { map .set(arr[i], false);   // 如果没有该key值array .push(arr[i]);}} return array ;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

6、vue双向数据绑定的原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter（制订者），getter（获得者），在数据变动时发布消息给订阅者，触发相应的监听回调。

当我们使用Object.defineProperty()劫持各个属性getter和setter时，传递的参数有三个分别是对象（通常使用的函数）属性名对象 { getter 和 setter }

当我们需要获取数据就使用getter方法我们需要设置属性的时候就用setter方法使用setter方法时

我们就获取函数中元素然后更新新的属性名赋值

具体步骤：

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

7、vue的生命周期有哪些

vue 实例从创建到销毁的过程就是生命周期。

也就是从开始创建、初始化数据、编译模板、挂在 dom -> 渲染、更新 -> 渲染、准备销毁、销毁在等一系列过程

vue的声明周期常见的主要分为4大阶段8大钩子函数

另外三个生命周期函数不常用

keep-alive 主要用于保留组件状态或避免重新渲染。

activated只有在keep-alive 组件激活时调用。

deactivated只有在keep-alive 组件停用时调用。

errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

一、创建前 / 后

在beforeCreate生命周期函数执行的时候，data和method 还没有初始化

在created 生命周期函数执行的时候，data和method已经初始化完成这里请求数据data 已经拿到数据

二、渲染前/后

在beforeMount 生命周期函数执行的时候，已经编译好了模版字符串、但还没有真正渲染到页面中去

在mounted 生命周期函数执行的时候，已经渲染完，可以看到页面

三、数据更新前/后

在beforeUpdate生命周期函数执行的时候，已经可以拿到最新的数据，但还没渲染到视图中去。

在updated生命周期函数执行的时候，已经把更新后的数据渲染到视图中去了。

四、销毁前/后

在beforeDestroy 生命周期函数执行的时候，实例进入准备销毁的阶段、此时data 、methods 、指令等还是可用状态

在destroyed生命周期函数执行的时候，实例已经完成销毁、此时data 、methods 、指令等都不可用

8、移动端 rem适配你是怎么封装适配的

1. Vant 组件（375px）如何和咱们的 750px 的设计稿结合起来进行适配 (亮点)

移动端适配：amfe-flexible
postcss插件及配置 postcss-pxtorem。
lib-flexible 将屏幕宽度分成了10份, 设计稿标准宽度为750px，所以设计稿rootValue应该为75,
但vant组件的设计标准值为37.5,需要根据css文件是自定义css还是vant的css文件来设置不同的标准。rootValue可以是一个函数,形参为css文件对象并可以拿到文件路径file。

module.exports = {// 配置要使用的 PostCSS 插件plugins: {// 配置使用 autoprefixer 插件// 作用：生成浏览器 CSS 样式规则前缀// VueCLI 内部已经配置了 autoprefixer 插件// 所以又配置了一次，所以产生冲突了// 'autoprefixer': { // autoprefixer 插件的配置//    配置要兼容到的环境信息//   browsers: ['Android >= 4.0', 'iOS >= 8']// },// 配置使用 postcss-pxtorem 插件// 作用：把 px 转为 rem'postcss-pxtorem': {rootValue ({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75},propList: ['*']}}
}

9、js的执行机制 eventloop

js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制（这个属于js源码）
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
先执行微任务，要等所有的微任务执行完了再去执行宏任务

10、什么是深拷贝、什么是浅拷贝

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。
应用场景：
1、浅拷贝：
1> […setArray] 展开运算符
2、深拷贝：
1> deepCopy() 自定义方法
2>JSON.parse(JSON.stringify( )) 序列化
3>递归
4>Lodash库

11、函数节流与防抖

1，解释

节流：事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！

2，使用场景：

节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。

12、在开发中，session是公认的比Cookie安全。为什么？

第一点，先说下为什么Cookie不安全：一：在我过去的面试经历中，有一位技术经理告诉过我，他可以通过将Cookie的文件拷贝到另一台计算机，另一个客户端上进行对相同网站的登录，可以这样欺骗服务端，实现登录。是的，这就是由于Cookie是存储在客户端浏览器上的，导致用户可以直接进行操作，导致了安全性的降低。

真正的Cookie是存储在客户端的硬盘上的一个文本文件，如果两者的安全性一样，那么就可以不使用Session，这样就可以减轻服务器的负载了。

通过Cookie来获取session_id，得有两个条件：必须要有人首次进行登录之后，或者重启session才会有。第二个条件就是session_id必须是要有效的，所以必须保证session_id是最后一次登录所生成的，session在生命周期以内，且解密已经加密的session_id在短时间很难受实现。。

对于使得Session失效的方法有多种：1.重启tomcat，2.session生命周期结束（可以手动配置），3.可以调用session.invalidate();方法进行回收。

13、说下 vue 中 data 为什么要 return 一个对象？

解答：

如果是以对象中的数据返回的话，组件之中会共用同一块内存，在一个组件中修改数据，另一个组件也会受到影响，以函数 return 出去的形式，每次 return 都会重新开辟内存，各个组件中得 data 也就没有任何关系

为什么data 属性在 Vue 组件中必须是函数，但是在实例中不需要是函数？

解答：

对于 Vue 组件来说，data 属性必须是函数，因为 Vue 组件会被多次实例化，如果 data 是一个对象，被同一个组件实例化的实例们就会共享这个属性，一个实例中 data 的变化将会影响其他的实例。

14、window.location.herf 和window.open区别

window.location.herf = url 在当前页面重定向页面
window.open（url）重新打开一个页面

15、router中 push、 replace 、goback、forward

window.history.forward()
window.history.push() 前进
window.history.replace() 替换
window.history.goback() 回退