Vue、JS、ES6等，面试题

一、什么叫优雅降级和渐进增强

渐进增强 ：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给;

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要;

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带;

二、1rem、1em、1vh、1px、各自代表的含义

1、1rem
相对于页面的大小，通常的做法是给html根元素设置一个字大小，其他元素的长度相对于根元素的大小。
2、1em：
相对于父元素的字体大小
元素的margin/padding/width/height则相对于该元素的font-size大小
3、1vh/1vw：
视窗的宽度/高度。100vh/100vw相当于整个视窗的宽高。
1vh=视窗高度的1%；1vw=视窗宽度的1%
4、1px：
像素：相对于屏幕分辨率而言
一般电脑分辨率是1920 * 1024：即1920个像素 * 1024个像素

三、请说一下什么是函数的默认参数

所谓的函数的默认参数其实指的就是当没有给函数参数进行传参的时候，可以给函数的形参制定默认值

四、说一下从输入url到页面加载完成中间发生了什么？

1. DNS域名解析
2. 客户端和服务器建立TCP连接
3. 客户端发送 HTTP请求
4. 服务器处理请求返回HTTP响应
5. 浏览器解析和渲染页面
6. 关闭连接

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

一、说一下从输入url到页面加载完成中间发生了什么？

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

二、JQ的选择器

1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

三、小程序双向数据绑定和vue的数据绑定有什么区别

区别：
大体上区别不大，绑定事件不同，以及获取value值的具体方式不同，以及在小程序中设置data中的数据，需要调用 this.setData方法进行设置

在vue中进行数据绑定后,当数据修改了会直接更新到视图上，但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法

四、布局的几种方式

1、常规流布局（文档流、瀑布流等）：
所有元素在默认情况下都是使用常规流布局
块盒独占一行，行盒可以多个水平排列

2、浮动
所以浮动的元素，都会变成块盒
浮动的元素会脱离文档流（可以理解为常规流是在地面上，而浮动的元素都是在空中）
浮动元素的包含块为包含块的内容盒
浮动的元素，它的包含块（父元素）自动计算高度时不会考虑到浮动元素（这就是我们常说的高度塌陷问题）
如果常规流的块盒在浮动元素之前，那么在后面的浮动元素会自动避开常规流块盒，而如果是行盒的话则不避开（如果是左浮动，它就会直接去讲行盒元素挤开）
如果浮动元素在前，那么在后面的常规流盒子将会被浮动元素覆盖（因为浮动了脱离了文档流，就是没有在文档流的位子）
如：我们在上面的代码后面加上

3、定位（盒子的移动不会对其他元素造成影响）
相对定位relative：不脱离文档流，保留原来的位置（用来微调盒子的位置，也可以当绝对定位的带头大哥）
绝对定位absolute：脱离文档里
固定定位fixed：脱离文档流（以视口为包含块，会随着视口的移动而移动）
默认值static
绝对定位：以第一个非static元素为包含块

五、vue钩子函数的解析流程

1、beforeCreate
官方描述：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用

理解：页面还未创建，this、data、method、watch这些中的元素或者方法并未出现，不能进行调用

2、created
官方描述：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用

理解：可以进行this、data、method以及watch的配置，可以调用元素进行数据处理，但是页面并未渲染完成（数据并未填入）

3、beforeMounte
官方描述：在挂载开始之前被调用：相关的 render 函数首次被调用

该钩子在服务器端渲染期间不被调用

理解：页面中的虚拟dom创建完成，可以使用createElement创建虚拟的dom元素

4、mounted
官方描述：实例被挂载后调用，这时 el 被新创建的 vm.e l 替 换 了 。 如 果 根 实 例 挂 载 到 了 一 个 文 档 内 的 元 素 上 ， 当 m o u n t e d 被 调 用 时 v m . el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.el 也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

理解：dom元素挂载完毕，可以对页面上的dom元素进行操作，页面上出现数据

vm.$nextTick：

官方描述： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上

理解：当回调中的赋值失败时使用，因为偶尔回调的时候挂载还未完成，导致数据无效

5、beforeUpdate
官方描述： 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

理解：beforeupdate是在更新数据之后，还没有渲染的时候执行的，这时候不能操作数据和虚拟DOM，否则会造成死循环重复执行，因为你重复了更新数据的过程

6、updated
官方描述：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

一、vue等单页面应用以及其他优缺点

优点：

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：

不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

二、vue常用的修饰符

1、v-model修饰符
	1、.lazy：
		输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：
	2、.trim：
		输入框过滤首尾的空格：
	3、.number：
		先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：
2、事件修饰符
	4、.stop：
		阻止事件冒泡，相当于调用了event.stopPropagation()方法：
	5、.prevent：
		阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
	6、.self：
		只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：
	7、.once：
		事件只能用一次，无论点击几次，执行一次之后都不会再执行
	8、.capture：	
		事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
	9、.sync	
		对prop进行双向绑定
	10、.keyCode：
		监听按键的指令，具体可以查看vue的键码对应表

三、route和router的区别

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。例如history对象

$router.push({path:’/path’}); 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

$router.replace({path:’/path’}); 替换路由，没有历史记录

2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。

$route.params
对象，包含路由中的动态片段和全匹配片段的键值对

$route.query
对象，包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。

四、vue.js的两个核心是什么？

1、数据驱动，也叫双向数据绑定。

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

2、组件系统。

.vue组件的核心选项:

1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。

3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。

4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。

5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。

6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

五、什么是vue的计算属性

在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

一、强，协商缓存

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFyBG5vW-1628680277494)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\1626270856380.png)]

二、HTTP状态码说说你知道的

* 200 OK 服务器已成功处理了请求并提供了请求的网页
* 202 Accepted  已经接受请求，但处理尚未完成。
* 204 No Content  请求已经成功处理，但是返回的响应报文不包含实体的主体部分。一般在只需要从客户端往服务器发送信息，而不需要返回数据时使用。
* 206 Partial Content  客户端进行了范围请求。响应报文中由 Content-Range 指定实体内容的范围。实现断点续传。
3XX 重定向
* 301 Moved Permanently  永久性重定向，请求的网页已永久移动到新位置。
* 302 Moved Temporatily  临时性重定向，请求的网页临时移动到新位置。
* 304 Not Modified 未修改。自从上次请求后，请求的内容未修改过。
4XX 客户端错误
* 400 Bad Request ：请求报文中存在语法错误。
* 401 Unauthorized ：该状态码表示发送的请求需要有认证信息（BASIC 认证、DIGEST 认证）。如果之前已进行过一次请求，则表示用户认证失败。
* 403 Forbidden ：请求被拒绝。
* 404 Not Found ：请求的资源未找到（比如错误输入了url）
5XX 服务器错误
* 500 Internal Server Error ：服务器正在执行请求时发生错误。
* 502 Bad Gateway 错误网关（IPS或者防火墙的问题）
* 503 Service Unavailable ：服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

三、cookie session区别

1、cookie 和session的区别是：cookie数据保存在客户端，session数据保存在服务器端。
2、两个都可以用来存私密的东西，同样也都有有效期的说法,区别在于session是放在服务器上的，过期与否取决于服务期的设定，cookie是存在客户端的，过去与否可以在cookie生成的时候设置进去。 
(1)、cookie数据存放在客户的浏览器上，session数据放在服务器上 ；
(2)、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session ；
(3)、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE ；
(4)、单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K；
(5)、所以将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中。
3、cookie和session的共同之处在于：cookie和session都是用来跟踪浏览器用户身份的会话方式。
4、cookie 是一种发送到客户浏览器的文本串句柄，并保存在客户机硬盘上，可以用来在某个WEB站点会话间持久的保持数据。

四、Vue如何实现带参跳转

1.第一种：router-link（声明式路由）
2.第二种：router.push()（编程式路由）
3.第三种：router.replace()（编程式路由）
4.第四种：router.go(n)

五、keep-alive了解吗

1.keep-alive的生命周期
当引入 keep-alive 的时候，页面第一次进入，钩子的触发顺序 created-> mounted-> activated，退出时触发 deactivated。当再次进入（前进或者后退）时，只触发 activated。

2.基本用法
可以将 是否包裹 keep-alive 通过参数配置；
3.作用
返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

4. 指定刷新
在keep-alive中直接添加 include，cachedViews（Array类型：包含vue文件的组件name都将被缓存起来）；反之exclude则是不包含；

六、说一下computed和watch的区别

computed
在 Vue 中，computed 就是计算属性
computed 是用来计算一个值的：

我们在调用时是不需要使用括号，来取值
它会根据依赖自动缓存，那么如果依赖不变， computed 就不会重新计算值
watch
在 Vue 中，watch 就是监听值变化 换句话说，如果监听的值变化了，就去执行对应的函数
watch 有两个重要的选项，

immediate，表示第一次渲染的时候是否执行这个函数
deep，如果监听一个对象，那么是否也监听到对象里面的属性变化

一、说一下Vuex都有哪些属性,以及作用

state：
vuex的基本数据,用来存储变量。

getter：
从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

mutation：
提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

action：
和mutation的功能大致相同,不同之处在于:
① Action 提交的是 mutation,而不是直接变更状态;
② Action 可以包含任意异步操作。

modules：
模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

二、说一下什么是面向对象编程

1.封装：封装是把过程和数据包围起来，对数据的访问只能通过已定义的界面。面向对象计算始于这个基本概念，
即现实世界可以被描绘成一系列完全自治、封装的对象，这些对象通过一个受保护的接口访问其他对象。
2.多态性：多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化多态性和包含多态性。
多态性语言具有灵活、抽象、行为共享、代码共享的优势，很好的解决了应用程序函数同名问题。

三、说一下你对插槽的理解

1、分类
	slot可以分来以下三种：
		默认插槽
		具名插槽
		作用域插槽
默认插槽
子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面
具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽
父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

四、Vue-router跳转和location.hre有什么区别

使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

五、如何在Vue.js动态插入图片

对src属性插值将导致404请求错误。应使用v-bind:src（简写：src）格式代替。

一、说一下js数组内置遍历的方法有哪些和区别

JS数组内置便利(遍历就是循环的意思)方法主要有:
forEach:这个方法是为了取代for循环遍历数组的，返回值为undefined
其中:
item代码遍历的每一项，
index:代表遍历的每项的索引，
arr代表数组本身，
filter：是一个过滤遍历的方法，如果返回条件为true，则返回满足条件为true的新数组
map 这个map方法主要对数组的复杂逻辑处理时用的多，特别是react中遍历数据，也经常用到，写法和forEach类似

some: 这个some方法用于只要数组中至少存在一个满足条件的结果，则返回值就为true，否则返回false，写法和forEach类似

every：这个every方法用于数组中每一项都得满足条件时，才返回true，否则返回false，写法和forEach类似

二、说一下js作用域

存储和访问变量，是任何一种编程语言最基本的功能之一，变量存在哪里？程序需要时如何找到它？这些问题需要一套良好的规则来规范，这套规则，就成为作用域。

三、说一下从输入url到页面加载完中间发生了什么

TCP链接:
再通过第一步的DNS域名解析后，获取到了服务器的IP地址后，便开始建立一次链接，这是由TCP协议完成的，主要通过三次握手
第一次握手：建立链接时，客户端发送syn包到服务器，并进入SYN_SENT状态，等待服务器确认，
第二次握手：服务器接受到syn的包时，必须确认客户端的SYN，同时自己也发送一个SYN包，此时进入SYN_RECV状态
第三次握手：客户端收到服务器的SYN+ack的包，向服务器发送确认包ACK，此时发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手

TCP挥手：
1.客户端A发送一个请求FIN，用来关闭客户A到服务器B的数据传送
2.服务器B收到这个FIN，他返回一个ACK，确认序号为收到的序号1.和SYN一样，一个FIN将占用一个序号
3.服务器B关闭与客户端A的链接，发送一个FIN给客户端A
4.客户端A发回ACK报文确认，并将确认序列号序列为收到序号加1

四、说一下call、apply、bind区别

当我们使用一个函数需要改变this指向的时候才会用到call,apply,bind
如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 ...)
如果你要传递的参数很多，则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用

五、说一下null和undefined的区别

1.首先是数据类型不一样

console.log(typeof null) // object
console.log(typeof undefined) // undefined
2.null和undefined 两者相等，但是当两者做全等比较时，两者又不等。（因为它们的数据类型不一样）

console.log(null == undefined) // true
console.log(null === undefined) // false
3.转化成数字不同

console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

console.log(22+null) // 22
console.log(22+undefined) // NaN
4.null代表"空"，代表空指针；undefined是定义了没有赋值

var a;
console.log(a); // undefined

var b=null;
console.log(b) // null

一、说一下js作用域

存储和访问变量，是任何一种编程语言最基本的功能之一，变量存在哪里？程序需要时如何找到它？这些问题需要一套良好的规则来规范，这套规则，就成为作用域。

二、深拷贝与浅拷贝得区别，以及如何实现

一、区别：简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝。
二、实现
    function shallowClone(copyObj) {
      var obj = {};
      for ( var i in copyObj) {
        obj[i] = copyObj[i];
      }
      return obj;
    }
    var x = {
      a: 1,
      b: { f: { g: 1 } },
      c: [ 1, 2, 3 ]
    };
    var y = shallowClone(x);
    console.log(y.b.f === x.b.f);     // true

三、ES5与ES6的区别

一、新增箭头函数
    箭头函数解决的问题
    简化了写法。箭头函数适用于函数体只有一行的情况；当有多行时，可用普通函数增加可读性。  少打代码，结构清晰
    明确了this。传统JS的this是在运行的时候确定的，而不是在定义的时候确定的；而箭头函数的this是在定义时就确定的，不能被改变，也不能被call,apply,bind这些方法修改。       明确运行时候this指向谁，不用运行时判断this指向                         注：箭头函数没有自己的this，他的this就是外层的this，指向上一个不是箭头函数的函数的this。因为js的机制，所以指向的是一个非箭头函数的函数的作用域。
箭头函数与普通函数的区别
    普通function的声明在变量提升中是最高的，箭头函数没有函数提升
    箭头函数没有this，函数体内部的this对象就是定义的时候所在的对象而不是使用时所在的对象
    箭头函数没有arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数
    箭头函数不能作为构造函数，不能被new，没有property
    call和apply方法只有参数，没有作用域
    不可以使用yield命令，因此箭头函数不能做Generator函数
二、块级作用域
    ES6中的let命令，声明变量，用法和var差不多，但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，使用的变量一定要进行声明；const声明常量
    ES6中变量的结构赋值，比如：var [a,b,c] = [0,1,2];
三、类继承
    ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念，听起来和Java中的面向对象编程的语法有些像，但是二者是不一样的。
四、设置默认函数参数
    ES6中可以设置默认函数参数，如function A（x,y=9）{};
五、promise
    promise产生背景：解决回调地狱问题，处理异步请求
    promise用法：链式调用，成功和失败的回调，三个状态，pending状态改变时触发。状态一旦改变就不会再变。
六、模板字符串
七、赋值结构

四、数组去重

第一种：遍历数组法
第二种：数组下标判断法
第三种：排序后相邻去除法
第四种：优化的遍历数组法
第五种：数组遍历法
1.将数组的每一个元素依次与其他元素做比较，发现重复元素，利用数组方法splice()删除重复元素
2.使用双层循环改变原数组
3.借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中（原数组长度不变但被按字符串顺序排序）
4.创建一个新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中
5.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等
6.利用数组中的filter方法

五、冒泡排序

什么是冒泡排序呢？

其原理就是依次比较相邻的两个值，如果后面的比前面的小，则将小的排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确。

解析：使用两个for循环。

1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。

2.第一轮的时候最后一个元素应该是最大的一个。

3.每次将剩下数组里面最大的一个数排到最后面，当第一个循环执行到最后的时候，,只需要比较数组的第一和第二项，比较完毕，返回。

 

六、闭包

 什么是闭包
要理解闭包就要去理解变量的作用域，在JS中存在两种变量的作用域，一种是全局变量，一种是局部变量。两种变量的区别就是函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

那什么是闭包呢？闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

闭包的特点
1、让外部访问函数内部变量成为可能

2、局部变量会常驻在内存中

3、可以避免使用全局变量，防止全局变量污染

4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，并且互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。大概意思就是说当外部函数运行结束甚至销毁时，局部的变量key=value,尽管key被垃圾回收机制给回收了，但是value仍不会被回收，会变成一个自由变量留下引用的指针。

这一天也是看了不少的例子，还是有一些没理解清楚的，回来理解一下再过来更新，还是先把我理解了的分享出来，记录讲解一下我的理解。

什么是闭包
要理解闭包就要去理解变量的作用域，在JS中存在两种变量的作用域，一种是全局变量，一种是局部变量。两种变量的区别就是函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

那什么是闭包呢？闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

闭包的特点
1、让外部访问函数内部变量成为可能

2、局部变量会常驻在内存中

3、可以避免使用全局变量，防止全局变量污染

4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，并且互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。大概意思就是说当外部函数运行结束甚至销毁时，局部的变量key=value,尽管key被垃圾回收机制给回收了，但是value仍不会被回收，会变成一个自由变量留下引用的指针。

这一天也是看了不少的例子，还是有一些没理解清楚的，回来理解一下再过来更新，还是先把我理解了的分享出来，记录讲解一下我的理解。