前端

1、 箭头函数的好处?

解决了this的指向问题，原生的写法this指向的是调用者，箭头this绑定的是定义时的那个对象，绑定到哪个对象，则this就指向哪个对象。

2、promise

promise主要是用于异步运算，可以将异步操作序列化，按时期望的顺序执行，返回预期的结果。可以在对象之间传递和操作promise，帮助我们处理队列。

function ajax(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest(); 
        req.open('GET', URL, true);
        req.onload = function () {
        if (req.status === 200) { 
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            } 
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send(); 
    });
}
var URL = "/try/ajax/testpromise.php"; 
ajax(URL).then(function onFulfilled(value){
    document.write('内容是：' + value); 
}).catch(function onRejected(error){
    document.write('错误：' + error); 
});

3、递归

在函数体内调用本函数。

function add (num1, num2){

    var num = num1+num2

    if(num2+1>100){

      return num

    } else {

       return add(num,num2+1)

   }

}

var sum = add(1,2)

console.log(sum)

4、从输入URL到页面加载发生了什么？

1、浏览器的地址栏输入URL并按下回车。

　　2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

　　3、DNS解析URL对应的IP。

　　4、根据IP建立TCP连接（三次握手）。

　　5、HTTP发起请求。

　　6、服务器处理请求，浏览器接收HTTP响应。

　　7、渲染页面，构建DOM树。

　　8、关闭TCP连接（四次挥手）。

5、什么是虚拟DOM？

虚拟DOM可以理解为我们根据页面的真实的DOM结构抽象出来的一种数据结构，一个层级比较复杂的对象，和真实的DOM一一映射。我们可以通过调用一个渲染函数比如render，将数据对象作为参数传入，便可得到一个真实的能在页面显示的DOM。

DOM的更新依赖于数据的改变。我们并不希望由于数据的改变而需要整个DOM结构的重新渲染。
借助diff算法，通过对比前后虚拟DOM的差异，进行有针对性的打补丁渲染。算法并不简单，因为考虑很多种情况，自行脑补。其中需要用到递归，父子节点判断的轮回。

6、let，var, const的区别

1.let所声明的变量只在let命令所在的代码块内有效。（块级作用域）

2.let命令不存在变量提升

3.let声明变量存在暂时性死区（即变量会绑定某个区域，不受外部影响）

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。（简称TDZ）

4.let命令不允许重复定义但是var可以而且后定义的变量会覆盖掉前面的变量

因此，不能在函数内部重新声明参数，但是可以在函数内部不同块级作用域内声明同名参数。

const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

const声明的常量，也与let一样不可重复声明。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。（重点）

7、什么是暂时性死区？

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。（简称TDZ）

8、数组的方法

www.w3school.com.cn/js/js_array…

9、字符串的方法

www.jianshu.com/p/3a5171f47…

10、vue-router和vue-route的区别

$router: 代表的是路由器对象，包含一些实现路由跳转的方法，例如:push() replace() back()

$route: 代表的是当前路由对象，包含一些路由相关的属性：path/params/query/meta

11、Vue-router原理

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

1. hash ---- 利用URL中的hash（“#”）

2. 利用History interface在 HTML5中新增的方法, 详情点击

12、vue的生命周期是什么？有哪些？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...

5. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8. 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

13、MVVM的定义

mvvm是mode-view-viewmode的缩写。mode代表的是数据模型，负责业务逻辑和数据封装，viewmode监听模型数据的改变和控制视图的行为，处理用户交互，简单来说，就是通过双向绑定把view和mode层连接起来，在MVVM框架下，view和model没有直接联系，而是通过viewmode进行交互，我们只关注业务逻辑，不需要手动操作DOM，不需要关注view和model同步工作。

14、VUE原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

15.Vue中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

16.vue组件中data为什么必须是一个函数？

答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

17、Vue浅谈computed、method以及watch的区别

computed是在HTML DOM加载后马上执行的，如赋值；

methods则必须要有一定的触发条件才能执行，如点击事件；

watch用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。

watch模式没有computed模式简单，但watch比较适合做异步的操作。

1. computed是计算属性，是依赖其他属性计算得出的结果；watch是监听某一个值的变化执行对应的方法
2. computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算；watch在每次监听的值变化时，都会执行回调。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些
3. watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作；computed通常就是简单的计算
4. methods里面的方法不包含主动监听的能力，且相对于computed来讲没有缓存能力，每次会重新执行（在SPA切换的时候比较明显）；但比较灵活，可以手动去调取
5. 它们并没有哪个更底层。watch和computed的共同之处就是每个定义的属性都单独建立了一个Watcher对象，当然这个能力是方法所不具有的

18、什么是重绘，什么是回流(重排)

重绘：当节点需要更改外观而不会影响布局。
回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。
常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。

19、避免回流和重绘方法

减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略
（1） 避免操作DOM，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。也可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。
（2） 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在于render tree中。如读取offsetLeft等属性。
（3） 尽可能在DOM树的末端改变class ，尽可能在DOM树的里面改变class，可以限制回流的范围，使其影响尽可能少的节点。
（4） 避免设置多层内联样式，因为每一个都会造成回流，样式合并在一个外部类，这样当该元素的class属性被操作时，只会产生一个reflow。
（5） 将需要多次回流的元素position属性设为absolute或fixed，这样该元素就会脱离文档流，它的变化不会影响其他元素变化。比如动画效果应用到position属性为absolute或fixed的元素上。
（6） 牺牲平滑度换取速度，动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了，但它不会导致CPU在较慢的机器和移动设备中抖动
（7） 避免使用table布局，在布局完全建立之前，table需要很多关口，table是可以影响之前已经进入的DOM元素的显示的元素。即使一些小的变化和会导致table中所有其他节点回流。
（8） 避免使用css的JavaScript表达式，该规则较过时，但是个好主意。因为每次都需要重新计算文档，或部分文档、回流。

20、什么是防抖和节流

防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。

节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。

应用场景：

21、如何解决移动端 click300ms 延迟？

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

22、nextTick 原理

下面了解下nextTick的主要应用的场景及原因。

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

具体原因在Vue的官方文档中详细解释：

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。

例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

作者：Ruheng
链接：www.jianshu.com/p/a7550c0e1…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

23、vue 有哪些全局组件

24、一道逻辑题：有 5L 的桶和 3L 的桶，如何拿到 4L 的水

先装满3L的桶,将水倒入5L的桶中,再倒满3L的桶,慢慢往5L的桶里倒,直到5L的桶满为止,此时3L的桶中余下的是1L的水.把5L桶中的水倒光,然后将刚才3L的桶中剩下的那1L倒进5L桶中,再将3L的桶倒满后倒入5L桶中,此时5L桶中应该有4L水

25、什么是webpack

webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

26、深拷贝和浅拷贝的区别和与原理

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

假设B复制了A，修改A的时候，看B是否发生变化：

如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）

如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）

www.cnblogs.com/yuwenjing07…