result 说一说JS实现异步的方法？ js异步 回调函数 监听事件 settimeout promise 生成器generators yield async awt 解题思路
得分点 回调函数、事件监听、setTimeout、Promise、生成器Generators/yield、async/awt 标准回答 所有异步任务都是在同步任务执行结束之后，从任务队列中依次取出执行。 回调函数是异步操作最基本的方法，比如AJAX回调，回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 return Promise包装了一个异步调用并生成一个Promise实例，当异步调用返回的时候根据调用的结果分别调用实例化时传入的resolve 和 reject方法，then接收到对应的数据，做出相应的处理。Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题，缺点是无法取消 Promise，错误需要通过回调函数捕获。 Generator 函数是 ES6 提供的一种异步编程解决方案，Generator 函数是一个状态机，封装了多个内部状态，可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。优点是异步语义清晰，缺点是手动迭代Generator 函数很麻烦，实现逻辑有点绕 async/awt是基于Promise实现的，async/awt使得异步代码看起来像同步代码，所以优点是，使用方法清晰明了，缺点是awt 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 awt 会导致性能上的降低，代码没有依赖性的话，完全可以使用 Promise.all 的方式。 加分回答 JS 异步编程进化史：callback -> promise -> generator/yield -> async/awt。 async/awt函数对 Generator 函数的改进，体现在以下三点： - 内置执行器。 Generator 函数的执行必须靠执行器，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。 - 更广的适用性。 yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 awt 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。 - 更好的语义。 async 和 awt，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，awt 表示紧跟在后面的表达式需要等待结果。 目前使用很广泛的就是promise和async/awt
说一说跨域是什么？如何解决跨域问题？
解题思路 说一说数组去重都有哪些方法？
解题思路 key 利用对象属性key排除重复项，遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中，并把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。 利用set new一个set 参数为需要去重的数组，set会自动删除重复的元素，再将set转为数组返回。效率高 思路清晰 原型 原型链 定义一个构造函数类，构造函数数据有个prototype属性指向类函数的原型对象，原型对象有个constructor指向构造函数数据类型 每个实例对象有个隐式原型，指向函数类的原型对象Person.prototype
原型链:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。 每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针 原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子! 而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性,这... y一个链条，互相连接构成一整串链子，就是实例对象和原型对象之间的连接。 实例对象有一个指针，指向原型对象，原型对象有个指针指向原型对象的原型对象，object.prototype 当查找一个实例对象的属性的时候，首先在对象自身找，没有就根据 实例对象的隐式原型指向它的原型进行查找，，如果没有，则向它的原型的原型继续查找，知道查到obejct.prototype，它的隐式原型指向的是空null，形成一个链条。 当一个对象在查找一个属性的时候,自身没有就会根据__proto__向它的原型进行查找,如果 都没有,则向它的原型的原型继续查找,直到查到Object.prototype.proto_为null,这样也就形 new成为 由于每个对象都有原型,这样就形成了一个关联一个、层层相互依赖的从属关系,我们把它们叫做原型链(Prototype Chain); 每个对象都有一个隐式原型指向它的原型，这样形成一个关联一个 层层依赖的从属关系原型链条
每个构造函数都有一个prototype指向函数的原型对象，原型对象有个constructor指针指向构造函数，而实例对象有个内部隐式原型指针——proto——指向原型对象。
每个对象都有一个原型，当我们去查找实例对象的一个属性 的时候，首先在对象自身找，没有就去它的原型对象上查找，如果没有，就去原型对象的原型对象上去找，直到查到object.prototype，内部隐式原型指针指向为null，就形成一个链条， 根据对象内部有个隐式原型指针指向它的原型对象，
得分点 对象属性、new Set() 、indexOf、hasOwnProperty、reduce+includes、filter 标准回答 第一种方法：利用对象属性key排除重复项：遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中，并且把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。这个方法的优点是效率较高，缺点是占用了较多空间，使用的额外空间有一个查询对象和一个新的数组 第二种方法：利用Set类型数据无重复项：new 一个 Set，参数为需要去重的数组，Set 会自动删除重复的元素，再将 Set 转为数组返回。这个方法的优点是效率更高，代码简单，思路清晰，缺点是可能会有兼容性问题 第三种方法：filter+indexof 去重：这个方法和第一种方法类似，利用 Array 自带的 filter 方法，返回 arr.indexOf(num) 等于 index 的num。原理就是 indexOf 会返回最先找到的数字的索引，假设数组是 [1, 1]，在对第二个1使用 indexOf 方法时，返回的是第一个1的索引0。这个方法的优点是可以在去重的时候插入对元素的操作，可拓展性强。 第四种方法：这个方法比较巧妙，从头遍历数组，如果元素在前面出现过，则将当前元素挪到最后面，继续遍历，直到遍历完所有元素，之后将那些被挪到后面的元素抛弃。这个方法因为是直接操作数组，占用内存较少。 第五种方法：reduce +includes去重：这个方法就是利用reduce遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入到新数组中。这种方法时间消耗多，内存空间也有额外占用。 方法还有很多，常用的、了解的这些就可以 加分回答 以上五个方法中，在数据低于10000条的时候没有明显的差别，高于10000条，第一种和第二种的时间消耗最少，后面三种时间消耗依次增加，由于第一种内存空间消耗比较多，且现在很多项目不再考虑低版本浏览器的兼容性问题，所以建议使用第二种去重方法，简洁方便。
收起解题思路
得分点
同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage
域名端口协议corsjsonp
跨域当前页面中的某个接口请求的地址和当前页面的地址的协议、域名、端口某一项有不同，就说该接口跨域l
跨域限制 为了保证网页安全，出的同源协议策略。
标准回答
跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。
跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。\
JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。
postmessage：H5新增API，通过发送和接中，收API实现跨域通信。
原理是csript标签跨域跨域请求资源，将回调函数作为参数拼接在urrl后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成js
jsonp
加分回答
跨域场景：前后端分离式开发、调用第三方接口
跨域报错信息：
说一说Vuex是什么，每个属性是干嘛的，如何使用 ？
解题思路 statemutation action getter commpute 计算
得分点 state、mutations、getters、actions、module、store.commit、store.dispatch 标准回答 Vuex是集中管理项目公共数据的。Vuex 有state、mutations 、getters、actions、module属性。 state 属性用来存储公共管理的数据。 mutations 属性定义改变state中数据的方法， 注意：不要在mutation中的方法中写异步方法ajax，那样数据就不可跟踪了 。 getters 属性可以认为是定义 store 的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 action属性类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。 moudle属性是将store分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割 使用方法： state ：直接以对象方式添加属性 mutations ：通过store.commit调用 action：通过 store.dispatch 方法触发 getters：直接通过store.getters.调用 加分回答 可以使用mapState、mapMutations、mapAction、mapGetters一次性获取每个属性下对应的多个方法。 VueX在大型项目中比较常用，非关系组件传递数据比较方便。
state直接以对象方式添加属性 thisstore.commit调用
action通过this$store.dispatch方法触发
getters直接通过 this store getters调用
state公共管理的数据变量
module将store分割成模块
说一说Vue2.0 双向绑定的原理与缺陷？
vue 组件间的data发生变化，立刻触发视图的更新，视图操作行为事件触发之后，数据跟着进行相应更新变化，采用数据劫持结合 发布者订阅者模式的方式实现数据的响应式，通过 object.defineproperty来劫持数据的setter，getter，获取属性值触发getter方法 ，设置属性值触发setter属性
vue采用object.defineProperty的getter setter结合观察者模式来实现数据绑定的，当吧一个普通的js对象传给vue实例作为它的data选项时候，vue将遍历它的属性，用object define property将它们转为getter setter 在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。 vue是采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定的。当把一个普通的javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖。在属性被访问和修改时通知变化 ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。 中间层需要一个观察者，数据发生变化，中介监听到数据的变化，通知视图更新，用户操作视图界面，中介层监听视图变化，通知数据做改动。 ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。
、MVVM的概念
model-view-viewModel，通过数据劫持+发布订阅模式来实现。
mvvm是一种设计思想。Model代表数据模型，可以在model中定义数据修改和操作的业务逻辑;view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、 指令的声明、 事件绑定的声明。;而viewModel是一个同步view和model的对象。在mvvm框架中，view和model之间没有直接的关系，它们是通过viewModel来进行交互的。mvvm不需要手动操作dom，只需要关注业务逻辑就可以了。
mvvm和mvc的区别在于：mvvm是数据驱动的，而MVC是dom驱动的。mvvm的优点在于不用操作大量的dom，不需要关注model和view之间的关系，而MVC需要在model发生改变时，需要手动的去更新view。大量操作dom使页面渲染性能降低，使加载速度变慢，影响用户体验。 解题思路
得分点 Object.defineProperty、getter、setter 标准回答 Vue响应式指的是：组件的data发生变化，立刻触发试图的更新 原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。 通过原生js提供的监听数据的API，当数据发生变化的时候，在回调函数中修改dom 核心API：Object.defineProperty Object.defineProperty API的使用 作用: 用来定义对象属性 特点： 默认情况下定义的数据的属性不能修改 描述属性和存取属性不能同时使用，使用会报错 响应式原理： 获取属性值会触发getter方法 设置属性值会触发setter方法 在setter方法中调用修改dom的方法 加分回答 Object.defineProperty的缺点 1. 一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出 2. 不能监听对象的新增属性和删除属性 3. 无法正确的监听数组的方法，当监听的下标对应的数据发生改变时 \
