【面试】前端常见面试题总结

1、什么是mvvm  、 mvc 模型？ 

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

2、vue双向数据绑定的原理？ 

利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

我们在vue里面使用v-model实现双向数据绑定，原理是检测用户输入，把输入的值获取到 ，然后同步更新给页面的元素。

3、vue的生命周期有哪些？ 

生命周期：每一个vue实例从创建到销毁的过程。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

vue的生命周期共分为11个阶段、4个时期
1、beforeCreate（创建前）

2、created（创建后）

3、beforeMount（载入前）

4、mounted（载入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、activated（keep-alive激活时调用）

8、deactivated（keep-alive停用时调用）

9、beforeDestroy（销毁前）

10、destroyed（销毁后）

11、errorCaptured（2.5.0+ 新增）
vue第一次页面加载会触发四个钩子函数
分别是：beforeCreate、created、beforeMount、mounted。

4、v-if 和v-show有什么区别？   

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

5、async  await  是什么？它有哪些作用？

async / await 是一种建立在Promise之上的编写异步或阻塞代码的新方法，被普遍认为是js一步操作的最终且最优雅的解决方案。

相对于Promise和回调，它的可读性和简洁度都更高。一直.then()也不好看。

优缺点：

相比于Promise，async/await能更好的处理then链
await关键字只能在async function中使用，在任何非async function的函数中使用await关键字都会抛出错误。await关键字在执行下一行代码之前 等待右侧表达式（可能是一个Promise）返回。
async/await的优势在于处理then的调用链，能够更清晰准确的写出代码，并且也能解决回调地狱的问题。当然也存在一些缺点，因为await将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了await会导致性能上的降低。

6、常用的数组方法有哪些？

1. push() 向数组中添加数据
2. pop() 删除数组中的最后一个数据
3. unshift() 向数组中最前面添加数据
4. shift() 删除数组中的第 0 个数据
5. concat() 对数组进行拼接
6. splice() 对数组进行截取
7. slice() 截取数组中的值
8. sort() 数组排序
9. reverse() 反转数组
10. join() 把数组链接成一个字符串

7、数组有哪几种循环方式？分别有什么作用？

1.forEach

对数组的每个元素执行一次提供的函数。

2.map 需要return返回 返回一个新数组

3.filter 过滤循环

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

4.reduce

5.every 循环，每个都符合返回true，否则返回false

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

6.some 循环，有一个符合返回true，否则返回false

测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。

8、常用的字符串方法有哪些？

charAt() 方法从一个字符串中返回指定的字符。

concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

match() 方法检索返回一个字符串匹配正则表达式的的结果。

padStart() 方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。 (常用于时间补0)

replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。

原字符串不会改变。

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

**split()**方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

**substr()** 方法返回一个字符串中从指定位置开始到指定字符数的字符。

trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）。
 

9、什么是原型链？

每一个实例对象上有一个proto属性，指向的构造函数的原型对象，构造函数的原型

对象也是一个对象，也有proto属性，这样一层一层往上找的过程就形成了原型链。

10、什么是闭包？手写一个闭包函数？ 闭包有哪些优缺点？

闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用

域可以访问另外一个函数内部的局部变量。

 function fn() {
     var num = 10;
     function fun() {
         console.log(num); 
     }
     return fun;
 }
 var f = fn(); 
 f();

作用：延长变量作用域、在函数的外部可以访问函数内部的局部变量，容易造成内层泄露，因为闭包中的局部变量永远不会被回收。

11、常见的继承有哪些？

一、原型链继承

特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！

缺点：1、新实例无法向父类构造函数传参。

　　　2、继承单一。

　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原 型属性也会被修改！）

二、借用构造函数继承

重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。

　　　2、解决了原型链继承缺点1、2、3。