2021前端面试题

1：vue-router 是什么？

答：vue-router 是 vue 的路由插件

2：怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

答：在第一个页面调用 this.$router.push(params)里面传参第二个页面通过this.$route.params获取参数

3：vue-router 有哪几种导航钩子?

1.导航钩子的作用：vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

2：植入路由导航的方式：全局的，单个路由独享的，组件级的

全局导航钩子主要有两种钩子：前置守卫、后置钩子，

to 、from 、next 分别的作用：

1：to: 代表要进入的目标，它是一个路由对象，

 2：from: 代表当前正要离开的路由，同样也是一个路由对象

 3：next：这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

全局钩子后置钩子：不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身

4 ：组建内的导航钩子：

 组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

 他们是直接在路由组件内部直接进行定义的

5：$route 和 $router 的区别？

1
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，

 route相当于当前正在跳转的路由对象。

6：vue-router响应路由参数的变化？

使用watch (监测变化)

7：vue生命周期函数：

beforeCreate（创建实例）

created（创建完成）、

beforeMount（开始创建模板）

mounted（创建完成）、

beforeUpdate（开始更新）

updated（更新完成）、

beforeDestroy（开始销毁）

destroyed（销毁完成）

ajax操作是在mounted生命周期中完成的。

8：axios和ajax的区别：

1.区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

9：vue中解决跨域问题？

方法1.后台更改header

方法2.使用JQuery提供的jsonp

方法3.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

10：vue路由钩子函数：

路由的钩子函数总结有6个

全局的路由钩子函数：beforeEach、afterEach

单个的路由钩子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

11：vue父子组件之间的传值：

 子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。

12. 谈谈你对MVVM开发模式的理解

答：MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中 的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

13：vue的优点？

  答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于     理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，    在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能    完成相关操作； 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过        是换了另一种方式； 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

14. $nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值， 你需要使用$nextTick这个回调，让修改后的data值渲       染更新到dom元素之后在获取，才能成功

15：谈谈你对vue的认识

vue概念：是一个构建用户界面的渐进式框架，典型的MVVM框架。

注：模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。

vue作用：响应式的数据绑定和组合的视图组件

vue原理：数据双向绑定     模板编译和虚拟dom

1：vue2.x 的双向绑定原理，不支持ie8的原因？

原理：

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,
要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，
从而更新视图
4、mvvm入口函数，整合以上三者

 不支持ie8的原因：
当你把一个普通得到javaScript对象传给vue实例的data选项，vue将遍历此对象所有的属性，并使用object.defineProperty把这些属性
全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。
何为shim特性：
指把一个库引入到另一个旧的浏览器，然后用旧的api，实现一些新的api功能。

2：如何让css样式只在当前组件起作用？

当前组件

3：标签的作用？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

4：v-show和和v-if的区别？

v-if元素隐藏时，会在dom节点中把该元素移除
v-show元素隐藏时，会在dom节点中把该元素设置css属性为display : none，元素依然保留在dom节点中

v-show:
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if:
1、v-if会控制这个DOM节点的存在与否,
2、如果在运行时条件很少改变，则使用 v-if 较好。

5：vue中常用的3个生命周期钩子函数？

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 
然而, 挂载阶段还没有开始,      $el属性目前还不可见

mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，
当 mounted被调用时 vm.$el 也在文档内。

activated: keep-alive组件激活时调用

6：组件之间的传值？

 子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。

7：computer和watch的作用和区别？

 计算属性computed : 
 1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
 2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
 3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
 4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
 5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个         set方法，当数据变化时，调用set方法。

 侦听属性watch：
 1. 不支持缓存，数据变，直接会触发相应的操作；
 2.watch支持异步；
 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
 4. 当一个属性发生变化时，需要执行对应的操作；一对多；

8：组件的引用流程？

1:在当前组件的script中引入调用组件：import 组件名字（自己随便起的）from‘组件的相对路径’，
2: 接着注册组件：在export default中创建属性components:{组件的标签名（自己起的）：组件的名字}，
3:最后使用组件：在template中需要使用组件的地方以标签的形式使用组件<组件的标签名></组件的标签名>

9;什么是响应式设计？响应式设计的基本原理是什么？如何兼容较低版本的IE？

答：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

    优点：

        面对不同分辨率设备灵活性强

        能够快捷解决多设备显示适应问题

    缺点：

        兼容各种设备工作量大，效率低下

        代码累赘，会出现隐藏无用的元素，加载时间加长

        其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

        一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

         respond.js和css3-mediaqueries-js

10：设置元素浮动后，该元素的display值是多少？

   display：block

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）

可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

2：sessionStorage（html5）将数据保存在session对象中

2.localStorage（html5） 是永久存储，需要手动去清除

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

3：cookie保存在浏览器端，cookie的大小被限制在4KB，安全性较低

session保存在服务器端，Session保存的东西越多，就越占用服务器内存，安全性较高

28.Doctype作用

：声明文档类型

什么是ajax：

AJAX是“Asynchronous JavaScript and XML”的缩写。

他是指一种创建交互式网页应用的网页开发技术。

Ajax应用程序的优势在于：

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

2、AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，
并避免了在网络上发送那些没有改变过的信息。

2.Ajax如何使用

一个完整的AJAX请求包括五个步骤：

1.创建XMLHTTPRequest对象
2. 使用open方法创建http请求，并设置请求地址
xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数
3.设置发送的数据，用send发送请求
4. 注册事件（给ajax设置事件）
5.获取响应并更新页面

2。什么是异步

同步（sync）是一件事一件事的执行，只有前一个任务执行完毕才能执行后一个任务。
异步（async）相对于同步，程序无须按照代码顺序自上而下的执行。

3.为什么要使用异步
由于js是单线程的，只能在js引擎的主线程上运行，所以js代码只能一行一行的执行，
如果没有异步的存在，由于当前的任务还没有完成，其他的所有操作都会无响应，用户就会长时间的在等待。

4.常见的异步模式有六种：

回调函数
事件监听
发布/订阅模式
promise
Generator(ES6)
async/await(ES7)

如何解决跨域问题？

1. jsonp
   jsonp能实现跨域是利用了img、script和link标签自身的跨域能力。
   我们知道当img或者script中的src是一个链接的时候，浏览器会请求这个链接获取资源，
   那么这个链接如果是跨域的，浏览器也会请求，从而达到了跨域请求的一个功能。

2.通过设置Access-Control-Allow-Origin来实现跨域

3、response 添加 header

数组去重的方式:

1、使用indexof（）方法
2、使用includes方法
3、利用for嵌套for，然后splice去重
4、利用ES6 Set去重
5、利用sort()
6、利用includes
7、利用递归去重
8、利用Map数据结构去重
9、利用reduce+includes

HTTP协议和HTTPS区别

http是超文本传输协议，信息是明文传输，https是具有安全性的ssl解密传输协议
http和https连接方式完全不同，端口也不同，http是80，https是443
http的连接很简单，是无状态的
https协议是由ssl+http协议构建的可进行加密传输，身份认证的网络协议，比http协议安全

什么是js内存泄露？

内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进程结束

释放内存的方法：赋值为null

css选择器有哪些？
id选择器，标签选择器，class选择器，类选择器，子选择器，包含选择器

1.Vue的核心是什么

Vue是一套构建用户界面的渐进式自底向上增量开发的MVVM框架，vue的核心只关注视图层，

2.v-text与{{}}与v-html区别

{{}} 将数据解析为纯文本，不能显示输出html

v-html 可以渲染输出html

v-text 将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示双花括号

6.v-on可以绑定多个方法吗

可以 如果绑定多个事件，可以用键值对的形式 事件类型：事件名

     如果绑定是多个相同事件，直接用逗号分隔就行

19.Vue数据绑定的几种方式

1.单向绑定 双大括号 {{}} html内字符串绑定

2.v-bind绑定 html属性绑定

3.双向绑定 v-model

4.一次性绑定 v-once 依赖于v-model

25.Vue中指令有哪些

v-for：循环数组，对象，字符串，数字

v-on：绑定事件监听

v-bind：动态绑定一个或者多个属性

v-model：表单控件或者组件上创建双向绑定

v-if v-else v-else-if 条件渲染

v-show 根据表达式真假，切换元素的display

v-html 更新元素的innerhtml

v-text 更新元素的textcontent

v-pre 跳过这个元素和子元素的编译过程

v-clock 这个指令保持在元素上知道关联实例结束编译

v-once 只渲染一次
30.Mvvm与mvc的区别

Mvc模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc关注的是模型不变，
所以，在mvc中，模型不依赖视图，但是视图依赖模型

Mvvm 模型 视图 和vm vm是作为模型和视图的桥梁，当模型层数据改变，
vm会检测到并通知视图层进行相应的修改

32.Vue双向绑定的原理

Vue双向绑定就是：数据变化更新视图，视图变化更新数据

Vue数据双向绑定是通过数据劫持和观察者模式来实现的，

数据劫持，object.defineproperty它的目的是：当给属性赋值的时候，程序可以感知到，就可以控制改变属性值

观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变

Web前端性能优化

1、减少http请求，合理浏览器缓存
2、启用压缩：HTML、CSS、javascript文件启用GZip压缩可达到较好的效果
3、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。
4、LazyLoad Images：在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片
5、CSS放在页面最上部，javascript放在页面最下面：让浏览器尽快下载CSS渲染页面
6、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

前端性能优化：

1. CSS优化：

CSS写在头部，JavaScript写在尾部或异步
避免图片和iFrame等的空src
尽量避免重置图片大小
图片尽量避免使用DataURL
尽量避免写在HTML标签中写style属性
避免CSS表达式
移除空的CSS规则
正确使用Display的属性
不滥用浮动Float
不滥用Web字体
不声明过多的Font-size
值为0时不需要任何单位
标准化各种浏览器前缀
避免让选择符看起来像正则表达式

2. 图片优化

使用智图 http://zhitu.tencent.com/
使用（CSS3、SVG、IconFont）代替图片
使用Srcset
webP优于JPG
PNG8优于GIF
图片不宽于640

3. 脚本优化

   减少重绘和回流
   缓存Dom选择与计算
   尽量使用事件处理，避免批量绑定事件
   尽量使用ID选择器
   使用touchstart、touchend代替click

4. 渲染优化

   HTML使用Viewpoint
   减少Dom节点
   尽量使用CSS3动画
   合理使用requestAnimationFrame动画代替setTimeout
   适当使用Canvas动画
   Touchmove、Scroll事件会导致多次渲染
   使用（CSS3 transitions、CSS3 3D transform、Opacity、Canvas、WebGL Video）来触发GPU渲染

5 .onshow和onLoad的区别？

onshow在每次打开页面都会加载数据，可以用于数据在需要刷新的环境下

onload只是在第一次进入页面会刷新数据，从二级页面回来不会重新加载数据

6:单页面的优缺点？

单页面：是指只有一个主页面的应用，浏览器一开始就要加载所有必须的html，js，css，

优点：
1：用户体验好，快，内容改变不需要重新加载整个页面；
2：没有页面之间的切换，就不会出现白屏现象

缺点：
1：首次加载耗时比较多，
2：不利于SEO
3：不可以用导航实现前进后退效果，
4：页面复杂度高

7：Jquery和vue的区别？

1：jquery首先要获取到dom对象，然后对dom对象进行值的修改操作，

2：vue是首先把值和js对象进行绑定，然后修改js对象的值，vue框架就会自动把dom值更新，

3：这种dom元素跟随js对象值的变化而变化叫做单项数据绑定，
如果js对象的值也跟随这dom元素的值变化而变化叫做双向数据绑定

7.var、let、const之间的区别

var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

3、使用箭头函数应注意什么？

（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
（2）不能够使用arguments对象
（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

5、介绍下 Set、Map的区别？

应用场景Set用于数据重组，Map用于数据储存Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换

7、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

  promise构造函数是同步执行的，then方法是异步执行的

9、promise有几种状态，什么时候会进入catch？

三个状态：
 pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch

10、字符串转数组

split()方法

11、闭包的原理

闭包的原理就是利用作用域链的特性，首先在当前作用域访问数据，
当前作用域访问不到，则向父级访问，父级也没有，一直找到全局。

12、js原型的理解：

 原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”
 内部属性，这个属性所对应的就是该对象的原型。

原型链：当实例调用某一个属性时，先在本身找，如果没有找到，就到它的原型对象上逐级往上找(proto)，

          直到找到Object.prototype,如果还找不到则原路返回（constructor），告诉它方法或属性未定义

总结： 原型链就是在访问一个对象属性的时候，如果自身没有找到的情况下会去它的原型对象中查找，
如果还没有，会去它的原型对象的原型对象中查找，如此循环直到顶层的Object对象的原型对象(是个null，Object.prototype.proto===null）为止的这么个机制

13、谈一下require和import的区别？

 1、写法上有差别，import可以使用import * 引入全部的export，
      也可以使用import aaa, { bbb}的方式分别引入default和非default的export，相比require更灵活。

14、require和import会不会循环引用？

不会，因为模块执行后会把导出的值缓存，下次再require或者import不会再次执行。这样也就不会循环引用了。

15、js里面的push和concat的区别？

push 遇到数组参数时，将整个数组参数作为一个元素插入；
concat 则是拆开数组参数，一个元素一个元素地加进去。  

16、js对象转化为jquery对象

  只需要用$()把DOM对象包起来，就能获取一个jquery对象

17、jquery对象转为js对象

1、jquery对象是一个数据对象，可通过[index]的方法,转为js对象

2、jquery本身提供，通过get(index)方法,转为js对象

18、布局有几种？

  1.table 布局
  2.flex 布局
  3.float布局
  4.响应式布局

19、vue混入？

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
一：数据对象合并：data{ }
二：钩子函数合并：created() ，mounted
三：methods, components 和 directives合并
四：全局混入

20、Vuex有五个属性 state getters mutations actions modules

State就是数据源存放地，对应一般vue对象的data，state里面存放的数据是响应式的，state数据发生改变，对应这个数据的组件也会发生改变 用this.$store.state.xxx调用

Getters 相当于store的计算属性，主要是对state中数据的过滤，用this.$store.getters.xxx调用

Mutations 处理数据逻辑的方法全部放在mutations中，当触发事件想改变state数据的时候使用mutations，用this.$store.commit调用，给这个方法添加一个参数，就是mutation的载荷（payload）

Actions 异步操作数据，但是是通过mutation来操作 用this.$store.dispatch来触发，actions也支持载荷

使用场景：组件之间的状态，登录状态，加入购物车，音乐播放

21、watch 监听属性配置：

deep 是否深度
immeditate  是否立即执行

22、js数据检测

  1、typeof
  2、instanceof
  3、constructor
  4. Object.prototype.toString.call()
  5. jquery.type()

23、数组的常用方法

1、join （ 将数组的元素组起一个字符串）
2.toString() 把数组转换为一个字符串，并返回结果
3、forEach() —— 循环数组
4、shift() 删除原数组第一项，并返回删除元素的值
5、pop() —— 删除原数组最后一项，并返回删除元素的值
6、push() —— 向数组的末尾添加一个或多个元素，并返回新的长度
7、concat() —— 连接两个或多个数组
8、sort(sortby) —— 按指定的参数对数组进行排序
9、includes() —— 检测数组中是否包含某个元素
10、find() —— 返回通过测试（函数内判断）的数组的第一个元素的值
11、 map()—— 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

24、组件通讯

1、父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链/子链也可以通信（$parent / $children）；ref也可以访问组件实例；provide/injectAPI；$attrs/$listeners2、兄弟通信：eventBus；Vuex3、跨级通信：eventBus；Vuex；provide/injectAPI、$attrs/$listeners

25、父子组件的生命周期顺序？

加载渲染过程： 父 beforeCreate =》 父created =》 子beforeCreate =》
子created =》 子mounted =》 父mounted
子组件更新渲染过程：父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新渲染过程：父beforeUpdate->父updated
销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

26、Vue中常见性能优化

 1、编码优化

不要将所有的数据都放到data中，data中的数据都会增加getter、setter，会收集对应的watcher
  vue在v-for时给每项元素绑定事件需要用事件代理
 SPA页面采用keep-alive缓存组件
 拆分组件（提高复用性、增加代码的可维护性，减少不必要的渲染）
 v-if当值为false时，内部指令不会执行，具有阻断功能。很多情况下使用v-if替换v-show
   key保证唯一性（默认vue会采用就地复用策略）
  Object.freeze冻结数据
    合理使用路由懒加载、异步组件
    数据持久化的问题，防抖、节流

2、Vue加载性能优化

第三方模块按需导入（babel-plugin-component）
滚动到可视区域动态加载（https://tangbc.github.io/vue-virtual-scroll-list）
图片懒加载（https://github.com/hilongjw/vue-lazyload.git）

3、用户体验

app-skeleton骨架屏
 app shell app壳
  pwa

4、SEO优化

预渲染插件prerender-spa-plugin
 服务端渲染ssr

5、打包优化

 使用cdn的方式加载第三方模块
 多线程打包happypack
 splitChunks抽离公共文件
 sourceMap生成

6、缓存压缩

 客户端缓存、服务端缓存
  服务端gzip压缩

7 v-for循环中key的作用？

key 的作用主要是 为了实现高效的更新虚拟 DOM，提高性能。
其原理是vue在patch的过程中通过key可以精准的判断两个节点是否是同一个，
从而避免频繁的更新元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

8、for in循环容易出现什么问题？

for in循环会把原型链中的属性和方法一起遍历出来

解决方法：使用 for of循环

9.link 和@import 的区别?

区别 1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事 务；
@import 属于 CSS范畴，只能加载 CSS 。
区别 2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
区别 3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别 4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支 持。

10.JS 数据类型

基本类型：Number、String、Boolean、null、undefined、symbol（ES6 新增的），BigInt（ES2020）
引用类型：Object，对象子类型（Array，Function）

11.bind，apply，call三者的区别？

相同：都是改变this指向的方法

不同：apply：和call基本上一致，唯一区别在于传参方式，

     bind：语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8

例子：
function fun(a,b){
}
var obj = {
}
fun.apply(obj,[1,2]);//apply需要将实参以数组的形式传递
fun.call(obj,1,2);//call可以将实参以此传递

笔试题：

1： var x = 1，y=z=0;
function add(n){
n = n+1;
}
y = add(x);
function add(n){
n = n+3;
}
z = add(x);
执行以上代码完毕后 x，y，z的值分别是多少？
x = 1； 因为方法里面没有return n；所以y，z都是undefined；

2：实现js对象继承

function teacher(name){
this.name = name;
}
teacher.prototype.sayName = function(){
console.log("name is "+this.name);
}
var teacher1 = new teacher(“xiaoming”);
teacher1.sayName();
function student(name){
this.name = name;
}
student.prototype = new teacher()
var student1 = new student(“xiaolan”);
student1.sayName();

3、编写一个方法去掉一个数组的重复元素

/***
*

• 编写一个方法，去掉数组的重复元素；
• params:Array
• 利用：ES6: 新的数据结构 new Set();
  类数组转换：Array.from();
  */

function noRepeatItemArray(array){
return Array.from(new Set(array));
}

/**
params:Array

• 利用:arrayObj.indexOf(); 返回下标；
• 不存在则返回-1；
  */
  function noRepeatItemArray2(array){
  let len=array.length,
  arrTemp=[];
  for(let i=0;i<len;i++){
  // 如果当前temp数组中不存在该item；则push;
  if(arrTemp.indexOf(array[i])<0){
  arrTemp.push(array[i]);
  }
  }
  return arrTemp;

}

/**

• params:Array;

• 利用:
  arrObj[i]=undefined;i notIn arrObj;
  !undefined===true;
  */
  function noRepeatItemArray3(array){
  let len=array.length,
  arrObj={},
  arrTemp=[];
  for(let i=0;i<len;i++){
  if(!arrObj[array[i]]){
  arrObj[array[i]]=1;
  arrTemp.push(array[i]);
  }
  }// end of for loop;

  return arrTemp;
  }