HTML——CSS——JS——es6——Vue——微信小程序-----------服务器----------node

HTML面试题

1.DOCTYPE有什么作用？包标准模式和混杂模式如何区分？它们有什么意义？

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持最高标准运行。混杂模式中页面是一种比较宽松向后兼容的方式显示。

2.什么是浏览器内核？

浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

总结:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定浏览器如何显示页面,不同浏览器内核不同,所以显示网页的内容以及页面格式信息也就不同

3.介绍一下你对浏览器内核的理解？(不重要）

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

4.常见浏览器内核有哪些？

1.Trident:IE,360,搜狗浏览器

2.Geckos:FireFox Mozilla Suite/SeaMonkey

3.Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

4.Webkit：Safari Chrome

5.H5有哪些新特性？移除了哪些元素？如何却分HTML和HTML5？

新增元素

1.canvas(用于绘画)

2.用于媒体回放的video和audio元素

3.本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

4.表单控件，calendar search datalist datetime output keygen date month week time color number range email url。

5.位置API：Geolocation

6.拖放API：drag、drop

7.语意化更好的内容元素，比如 article、footer、header、nav、section3

移除元素：

纯表现的元素：

big(呈现大号字体效果)

font(规定文本的字体、字体尺寸、字体颜色)

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

u(文本添加下划线)

<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>

basefont   center  s strike tt

性能较差的元素：frame

区分:

DOCTYPE:告诉浏览器用哪个版本的HTML来渲染文档

<DOCTYPE html>

6.cookies,sessionStorage和localStorage的区别？

共同点：存储数据

区别：

1. localStorage长期存储数据，浏览器关闭数据后不丢失，用作长久数据 保存；
2. sessionStorage数据仅在浏览器窗口关闭之前有效，关闭后自动删除；
3. cookie在设置的cookie过期时间之前一直有效
4. cookie是网站为了标识用户身份而存储在用户本地终端（Client   Side）上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器之间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
5. 存储大小的限制不同。cookie保存的数据很小，不能超过4k,而sessionstorage和localstorage保存的数据大，可达到5M。
6. 作用域不同。cookie在所有的同源窗口都是共享；sessionStorage不在不同的浏览器共享，即使同一页面；localStorage在所有同源窗口都是共享。

7.cookie 不设置过期时间，默认过期时间是多少？

关闭浏览器就结束了

7.iframe框架有哪些优缺点？（不重要）

优点：

1. iframe能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引入iframe，name你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

1. 搜索引擎的爬虫程序无法解读这种页面
2. 框架结构中出现各种滚动条
3. 使用框架结构时，保证设置正确的导航链接
4. iframe页面会增加服务器的http请求
5. iframe页面必须先加载这部分内容，加载完成才加载其他的，影响用户体验

8.label的作用是什么？是怎么用的？（不重要）

label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的，for

for属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

​ <Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。

HTML代码片段如下：<formaction=""method="get">性别：<br/><inputname="sex"id="man"type="radio"value=""/><labelfor="man">男</label><inputname="sex"id="woman"type="radio"value=""/><labelfor="woman">女</label></form>注：input标签内id的值与label标签内for的值对应。

9.HTML5的form如何关闭自动完成功能？（不重要）

给不想要提示的input是设置autocomplete=off即可。

10.新的HTML5字符集是？

HTML5 使用 UTF-8 编码。

11.HTML5中如何嵌入音频？

audio标签

HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频。

<audio src="htmls/1.mp3"  controls="controls">你的浏览器不支持video元素</audio>

src:播放音频的路径

controls:播放按钮 

12.HTML5中如何嵌入视频？

video标签

和音频类似，HTML5 支持 MP4、WebM 和 Ogg 格式的视频。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

src:播放音频的路径

controls:播放按钮 

13.除了audio和video，HTML5还有哪些媒体标签？

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，  标签定义嵌入的内容，比如插件。<embed>

<embed type=”video/quicktime” src=”Fishing.mov”>

  对于定义多个数据源很有用。  标签为诸如 <track>元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

<video width=”450″ height=”340″ controls><source src=”W3Cschool.mp4″ type=”video/mp4″><source src=”W3Cschool.ogg” type=”video/ogg”><track kind=”subtitles” label=”English” src=”W3Cschool_en.vtt” srclang=”en” default></track><track kind=”subtitles” label=”Arabic” src=”W3Cschool_ar.vtt” srclang=”ar”></track>
</video>

14.HTML5Canvas元素有什么用？

Canvas 元素用于在网页上绘制图形

属性：

getContext() 这个方法就是绘图的一个属性

beginPath()：起始的一条路径

arc():创建弧，曲线

strock():绘制已定义的路径

fillStyle:用于填充绘画的颜色、渐变或模式

fillRect:绘制"被填充"的矩形

举例子： 

画圆：

<canvas id="myCanvas">
浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
ctx.beginPath()
ctx.arc(95,50,40,0,2*Math.PI)
ctx.stroke()
</script>

画矩形：

<canvas id="myCanvas">
浏览器
</canvas>
<script>
var c = document.getElementById('myCanvas')
vat ctx = c.getContext('2d')
ctx.fillStyle = '#FF0000'
ctx.fillRect(0,0,80,100)
</script>

15.HTML5存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案： localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

loacalStorage:持久化存储，数据长期存在，只要不手动删除就不会销毁。也就相当于你给小明发语音，小明想什么时候听就可以什么时候听，除非他把你们的聊天记录删掉，才会销毁

sessionStorage:会话存储。就像两个人在谈话，谈话完成就OK了。也就相当于关闭浏览器后，数据也就销毁了

16.HTML5应用程序缓存和浏览器缓存有什么区别？

应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：
<!doctype html>
<html manifest="example.appcache">
.....
</html>
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

1.请至少写出5个HTML块级元素标签。

div,p,form,table,h1~h6，li

2.请至少写出5个行内元素标签。

span,img,input,button,a,label,

3.写出空元素。

br,hr,link

4.写出table标签下包含哪些标签元素。

tr,th,td,thead,tfoot,tbody

5.很多网站不用iframe,table这两个元素，为什么？

因为浏览器页面渲染从上向下加载的，用iframe和table这两个标签要先加载这两个标签的内容，加载完成在整体加载然后渲染，用户体验效果不好。

6.jpg和png的区别。

jpg:是有损所压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。

png:压缩比高，色彩好。

jpg:在www网站，用来存储和传输照片的格式

7.至少写出5个HTML5的新标签。

header,footer,nav,section,video

8.a标签在新窗口打开链接怎么加属性。

<a target="_blank"></a>

9.写了2个<a>标签，两个标签之间有空格的情况怎么解决。

将2个<a>标签写在一行里

10.DOCTYPE有什么作用？

告诉浏览器使用哪个版本的HTML文档渲染页面

11.页面导入样式时，link与import的区别。

1. link方式的样式权重比import的权重高。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3. link支持js可以改变样式，而import不支持

12.如何区分html和html5。

1. DOCTYPE的声明方式
2. 根据新增加的结构，功能来区分

13.无样式内容闪烁？（FOUC）Flash Of Unstyle Content

@import导入css文件会等到文档加载完成后再加载CSS样式，因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样的页面会等到CSS加载完成后再下载HTML文件，这样先布局好，然后就不会出现FOUC的问题了。

CSS面试题

1.介绍一下标准的css的盒子模型？与低版本的IE盒子模型有什么不同？(重要)

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本的IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;

2.css选择器有哪些？哪些属性可以继承？(重要)

CSS选择符：(只需要说前5个即可)

• id选择器(#myid)、
• 类选择器(.myclassname)、
• 标签选择器(div, h1, p)、
• 相邻选择器(h1 + p)、
• 子选择器（ul > li）、
• 后代选择器（li a）、
• 通配符选择器（*）、
• 属性选择器（a[rel=”external”]）、
• 伪类选择器（a:hover, li:nth-child）

相邻选择器：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head><body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

子选择器：

<DOCTYPE html>
<head>
<title>子选择器</title>
<style type="text/css">
h1 > strong {
color: red
}
</style>
</head>
<body>
<h1>我是<strong>漂亮的</strong></h1>
</body>
</html>

后代选择器：

<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head><body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head><body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a><hr /><h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

伪类选择器：链接的状态不同显示方式就不同

<html>
<head><style type="text/css">
a:link {color: #FF0000}  /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}  /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style></head><body><p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p></body>
</html>

可继承的属性：

1、字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格

2、文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
• color：文本颜色

不可继承的样式：padding, margin, width, height,border(只需要说前4个)

优先级（就近原则）：!important >style >[ id > class > tag ]
!important 比内联优先级高

!import>内联>ID选择器>类选择器=伪类选择器=属性选择器

!import的使用

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试!Important</title>
</head>
<style type="text/css">#Box div{color: red;}.important_false{color: blue;}.important_true{color: blue !important;}
</style>
<body><div id="Box"><div class="important_false">这一行末使用important</div><div class="important_true">这一行使用了important</div></div>
</body>
</html>

CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，

不同的是，第二行未使用!important，而第三行使用了!

3.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？(重要)

 div:

margin: 0 auto; 上下边距为0，左右边bai距为auto，就是自动适应。

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮动元素的上下左右居中：

position: absolute;float: left;left: 50%;top: 50%;margin: -50px 0 0 -100px; 

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 

绝对定位的左右居中：

position: absolute;margin: 0 auto;left: 0;right: 0;

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0; 

利用绝对定位元素的自动伸缩特性水平垂直居中 

.father{position: relative;width: 500px;height: 500px;
}
.son{position:absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}

利用flex布局水平垂直居中（回答这个显得更高端） 

#box{display: flex;display: -webkit-flex;border: 1px solid #0000FF;height: 200px;width: 400px;align-items:center;justify-content:center;
}
.item{width: 50px;height: 40px;border: 1px solid #00C1B3;
}

4. display有哪些值？说明他们的作用?(重要)

inline（默认）–此元素会被显示为内联元素,不换行

<style>
p {display:inline}
</style><p>这两个段落生成内联盒子,和它的结果</p>
<p>这两个元素之间没有距离。</p>

none–隐藏

<style>
h1.hidden {display:none;}
</style>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>

block–块显示

able–表格显示

list-item–项目列表

inline-block-块级元素能够在同一行显示

5.position的值？(重要)

• static（默认）：按照正常文档流进行排列；
• relative（相对定位）：不脱离文档流，相对于自己 的父级
• absolute(绝对定位)：外面的父级，若没有父级，就是以左上角为准
• fixed(固定定位)：参照对象是浏览器窗口

6. CSS3有哪些新特性？

1. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
2. 圆角（边框半径）：border-radius 属性用于创建圆角
3. 盒阴影：box-shadow: 10px 10px 5px #888888
4. 边框图片：border-image: url(border.png) 30 30 round
5. font-face属性：定义自己的字体
6. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
   word-wrap（对长的不可分割单词换行）word-wrap：break-word

7.请解释一下CSS3的flexbox（弹性盒布局模型）

以更加高效的方式来对容器进行布局,对其和分配空间.

8.用纯CSS创建一个三角形的原理是什么？(重要)

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

// tansparent  --背景透明

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

9.常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
2. 标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;

10.为什么要初始化CSS样式

因为浏览器兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异

11. display:none与visibility：hidden的区别？(元素隐藏)

1. display：none 隐藏某个元素，且隐藏的元素不会占用任何空间
2. visibility：hidden 隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

12.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？(重要)

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级div定义height
2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
4. 父级div定义zoom

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

自动变成display:block

14.使用 CSS 预处理器吗？

Less sass

15. CSS优化、提高性能的方法有哪些？(.css优化性能的方法.)

1. 避免后代选择符
2. 避免不必要的重复代码
3. 少使用!important

16.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？(重要)

响应式网站设计是一个能够兼容多个终端而不是每一个终端做一个特定的版本
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

17.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

18.style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

19. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

overflow默认值visible

1.参数是scroll时,会出现滚动条

2.参数是hidden时,溢出隐藏

20.如何去除inline-blcok元素间隙？

空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

解决办法：

1. 把所有的子元素写在一行；
2. 子元素设置浮动；
3. 父元素的font-size设置为0，子元素的font-size设置为实际大小；

21.在不知道图片大小的情况下，如何设置样式让图片不变形？

max-width: 100%

22.link @import导入css(link和@import的区别)

• link方式的样式权重比import的权重高。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
• link支持js可以改变样式，而import不支持

23.box-sizing属性

默认content-box

24.如何实现一个最大的正方形.

用 padding-bottom 撑开边距

 section {width:100%;padding-bottom: 100%;background: #333;
}

25.一行水平居中，多行居左

<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div><style>
div{text-align: center;}
div span{display: inline-block;
text-align: left;}
</style>

26.display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格
2. margin正值的时候 解决：margin使用负值
3. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

26.如何实现左右等高布局

table布局兼容性最好，当然flex布局的align-items: stretch;也行

<div class="layout"><div class="layout left">left</div><div class="layout right">center</div>
</div><style>
.layout{display: table;width: 100%;
}
.layout div{display: table-cell;
}
.layout .left{width: 50%;height: 200px;background: red;
}
.layout .right{width: 50%;background: yellow;
}
</style>

 3.CSS优先级算法如何计算？(了解即可)

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

1. !important声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

4.CSS3新增伪类有那些?

• ：enabled:disabled     表单控件的禁用状态
• ：checked                  单选框或复选框被选中
• p:only-child                 选择属于其父元素的唯一的子元素 

13. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？(不重要)

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。
2. firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

15. position跟display、overflow、float这些特性相互叠加后会怎么样？(了解即可)

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

21.浏览器是怎样解析CSS选择器的？（不重要--理解就好）

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

22.在网页中的应该使用奇数还是偶数的字体？为什么呢？（不重要）

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

23.margin和padding分别适合什么场景使用？（不重要）

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

24. 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

25.全屏滚动的原理是什么？用到了CSS的哪些属性？(不重要)

1. 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
2. overflow：hidden；transition：all 1000ms ease；

27. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用(不重要)

1.  单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
   :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

28.你对line-height是如何理解的？（不重要）

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

29.怎么让Chrome支持小于12px 的文字？（不重要）

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

30.让页面里的字体变清晰，变细用CSS怎么做？(不重要)

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

31.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将<li>代码全部写在一排
2. 浮动li中float：left
3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

34.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？（不重要）

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

40.盒模型

/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */
.box {width: 200px;height: 200px;padding: 20px;margin: 20px;background: red;border: 20px solid black;box-sizing: border-box;
}
复制
/* 标准模型 */
box-sizing:content-box;/*IE模型*/
box-sizing:border-box;

44.水平垂直居中

两栏布局,左边固定,右边自适应,左右不重叠

flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局

.left{float:left;width:300px;margin-right: 10px;background: red;
}
.right{overflow: hidden; /* 创建BFC */background: yellow;
}

46.BFC理解

BFC触发条件：

1. 根元素，即html
2. float的值不为none（默认）
3. position的值为absolute或fixed
4. overflow的值不为visible（默认）
5. display的值为inline-block、table-cell、table-caption

BFC特性：

1. 内部的Box会在垂直方向上一个接一个放置。
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box 的左边，与包含块border box的左边相接触。
4. BFC的区域不会与float box重叠。（可用于清浮动）
5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也会参与计算。

JS面试题 

1.基本数据类型有哪几种?(高频)

undefined,null,boolean,string,number,Symbol(es6)

Symbol:定义对象的唯一标识(和id一样)

6.let name = Symbol()
console.log(typeof name)   // Symbol

2.引用数据类型有哪些?(高频)

Object,Array 

内建对象:Object,String,Array

3.JavaScript的typeof返回哪些数据类型(高频)

•  undefined
• string
• boolean
• number
• symbol(ES6)
• Object
• Function

4.强制类型转换(高频)

原始数据类型（Number,string,boolean,null,undefined）

• 转成字符串
  • 1.toString();
  • 2.拼接字符串

toString 

	var a=1;console.log(a.toString());//输出结果为黑色的1

 拼接字符串

	var a=1;var b=a+'';console.log(b);//输出结果为黑色的1

• 转成数字
  • 1.parseInt
  • 2.parseFloat
  • 3.Number

使用Number

var  a="123";
a=Number(a);
console.log(typeof  a);     结果：number

 如果:

   var a="abc";a=Number(a);console.log(a);    结果：NaN

如果是纯数字的字符串，则直接转换为数字，如果字符串中有非数字的内容，则转换为NaN,如果字符串是一个空串或者是一个全是空格的字符串，则转换为0；

 Number(true)="1"     Number(Null)=0   Number(undefined)="NaN"

parseInt()   parseFloat()   专门用来对付字符串

var a = "123px";
a=parseInt(a);
console.log(typeof a);    结果：number
console.log(a);               结果：123 
var b=true;
b=parseInt(b);
console.log(typeof b);    结果：number
console.log(b);               结果：NaN

如果对非string使用parseInt()或parseFloat()它会先将其转换为string，然后再操作。 

转成boolean直接就用boolean;

除了0、NaN、空串、null、undefined其余都是true。对象也会转换为true

使用Boolean()函数var a= 123;a=Boolean(a);console.log(typeof a);   结果：booleanconsole.log(a);              结果：true

 https://blog.csdn.net/qq_40471415/article/details/88837412

https://blog.csdn.net/qq_41999617/article/details/81174185

5.隐式类型转换(高频)

== ===

扩展：通过==比较两边的值是否相等的结果？
1==’1’
null==undefined

6.“=="和“===”区别(高频)

前者会自动转换类型，在判断是否相等

后者不会自动转换类型，直接去比较

1==”1”
null==undefined;//==true

7.逻辑运算符：与,或,非

• || : 只要其中有一个为true，整体结果是true； 
• && : 只要有一个是false，整体结果是false； 
• !：取 （比较：转布尔，在取反）

8.null和undefined是否相等?null和undefined的区别？(高频)

    console.log(null==undefined)//trueconsole.log(null===undefined)//false

  null：

没有定义的时候是null值，报错是not found

nul表示"无",转成数值时为0

  undefined：
只是初始化，创建变量，但是没有赋值

undefined是一个表示"无"的原始值,转为数值时为NaN

9.JS四种检测(高频)

1. typeOf：只能检测基本数据类型 

   typeof 1;//'number'
   typeof true;//'boolean'
   typeof '';//'string'
   typeof undefined;//'undefined'
   typeof function (){};'function'
   typeof null // Object

2. instanceOf：检测当前实例是否属于某个类的方法 

   var arr = [];
   arr instanceof Array;//true

3. 检测当前实例的构造函数 
4. Object.prototype.toString.call([]); 最准确的方式；用来检测数据类型的

   console.log(Object.prototype.toString.call(1));//[object Number]
   console.log(Object.prototype.toString.call(''));//[object String]
   console.log(Object.prototype.toString.call(true));//[object Boolean]
   console.log(Object.prototype.toString.call(null));// [object Null]
   console.log(Object.prototype.toString.call(undefined));//[object Undefined]
   console.log(Object.prototype.toString.call([]));// [object Array]

   区别是什么

10.看下列代码,输出什么？解释原因。

    var a = null;
alert(typeof a); //object

11.看下列代码,输出什么？解释原因。

var undefined;//此时undefined这个变量的值是undefined
undefined == null; // true
1 == true;   // true
此时会把布尔类型的值转换为数字类型 true=1 false=0
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false isNaN
[] == false; // true   解释：会把[]和false都通过Number()转换为数字类型
[] == ![];   // true   解释：![]：false
[]==[];//false

12.判断空字符串,undefiend,null

if(undefined == nunll){    }        //返回的是true

if(undefined == ' '){}                // 返回的是false

if(null == ' '){}                       // 返回的是false

控制台

' '为字符串

typeof null ==================> Object

typeof ' ' ====================> String

13.undefiend和null字符在if语句找那个,都会自动变成false =============>让他们变成true,前面要加!(取反)

 if(!null)    == if(!undefined)  == true

14.Array,Object放在if语句中自动转成true(高频)

15.break，continue,return区别(高频)

• break：立即结束语句，并跳出语句
• continue:停止当前语句，并继续执行
• return:停止函数

16.for…in..和for…of..的区别？

for in 遍历循环对象

for (变量 in 对象){ 在此执行代码 }

var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"mycars.color = "white"for (var x in mycars)
{console.log(mycars[x]);
}

var mycars = {"1":"Saab", "2":"Volvo", "3":"BMW"};mycars.color = "white"for (var x in mycars)
{console.log(mycars[x]);
}

for of 遍历循环数组

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

var mycars = ["Saab", "Volvo", "BMW"];mycars.color = "white"for (var x in mycars)
{console.log(mycars[x]);
}

17.map，forEach区别(高频)

相同点：

1. 都是循环遍历数组中的每一项
2. 每次执行匿名函数，都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）
3. 只能遍历数组
4. 匿名函数中this都指向window 

不同点：map有返回值,不会改变原数组;forEach没有返回值,对原数组数据直接进行修改

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值（map（）进行处理之后返回一个新的数组）

map方法不会改变原始数组

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
console.log(this); //Window
console.log(this);
console.log(item);
console.log('原数组arr：',arr); // 会执行五次
return item/2;},this);console.log(str); //[0,1,2,3,4]

forEach方法用于调用数组的每个元素，将元素传给回调函数

注意，forEach是不会返回有意义的值的。
我们在回调函数中直接修改arr的值。

arr.forEach((value, key) => {return arr[key] = value * value;
});

18.循环(while,do...while,for,for...in)(高频)

1.while 先判断--------->后执行

var i = 0;while(i < 100){console.log('i为' + i)}

2.do......while 先执行------------->再判断

var x = 3;var i = 1;do {console.log(i);i++;} while (i < x)

3.for循环

4.for...in    ---->用于对象遍历

var person = {name: "张”}for(var key in person){if(person.hasownproperty){}}

 19.Number的方法

• isNaN : 检查数字是否非法    // console.log(isNaN(123))   // false
• Number :将其他数据类型的值强制转换成number类型； 
• parseInt :经常用于字符串提取数字的方法； 
• parseFloat:和parseInt 用法一样；区别是多识别一位小数点 
• toFixed : 保留小数点位数的方法;返回值是一个字符串；

20.字符串的方法(13个)

1. toUpperCase : 把小写字母转成大写 
2. toLowerCase 把大写转小写 
3. charAt : 通过索引获取字符 
4. charCodeAt : 通过索引获取对应字符的Unicode编码； 
5. substr : 截取 substr(m,n) 从索引m开始，截取n个字符； 
6. substring: substring(m,n) ：从索引m开始，截取到索引n，不包含n; (不支持负数) 
7. slice(m,n): substring; 从索引m开始，截取到索引n，不包含n (支持负数) 
8. indexOf : 检测字符在字符串中第一次出现的索引位置； 
9. lastIndexOf : 检测字符在字符串中最后一次出现的索引位置； 
10. split: 把字符串按照特定的字符分隔数组中的每一项； 
11. replace:替换;原有字符串不变；用新字符替换旧的字符 
12. concat : 拼接 

21.字符串的运算

- * /: 会先把字符串转换成数字，然后再进行计算

1. 任何数字和NaN 计算，结果都是NaN;
2. 任何数字和undefined运算，得到也是NaN；

22.split() join() 的区别(高频)

split():把一个字符串分割成字符串数组，并返回

“hello".split("")   // ["h", "e", "l", "l", "o"]

join():把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,并返回

在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：<script type="text/javascript">var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"console.log(arr.join())</script>
输出：George,John,Thomas

23.js精度误差

1. toFixed()方法
   使用不同函数分别计算(+,-,*,/)

   var a = 1;
   var b = 2.344544;
   consoel.log((a+b).toFixed(2))
   

   2.小数点[(变量 * 10) / 10])  先乘10再除以10

24.、获取元素的方法

• document.getElementById:通过ID名来获取元素 
• document.getElementsByTagName: 通过标签名来获取元素 
• document.getElementsByClassName(); 类数组集合； 
• document.getElementsByName;通过name属性来获取元素； 
• document.documentElement 获取当前的html 
• body :获取页面的body元素； 
• document.querySelector();如果是id名加#，如果是class名加. 
• document.querySelectorAll();获取所有的元素

25.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。  

创建新节点

• createDocumentFragment() // 创建一个DOM片段
• createElement() // 创建一个具体的元素
• createTextNode() // 创建一个文本节点

添加、移除、替换、插入

• appendChild()
• removeChild()
• replaceChild()
• insertBefore() // 在已有的子节点前插入一个新的子节点

查找

• getElementsByTagName() // 通过标签名称
• getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
• getElementById() // 通过元素Id，唯一性

26.DOM四种类型的节点 

空格和换行都是文本节点；

27.DOM节点的属性

• childNodes : 获取当前元素所有的子节点； 
• children : 获取当前元素的子元素节点； 
• firstChild : 获取第一子节点； 
• lastChild :获取最后一个子节点 
• previousSibling : 获取上一个哥哥节点 
• nextSibling : 获取下一个弟弟节点 
• parentNode: 获取当前元素的父亲节点；

28.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value

29.怎么检测数组？

1. instanceof
2. isArray

注意： typeof 数组和Null 返回的是'Object'

30.改变数组长度的方法有哪些？

shift、unshift、pop、push

31.数组的方法(高频)

push()尾部添加，返回数组长度(向数组末尾新增一项；可以传多个)

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

pop()尾部删除，返回被删除的元素（删除数组的最后一项；不需要传参数；）

var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

unshift()头部添加 ，返回数组长度

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

shift()头部删除，返回被删除的元素

var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

reverse():反转数组项的顺序

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

concat()：数组的拼接 。构建成一个新的数组,原数组并未改变.

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

slice(m,n): 数组的截取 ,从数组索引m开始，截取到索引n，但是不包含n;[前包后不包] ,原有数组不发生改变
slice(m) : 从索引m开始，截取到末尾； 

slice()方法可以接受一或两个参数

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

 forEach()对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

map()指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。(有返回值)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

splice(m,n): 删除数组中的某几项 .从索引开始，删除n个 
splice(m) : 从索引m开始删除到末尾； 
splice(0): 
splice(m,x,n);替换从索引m开始，删除x个，用n替换； 
原有数组发生改变 

 sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：

function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

filter()过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

some()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

32.数组的去重(高频)

1.new Set

const set = new Set([1, 2, 3, 4, 4]);
[...set]

2.双for循环

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

var arr = [1,2,3,4,5,6,54,5,67]
function unique(arr){
for(let i = 0; i< arr.length;i++){
for(let j = i + 1; j< arr.length;j++){
if(arr[i] == arr[j]){arr.splice(j,i)    // 第一个等同于第二个，splice方法删除第二个
}
}
}
return arr;
}

https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

33.闭包：内部函数引用外部函数的变量(高频)

作用：延长它的生命周期

缺点：容易导致内存泄漏

var f=(function fn(){var name=1;return function(){name++;console.log(name);}
})();function init(){var name="zhangsan";    // 创建局部变量name和局部函数alertNamefunction alertName(){   //alertName()是函数内部方法，是一个闭包console.log(name)  //使用了外部函数声明的变量，内部函数可以访问外部函数的变量}alertName()
}
init()

34.JavaScript this、闭包、作用域(高频)

• this：指向调用上下文
• 作用域：定义一个函数就开辟了一个局部作用域，整个js执行环境有一个全局作用域
• 闭包：内部函数调用外部函数里面的变量(例子如上)

35.闭包是什么，有什么特性，对页面有什么影响(高频)

闭包就是内部函数调用外部函数里面的变量。
闭包的缺点：
1 更多的内存消耗
2.会造成内存泄露，因为闭包中引用到的函数中定义的变量都永远不会被释放

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。
可以把闭包简单理解成 “定义在一个函数内部的函数”，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包有如下特性：
a. JavaScript允许你使用在当前函数以外定义的变量
b. 即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量
c. 闭包可以更新外部变量的值
d. 用闭包模拟私有方法
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题

36.函数（function)和方法(method)(高频)

区别：

方法在对象里，方法也是函数

函数可以随意调用

本质上是一样的，方法是函数的特例,将函数赋值给了对象
函数：

function f() {console.log('我是函数');   //调用函数 f();
} 

方法：把函数定义到对象里面就称为方法

var obj = {function f(){ 
console.log("我是方法"); 
} 
}; 
//对象调用方法 (对象调用通过点对象的属性名) obj.f();

37.简述创建函数的几种方式(高频)

第一种（函数声明）：

function sum1(num1,num2){return num1+num2;
}

第二种（函数表达式(函数字面量式)）：

var sum2 = function(num1,num2){return num1+num2;
}

匿名函数：没有函数名称，无法通过函数名称调用

function(){}:只能自己执行自己

第三种（Function构造函数方式）：

var sum3 = new Function("num1","num2","return num1+num2");

38.什么是函数的封装？

把实现相同功能的代码放到一个函数体中，当想实现这个功能时，直接执行这个函数即可；减少了的冗余；高内聚，低耦合.

举例子:下订单

39.函数的执行过程(重要)

1. 首先会形成一个私有的作用域
2. 形参赋值
3. 变量提升
4. 代码从上到下运行；
5. 作用域的销毁； 

在函数执行时，函数体中可以找到函数外面的变量；但是函数外面不能访问里面的变量；

40.构造函数与普通函数的区别

1. 构造函数的的方法名首字母要大写，普通函数不需要。
2. 构造函数的调用方法为： new  Show();普通函数：show（）。
3. 构造函数的类名和方法名一样；
4. 构造函数要用this构造属性和方法；

构造函数   

// 定义构造函数
function Show(){
this.name = "张三"
this.age = "12"
}
var show = new Show()  // 调用构造函数
alert(show.name)    // 张三

// 普通函数

function show (name,age){this.name = zhangsanm;this.age = 12;
}
alert(show(this.name))   //zhangsanm

41.new 对象时发生了什么？

• 初始化一个空对象
• 绑定 this
• 执行构造函数
• 返回这个对象（不需要return来返回）

42.创建对象的方式有几种？(高频)

1.对象字面量（最常用的方式）

// 对象字面量创建了一个对象o1

var o1 = {p:"hello world",alertP:function(){alert(this.p);}
}

缺点 ：每创建一个新的对象都需要写出完整的定义语句，不便于创建大量相同类型的对象，不利于使用继承等高级特性。

2.用new构造对象

function CO(){this.p = “I’m in constructed object”;this.alertP = function(){alert(this.p);}
}
var o2 = newCO();

https://www.cnblogs.com/lvmylife/p/5763214.html

43.call,apply,bind有什么作用？区别是什么？(高频)

考点：call和apply的用法

this指向有哪些？  call，apply,bind

call和apply相同点：改变函数中this的指向

不同点：

 call和apply一样 只是传参数不一样 apply参数是以数组形式传的  bind和call传参方式一样 但是bind会立即执行

建议使用es6的箭头函数:这样就解决了this的指向问题

无参数调用：

function fn(){alert(this.name);
}
var p1={name:1};
fn.call(p1);
fn.apply(p1);

有参数调用：

function fn2(name,age){this.name=name;this.age=age;
}
var p1={};
fn2.call(p1,"张三",20);
fn2.apply(p1,["张三",20]);

44.形参（parameter)和实参(argument)的区别(高频)

• 形参就是函数声明时的变量
• 实参就是函数随时参入的具体参数

function add(a,b){
return a+ b
}
add(1,3)

a,b是形参，1，3是实参

45.哪些操作会造成内存泄漏？

函数中使用的变量使用完后不会自动释放

1. 闭包
2. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

46.什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言。

好处：

• 消除Javascript语法的一些不合理、不严谨之处;
• 提高编译器效率，增加运行速度；

好处具体体现：

• 防止意外为全局变量赋值
• 防止重名
• 对只读属性修改时抛出异常

坏处：

• 一些在“正常模式”下可以运行的语句，在“严格模式”下将不能运行;
• 同样的代码，在“严格模式”中，可能会有不一样的运行结果；

47.你使用哪些工具和技术来调试 JavaScript 代码？(高频)

1. alert
2. console.log
3. Debugger断点（具体的说就是通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。）

 48.事件绑定和普通事件有什么区别

普通事件(onclick):直接触发事件,同一时间只能指向唯一对象,所以会被覆盖掉

var btn = document.getElementById("btn")
btn.onclick = function(){alter("你好111")
}
btn.onclick = function(){alter("你好222")
}

输出的结果只会有<你好222>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。

事件绑定(addEventListener):事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert("你好111");
},false);
btn.addEventListener("click",function(){alert("你好222");
},false);

运行结果会依次弹出你好111，你好222的弹出框。

区别:

addEventListener对任何DOM都是有效的，而onclick仅限于HTML.

addEventListener可以控制listener的触发阶段,（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。

49.ajax请求时，如何解析json数据

json.parse 

50.阻止默认事件

return false

51.捕获异常的方法？(高频)

try{} catch(e){} finally(){}

52.ajax原理：

1. 创建对象   var xhr = new XMLHTTPRequest()
2. 打开请求  xhr.open('GET','example.txt',true)
3. 发送请求  xhr.send()
4. 接收响应数据  xhr.onready.stateChange = function()

53.什么是json

前后台交互的一种数据格式

54.怎样判断2个对象相等

JSON.stringfiy == JSON.stringify(obj)

55.ajax同步,异步的区别

async的值不同,分为同步和异步

同步async:false

异步async:true

56.Math的方法

• Math.abs(): 取绝对值； 
• Math.floor() : 向下取整 
• Math.ceil() : 向上取整    console.log(Math.ceil(.95));     // 1
• Math.max() : 取最大值    // console.log(Math.max(1,3,2)     //  3
• Math.min() : 取一组数的最小值         // console.log(Math.min(1,3,2)    // 1
• Math.random() 取随机数，取值范围[0,1) 
• Math.round(): 四舍五入取整 
• 取m-n之间的随机整数：Math.round(Math.random()*(n-m)+m) 
• Math.pow() : 取幂次方 
• Math.sqrt() : 开平方；

57.如何获取js中三个数的最大值和最小值

Math.max（a,b,c)    // 最大值

Math.min(a,b,c)     // 最小值

58.Date的实例

• console.log(typeof new Date());
• // "object"
• console.log(new Date());
• // 获取本机的系统时间；
• var time = new Date();
• console.log(time.getFullYear());
• // 获取时间年；
• console.log(time.getMonth())
• // 获取时间月 取值范围【0-11】
• console.log(time.getDate());
• // 获取时间日【1-31】
• console.log(time.getDay());
• // 获取星期几；【0-6】 星期日是0；
• console.log(time.getHours())
• // 获取小时数 【0-23】
• console.log(time.getMinutes());
• // 获取分钟数 【0-59】
• console.log(time.getSeconds());
• // 获取时间秒【0-59】 console.log(time.getMilliseconds());
• // 获取毫秒数【0-999】
• console.log(time.getTime());
• // 当前时间距离1970-1-1日早上八点的毫秒数；
• console.log(Date.now());

59.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

考点：日期对象Date相关API的使用

var d = new Date();

60.设置定时器

1) setTimeout(cb,ms) 
2) setInterval(cb,ms)

相同点：全局函数在指定的毫秒（ms)内执行指定函数（cb) 

区别：

setTimeout(cb,ms) ：只执行一次指定函数

function printHello(){console.log( "Hello, World!");
}
// 两秒后执行以上函数
var timer = setTimeout(printHello, 2000);//清除定时器
clearTimeout(timer)

 setInterval(cb,ms)方法会不同的调用，知道clearInterval()被调用或关闭窗口

function printHello(){console.log( "Hello, World!");
}
// 两秒后执行以上函数
var timer = setInterval(printHello, 2000);// 清除定时器
clearInterval(timer);

61.清除定时器

1) clearTimeout() 
2) clearInterval()

62.js延迟加载的方式有哪些？

1. 使用setTimeout延迟方法
2. 让js最后加载(把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度)

63.看代码给答案。

var a = new Object();  // 引用数据类型
a.value = 1;
b = a; //b.value=1
b.value = 2;//b.value=2;a.value=2，因为a和b指向同一块引用类型的值
alert(a.value);

答案：2

var a = 1;//基本数据类型
b = a;
b = 2;
console.log(a)

答案:1 

64.看下列代码，将会输出什么?

考点：1、变量作用域 2、变量声明提升

var foo = 1;
function f(){console.log(foo);  // 它只会找函数里面最近的,代码从上往下加载,所以是undefinedvar foo = 2;console.log(foo);     // 2
}
f();

输出undefined 和 2。

65.foo = foo||bar ，这行代码是什么意思？为什么要这样写？

var foo;
if(foo){foo=foo;
}else{foo=bar;
}

答案：常用于函数参数的空判断
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
考点：if条件的真假判定
记住以下是false的情况：空字符串、false、undefined、null、0

66.请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。(高频),怎么解决异步问题(高频)

举例子:

同步:如果在同一时间内有很多任务的话,这些任务需要排队,一个一个的执行,前一个任务执行完，才会执行下一个任务.

// 同步代码
function fun1() {console.log(1);
}
function fun2() {console.log(2);
}
fun1();
fun2();// 输出
1
2

异步:如果在同一时间内有很多任务的话,这些任务不需要排队就可以去完成.任务都完成就结束了(我昨天是不是就是这样说的?公交车那个)

67.javascript的同源策略;跨域？ (高频)

同源策略：协议，域名，端口相同
http,ftp:协议
关键词解释：
域名：localhost、www.baidu.com
协议：http https ftp
端口：一个网站对应着一个端口， http协议的默认端口：80
https协议的默认端口是8083
同源策略带来的麻烦：ajax在不同域名下的请求无法实现，
如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

跨域：指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的，是浏览器对js施加的安全限制。
跨域解决方式一

通过CORS解决（最常用的方案，安全，可靠）

跨域资源共享CORS（Cross-Origin Resource Sharing）:属于跨源AJAX请求的根本解决方法

1.普通跨域请求：只需服务端设置Access-Control-Allow-Origin

2.带cookie跨域请求：前后端都需要进行设置

//java中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：header("Access-Control-Allow-Origin: *")

68.js（es5)类:用的构造函数；es6类用的:class类(高频)

• 语法: function 类名称（）{...} 
• 与方法不同的地方是：类名称的首字母大写
• 获取对象：new 类名称()
• 访问：对象.成员

 //第一种定义类的方法，类中增加属性function Person(name) {this.Name = name;//在类内部定义一个属性this.say = function () {alert(this.Name);}};var p1 = new Person('zhh');p1.say();alert(typeof (p1));//objectalert(typeof (Person('zhh')));//Undefined 函数没有返回值则为Undefinedalert(typeof(Person));//function

class类:

1.通过class关键字,可以定于类

2.

//定义类
class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。

3、定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。 

4.构造函数的prototype属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Point {constructor(){// ...}toString(){// ...}toValue(){// ...}
}// 等同于Point.prototype = {toString(){},toValue(){}
};

5、Object.assign方法可以很方便地一次向类添加多个方法。

class Point {constructor(){// ...}
}Object.assign(Point.prototype, {toString(){},toValue(){}
});

https://www.cnblogs.com/zcl997136048/p/9283687.html 

69.js的三大特性：继承，封装，多态

1.封装：是一个公共的方法

是当你需要隐藏一些属性和方法时，就可以将这些属性和方法封装起来，然后通过一个外部可以调用的特定接口进行调用。

function Person(name , age , sex){this.name = name ; //共有变量 var age = age ;  //私有变量var sex = sex ; //私有变量this.show = function (){console.log(age+"===="+sex);}
}
var person = new Person('Sunshine',18,'女');
console.log(person.age);    // undefined
console.log(person.name);   // Sunshine
console.log(person.show());     // 18====女

请看代码后的注释，this指向的都是共有的属性和方法，而直接通过var声明的则属于私有变量（即外部不可访问变量），然后通过一个共有的show方法将私有的age和sex输出。当然show方法也要通过this声明才可以哟，否则的话show方法也是不可访问的。 

好处：

• 提高代码复用性
• 解耦
• 提高网站的打开速度

2.继承：

就是当多个方法存在相同的属性和方法时，就把这些相同的属性和方法提取到一个公共的方法中，通过原型prototype继承该方法。当然你也可以通过call或apply来继承该方法中的属性和方法。

function Person(name , age , sex){this.name = name ; this.age = age ; this.sex = sex ; this.show = function (){console.log( this.age + "========"+ this.sex );}
}
function Student(name , age , sex , score){this.score = score ; Person.apply(this,[name , age , sex]);
}
function Worker(name , age , sex , job){this.job = job ; Person.call(this,name , age , sex);
}
Dancer.prototype = new Person('Sunshine',18,'女');
function Dancer(salary ){this.salary = salary ;
}
var student = new Student('Sunshine',18,'女',100);
var worker = new Worker('Sunshine',18,'女','IT');
var dancer = new Dancer(20000);
console.log(student);
console.log(worker);
console.log(dancer);

当然，个人感觉那个prototype没有说的很好，如果看到这篇博客的你有更好的建议或意见的话，欢迎给我留言。还有call和apply,其实它们的作用是一样的，都是改变this指向，然后它们的区别也可以从代码中看出，传参方式不同。

3.多态 ：

多态就是在执行同一操作且作用于不同对象时，返回不同的结果 。其实也就是把做什么和由谁去做分开，这样使得代码更容易维护，且条例清晰。直接上例子吧：

function dwn(s){document.write(s+"<br/>");
}
function Animal(){this.bite=function(){dwn("animal bite!");}
}
function Cat(){this.bite=function(){dwn("Cat bite!");}
}
Cat.prototype=new Animal(); ///inherit Animal
function Dog(){this.bite=function(){dwn("Dog bite");}
}   
Dog.prototype=new Animal();  ///inherit Animal
function AnimalBite(animal){if(animal instanceof Animal) //这里是判断animal的原型是否指向Animalanimal.bite();
}
var cat = new Cat();
var dog = new Dog();
AnimalBite(cat);
AnimalBite(dog);
//最终输出的结果如下：
/*Cat bite!Dog bite
*/

https://blog.csdn.net/qq_22896159/article/details/81779667

70.js事件机制

https://juejin.im/post/58f94c9bb123db411953691b 

71.prototype （原型）

https://juejin.im/post/5b24b116e51d4558a65fdb70 

72.SEO是什么

根据你收入的内容，浏览器检索出关键字

73.对象的深拷贝？ES6、ES5(高频)

浅拷贝：当原对象发生变化的时候，拷贝对象也跟着变化；
深拷贝： 另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；

// 浅拷贝

/*** Created by 811 on 2018/7/27.*/
function simpleClone(initalObj) {var obj = {};for ( var i in initalObj) {obj[i] = initalObj[i];}return obj;
}var obj = {a: "hello",b:{a: "world",b: 21},c:["Bob", "Tom", "Jenny"],d:function() {alert("hello world");}
};
var cloneObj = simpleClone(obj);console.log(cloneObj.a);
console.log(cloneObj.b);
console.log(cloneObj.c);
console.log(cloneObj.d);//更改原对象中的a,b,c,d，看看拷贝过来的对象是否变化
cloneObj.a = "changed";
cloneObj.b.a = "changed";
cloneObj.b.b = 25;
cloneObj.c = [1, 2, 3];
cloneObj.d = function() { alert("changed"); };
console.log(obj.a);    //hello
console.log(obj.b);    //{a:"changed",b:25},事实上就是只有对象是拷贝的引用类型
console.log(obj.c);    //['Bob','Tom','Jenny']
console.log(obj.d);    //...alert("hello world")

// 实现浅拷贝的第二种方法

ES6中的Object.assign方法，Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

Object.assign(target, ...sources)
参数：

• target：目标对象。
• sources：任意多个源对象。
• 返回值：目标对象会被返回。

var obj1 = {a: "hello",b: {a: "hello",b: 21}
};var cloneObj1= Object.assign({}, obj1);
cloneObj1.a = "changed";
cloneObj1.b.a = "changed";
console.log(obj1.a);  //hello
console.log(obj.b.a); // "changed"

 // 深拷贝

// 手动复制--一个一个赋值
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

  es6==============================================

1.const let var 区别？

• var声明变量存在变量提升，let和const不存在变量提升
• let声明变量和const声明常量，两个都可以形成块级作用域
• const声明之后必须赋值，否则会报错;一旦赋值就不能改变
• var是不受限于块级的，而let是受限于块级
• ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
• const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
• var会与window相映射（会挂一个属性），而let不与window相映射

2.变量提升:变量提升会优先声明

变量提升意思是 var声明变量时 先声明 再赋值

var a = 5;
function test3(){var a;cosnole.log(a)
}
test3();      ------------>undefinedvar a = 5;
function test3(){
var a = 3;
console.log(a)
}
test3()    -------------->3 (变量提升）

函数提升：将整个代码块提升到他所在的作用域，最开始执行

var a = 1;
function foo() {
var a = function(){} ----->函数提升
a = 10;
console.log(a)------------10
return
}
foo()
console.log(a)--------------1

匿名函数不会被提升

3.什么是匿名函数

• 语法:(function(){...}());
• 前面的括号包含函数体，后面的括号就是给匿名函数传递参数并立即执行之
• 匿名函数的作用是避免全局变量的污染以及函数名的冲突
• 小括号的作用:小括号对返回的，就是一个匿名函数的Function 对象

(function(x,y){
alert(x+y);
return x+y;
}(3,4)); 

https://www.cnblogs.com/ClareZjy/p/6365891.html 

4.JS执行上下文

当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。 

运行环境:

• 全局执行上下文，函数上下文与eval上下文(全局环境)
• 全局上下文指：window对象(全局环境)
• 函数上下文：指this自己(.函数环境)
• eval上下文：一般不会用

5.js中this对象的指代

• 全局环境中this指向window对象
• 当前函数中，this指当前对象
• this指向就箭头函数外部的函数
• 箭头函数没有this指向，指向上下文

6.使用箭头函数应注意什么？

优点:

• 语法简洁,函数定义不再使用关键字function(),而是用()=>来进行定义
• 解决了this指向的问题,有一个确定的作用域

注意:

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

7.模板字符串

模版字符串，用`（反引号）标识，用${}将变量括起来。

var name="zzw";
` ${name},no matter what you do,I trust you.`

https://www.cnblogs.com/xiaowie/p/11601599.html 

8. ... 展开运算符

可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

数组合并的时候用

// 数组合并
var array1 = [1, 2, 3,4];
var array2 = [4, 5, 6];
var array3 = [...array1, ...array2, 7, 8]; //[1,2,3,4,4,5,6,7,8]
array1.push(...array2 )// 当然也可以使用concat等数组合并方法，但是扩展运算符提供了一种新的方式

9.promise(异步)

Promise 是异步编程的一种解决方案 

语法上:

promise是一个对象,可以获取异步操作的消息,promise提供统一的API,各种异步操作都能处理

2个特点:

• 对象的状态不受外界影响 （3种状态）
  • Pending状态（进行中）
  • Fulfilled状态（已成功）
  • Rejected状态（已失败）
• 一旦状态改变就不会再变 （两种状态改变：成功或失败）
  • Pending -> Fulfilled
  • Pending -> Rejected

var promise = new Promise(function(resolve, reject){// ... some codeif (/* 异步操作成功 */) {resolve(value);} else {reject(error);}
})

 Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve作用是将Promise对象状态由“未完成”变为“成功”，也就是Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；而reject函数则是将Promise对象状态由“未完成”变为“失败”，也就是Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。

then:

 Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：

1. Promise对象状态改为Resolved时调用 （必选）
2. Promise对象状态改为Rejected时调用 （可选）

 routeInfo (type = 'edit') {return new Promise((resolve, reject) => {this.listData(type).then(result => {return new Promise((resolve) => {let res = result.list[0]if (result.list.length !== 1) {console.warn('待办结果不唯一')}resolve(res)})}).then(res => {this.dataValidator(res, type).then(res => {resolve({name: this.info[this.typeCode][type].routerName,query: this.info[this.typeCode][type].query(res),params: this.info[this.typeCode][type].params && this.info[this.typeCode][type].params(res)})}).catch(e => {reject(e)})}).catch(e => {reject(e)})})}

all:多个请求一起发出并根据请求顺序获取和使用数据的场景

    getData () {Promise.all([this.getCreditData(),this.getProjectData()]).then(result => {}).finally(() => {this.loading.detail = false})},

 catch:reject状态时才会进入,捕获错误信息

let p2 = new Promise((resolve, reject) => {reject('123');}).catch(e => e);

finally() :成功失败都进finally

finally()方法用于指定不管Promise对象最后状态如何，都会执行的操作。

Promise.then(result => {}).catch(error => {}).finally(() =>{})

10.Symbol（第七种基本数据类型）

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

好处：用来定义对象的唯一属性名（类似于id一样是唯一标识）

缺点：

Symbol类型是不能通过Object.keys()或者for...in来枚举,因为不包含在对象自身的属性名集合(property name)中

因此：使用JSON.stringify()将对象转成JSON字符串的时候，Symbol这个属性也会排除在外

（1）为什么引入Symbol?

之前的对象属性名是字符串,容易造成属性名冲突

（2）typeof运算符用于Symbol类型值,返回symbol

let name = Symbol()
console.log(typeof name)   // Symbol

（3)Symbol的值和谁都不相等,是独一无二的值.

 let symbol1 = Symbol()let symbol2 = Symbol()console.log(symbol1 === symbol2)  // falseconsole.log(symbol1 == symbol2)   // falsesymbol1和symbol2相等吗?

不相等.因为Symbol类型的值是独一无二的值.

（4）.为什么Symbol不能用new关键字?

let obj = new Symbol()     // TypeError

symbol值不是对象，所以不能添加属性

（5）console.log(Symbol(‘Alice’) + “bruce”)   // TypeError,为什么错误?

Symbol值不能与其他类型的值进行运算

（6）如何读取Symbol的属性值?

 let name = Symbol()let obj = {}obj[name] = “Alice”cosnole.log(obj[name])

Symbol值定义属性时，必须放在方括号内，不能用点运算符。

（7）Symbol的值显示的转成字符串或者布尔值,但是不能转成数值.

（8）获取对象属性的两种方法

  Object.getOwnPropertySymbols()   和  Object.getOwnPropertyNames() 

11.set数据结构

理解：
Set本身是一个构造函数，用来生成Set数据结构。类似于数组，但是成员的值是唯一分，不重复的。

用法:

1.//  数组去重[...new Set([1,2,3,3])]  // [1,2,3]
//  字符串去重[...new Set([‘zyy’])].join(‘’)   // ‘zy’

注意: 

向Set加入值的时候，不会发生类型转换，所以5和’5’是两个不同的值。Set内部判断两个值是否不同，使用的算法叫做“same-value-zero equality”,它类似于精确相等运算符（===）

let set = new Set()
set.add(NaN)
set.add(NaN)
console.log(set)   // Set{NaN}
// 也就是说NaN是相等的
let set = new Set()
set.add({})
set.add({})
console.log(set.size)		// 2
// 也就是说，上面的2个空对象是不相等的

=================================================================================(下面不是高频的) 

11.Map 

理解：

类似于对象，也是键值对的集合，但”键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Object结构提供了”字符串-值” 的对应，Map结构提供了”值-值”的对应，是一种更完善Hash结构实现。

用法:

const map = new Map({
[‘name’: ‘张三’],
['title', 'Author']
})
map.size  // 2
map.has(‘name’)  // true
map.get(‘name’)  // ‘张三’

经典题：
set特点：是构造函数    类似于数组，但是里面的值是唯一的
1.实现数组去重和set的交集，并集，差集

// 数组去重
console.log([...new Set([1,2,2])])    // [1,2]console.log(Array.from(new Set([1,2,2])))   //[1,2]let set1Arr = new Set([1,2,3])let set2Arr = new Set([2,3,4])
// 交集let jiao = new Set([...set1Arr].filter(x => set2Arr.has(x)))console.log(“jiao”,jiao)  // set(2){2,3}
// 并集
console.log( new Set([...set1Arr,...set2Arr]))  // Set(4){1,2,3,4}
// 差集
let cha = new Set([...set1Arr].filter(x => !set2Arr.has(x)))
console.log(“cha”,cha)   // 	Set(1) {1}

给定一个整数无序数组和变量 sum，如果存在数组中任意两项和使等于 sum 的值，则返回true。否则, 返回false。例如，数组[3, 5, 1, 4]和 sum = 9，函数应该返回true，因为4 + 5 = 9。

//常规版本const findSum = (arr, val) => {let searchValues = new Set();searchValues.add(val - arr[0]);for (let i = 1, length = arr.length; i < length; i++) {let searchVal = val - arr[i];if (searchValues.has(arr[i])) {return true;} else {searchValues.add(searchVal);}};return false;};//简洁的版本：const findSum = (arr, sum) =>arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));let findS = findSum([3, 5, 1, 4], 9)
console.log(findS) //true

Set上的forEach()方法

forEach()方法还会被传递一个回调函数，该回调函数接受3个参数

1. Set中下个位置
2. 与第一个参数相同的值
3. 目标Set本身

由于Set没有键，为了使forEach方法与数组和map的forEach方法一致：将Set中的每一项同时认定为键与值。

let set = new Set([1, 2]);set.forEach(function(value, key, ownerSet) { 
console.log(`${key} ${value}`) 
console.log(ownerSet === set); 
})
1 1
True
2 2
True

17.setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列

　　其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行

　　promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行

　　async函数表示函数里面可能会有异步方法，await后面跟一个表达式

　　async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

8.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

类模板字符串的功能

let name = 'web';let age = 10;let str = '你好，${name} 已经 ${age}岁了'str = str.replace(/\$\{([^}]*)\}/g,function(){return eval(arguments[1]);})console.log(str);//你好，web 已经 10岁了

https://blog.csdn.net/qq_30904985/article/details/81300883 

9.import、export导入导出

ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

 9.修饰器 @

decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

10.class 类的继承

ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

23.Promise 中reject 和 catch 处理上有什么区别

reject 是用来抛出异常，catch 是用来处理异常

reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch

网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

11.async、await

使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

14.Proxy代理

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

15.ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

//定义类
class Point { constructor(x,y) { //构造方法this.x = x; //this关键字代表实例对象this.y = y; } toString() {return '(' + this.x + ',' + this.y + ')'; }
}

21.字符串的截取两个方法（subString subStr）的区别？

1. stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
2. stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符

19.下面的输出结果是多少

const promise = new Promise((resolve, reject) => {console.log(1);resolve();console.log(2);
})promise.then(() => {console.log(3);
})console.log(4);

1 2 4 3

Promise 新建后立即执行，所以会先输出 1，2，而 Promise.then() 内部的代码在 当次 事件循环的 结尾 立刻执行 ，所以会继续输出4，最后输出3

20.使用结构赋值，实现两个变量的值的交换

let a = 1;let b = 2;
[a,b] = [b,a];

21.设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key

 let name = Symbol('name');let product = {[name]:"洗衣机",    "price":799};Reflect.ownKeys(product);

22.下面Set结构，打印出的size值是多少

let s = new Set();
s.add([1]);
s.add([1]);console.log(s.size);

答案：2

两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值

都能存储到Set结构中，所以size为2

24.使用class 手写一个promise

//创建一个Promise的类class Promise{constructor(executer){//构造函数constructor里面是个执行器this.status = 'pending';//默认的状态 pendingthis.value = undefined//成功的值默认undefinedthis.reason = undefined//失败的值默认undefined//状态只有在pending时候才能改变let resolveFn = value =>{//判断只有等待时才能resolve成功if(this.status == pending){this.status = 'resolve';this.value = value;}}//判断只有等待时才能reject失败let rejectFn = reason =>{if(this.status == pending){this.status = 'reject';this.reason = reason;}}    try{//把resolve和reject两个函数传给执行器executerexecuter(resolve,reject);}catch(e){reject(e);//失败的话进catch}}then(onFufilled,onReject){//如果状态成功调用onFufilledif(this.status = 'resolve'){onFufilled(this.value);}//如果状态失败调用onRejectif(this.status = 'reject'){onReject(this.reason);}}}

26.将下面for循环改成for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){sum += arr[i];
}

答案：

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){sum += value;
}

27.、理解 async/await以及对Generator的优势

　 async await 是用来解决异步的，async函数是Generator函数的语法糖

　　使用关键字async来表示，在函数内部使用 await 来表示异步

　　async函数返回一个 Promise 对象，可以使用then方法添加回调函数

　　当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

　　async较Generator的优势：

　　（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样

　　（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　

　　（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值

　　（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

28.forEach、for in、for of三者区别

　forEach更多的用来遍历数组for in 一般常用来遍历对象或jsonfor of数组对象都可以遍历，遍历对象需要通过和Object.keys()for in循环出的是key，for of循环出的是value

29.说一下es6的导入导出模块

// 只导入一个
import {sum} from "./example.js"// 导入多个
import {sum,multiply,time} from "./exportExample.js"// 导入一整个模块
import * as example from "./exportExample.js"

导出通过export关键字

//可以将export放在任何变量,函数或类声明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;//也可以使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};//使用export default时，对应的import语句不需要使用大括号
let bosh = function crs(){}
export default bosh;
import crc from 'crc';//不使用export default时，对应的import语句需要使用大括号
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';

13.堆栈内存(没看)

当浏览器加载页面时，会形成两个虚拟的内存；一个栈内存，堆内存；

栈内存：

1. 提供代码的运行环境；
2. 存储基本数据类型；

堆内存： 存储引用数据类型；

28.函数的递归

递归： 针对的是函数； 是JS中一种重要的思想； 
函数： 分为定义和执行 
函数递归： 在函数体内部，调用函数自己本身，让其执行；这就是递归；

function sum(num) {
if(num === 0){
return num;
}
if(num%3===0){
return num + sum(num-1);
}
if(num%3!==0){
return sum(num-1);
}
// return sum(99)
// return 99 + sum(98)
// return 99 + sum(97)
// return 99 + sum(96)
// return 99 + 96 + sum(95)....
// return 99 + 96 +... + 3 + sum(2)
// return 99 + 96 +... + 3 + sum(1)
// return 99 + 96 +... + 3 + 0
}
console.log(sum(100));
console.log(sum(200));

29.求1-100之间是3倍数的和（% : 取模；取余数）

var total = 0;
for(var i=0;i<100;i++){
if(i%3===0){
total += i;
}
}

30.数组的插入排序

var ary = [12,88,67,98,56,35,45,26,1];
//5 6 7 8 10
//得到的新数组是排好序
//插入排序原理：去原有数组中去取每一项，然后和新数组中的成员进行比较，从新数组后面开始，一一向前比较，比新数组项小，继续和前一项比较，直到当前项比数组中一项值大时，把它放到这一项的后面；
var newAry = [];
newAry.push(ary[0]);
for(var i=1;i<ary.length;i++){
var cur = ary[i];
for(var j=newAry.length-1;j>=0;j--){
if(cur<newAry[j]){// 如果数组中拿到的这一项比新数组中j的这一项小；那么继续j--;和上一个成员进行比较；
if(j===0){
newAry.unshift(cur);
break;// 只会中止当前的小循环
}
}else{
// cur<newAry[j]的情况，把当前项放到新数组这一项的后面；
newAry.splice(j+1,0,cur);
break;
}
}
}
// 从前向后
console.log(newAry);
var ary = [12,88,67,98,56,35,45,26,1];
var mAry = [12,67,88];
mAry.push(ary[0]);
for(var i=1;i<ary.length;i++){
var cur = ary[i];
for(var j = mAry.length-1;j>=0;j--){
if(cur<mAry[j]){
if(j===0){
mAry.unshift(cur);
break;
}
}else{
mAry.splice(j+1,0,cur);
break;
}
}
}

30.数组的冒泡排序

var ary = [12,32,56,67,88,99,101];
// 1. sort
/*ary.sort(function (a,b) {
return a-b;// 从小到大
});*/
// 实现从小到大
// 让相邻两项进行比较，如果前面一项比后面一项大，那么让这两项互换位置；如果前比后面一项小，那么不换位置；每循环一整轮，把数组的最大值放到数组的最后面；有多少项，就执行多少次这样的循环；
for(var j = 0;j<ary.length;j++){
// 当外面的循环循环一次；
var flag = true;// 标识的作用
for(var i=0;i<ary.length-1-j;i++){
// 里面整个循环完一次，实现将最大值放到最后；
if(ary[i]>ary[i+1]){//前面一项比后面大
// 借助第三方变量
//如果能进来，说明数组没有排好顺序；如果进不来，说明数组已经是排好的
var temp = ary[i];
ary[i] = ary[i+1];
ary[i+1] = temp;
flag = false;
}
}
if(flag){
break;
}
}
console.log(ary);

31.数组的快速排序（快速排序快速排序的原理： 首先取原有数组中的中间项；接下来循环原有的数组每一项，和中间项进行比较，如果比中间项的小的放在左边的数组中，比中间项大的放在右边的数组中；然后再对左边和右边数组进行刚才的操作；最后把所有的小数组和中间项串在一起就是排好的数组；）

var ary = [12,8,89,78,76,56,25,35];
function quickSort(ary) {
console.log(ary);
// 当数组的长度小于等于1；直接return当前的数组；
if(ary.length<=1){
return ary;
}
//获取
var middleIndex = Math.floor(ary.length/2);
//删除数组中中间项；并且获取中间项的值
var middleVal = ary.splice(middleIndex,1)[0];
console.log(middleVal);
var left = [];
var right = [];
for(var i=0;i<ary.length;i++){
var cur = ary[i];
//比中间项的小的放中间项的左边的数组，比中间项大的放中间项的右边的数组
if(cur<middleVal){
left.push(cur);
}else{
right.push(cur);
}
}
//对中间左右两边的数组进行重新这样的操作
return quickSort(left).concat(middleVal,quickSort(right))
}
var newAry = quickSort(ary);
console.log(newAry);

32.随机验证码

var code = document.getElementById("code");
function getCode() {
// 准备一个62个字符串；
// 产生随机数；随机数可以作为字符的索引；
// 随机索引范围【0-61】
var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 随机数；
var i =0;
var newStr = "";
while(i<4){
var num = Math.round(Math.random()*(61-0)+0);
newStr+=str[num];
i++;
}
code.innerHTML = newStr;
}
getCode();
// 把函数的空间地址赋值给code的onclick属性；
code.onclick = getCode;

43.看下列代码会有什么样的输出？

var foo = "11"+2-"1";  
console.log(foo);//112-1=111
console.log(typeof foo);//”number”

考点：
1、数字和字符串都可以用加法运算符，数字和字符串相加，结果就是一个字符串
2、但是减法运算符只能用于两个数字之间，想要执行减法运算，必须把两边数字都变成数字类型的
答案：”111”、”number”

45.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，alert出”This is Baidu Campus”。

考点：数组的join方法的使用,将一个数组通过指定字符分隔组成一个想要的字符串
答案：alert(stringArray.join(“ ”))

46.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

    function combo(msg){var arr=msg.split("-");//[get,element,by,id]for(var i=1;i<arr.length;i++){arr[i]=arr[i].[0].toUpperCase()+arr[i].substring(1);//Element}msg=arr.join("");//msg=” getElementById”return msg;
}

47.var numberArray = [3,6,2,4,1,5];

1）实现对该数组的倒排，输出[5,1,4,2,6,3]

function reverseArray(arr){var result=[];//方法1：/*for (var i = arr.length - 1; i >= 0; i--) {result.push(arr[i]);}*///方法2：for (var i = 0, len = arr.length; i < len; i++) {result.unshift(arr[i]);}return result;
}

2）实现对该数组的降序排列，输出[6,5,4,3,2,1]

function sortDesc(arr) {for (var i = 0, len = arr.length; i < len; i++) {for (var j = i + 1, len2 = arr.length; j < len2; j++) {//>就是降序 <就是升序if (arr[j] > arr[i]) {var temp = arr[j];arr[j] = arr[i];arr[i] = temp;}}}return arr;
}

51.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

var iArray = []; 
function getRandom(istart, iend){var iChoice = iend - istart +1;return Math.floor(Math.random() * iChoice+ istart);
}
Math.random()就是获取0-1之间的随机数（永远获取不到1）
for(var i=0; i<10; i++){
var result= getRandom(10,100);iArray.push(result);
}
iArray.sort();

52.把两个数组合并，并删除第二个元素。

考点：1、数组的concat、splice用法
splice() 方法删除数组的元素，或者向数组中添加元素，然后返回被删除的项目。
参数1：从何处开始删除数组的元素（使用负数则从数组的末尾开始）
参数2：要删除的元素个数（如果是0，就代表不删除）
参数3，4，5。。。：要添加的元素

var array1 = ['a','b','c'];

var bArray = [‘d’,’e’,’f’];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

53.写一个function，清除字符串前后的空格。（兼容所有浏览器）

使用自带接口trim()，考虑兼容性(IE9以下浏览器不支持)：
考点：1、原型扩展 2、正则表达式 3、字符串的replace方法

if(typeof String.prototype.trim !=”function”){
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,”“);
}
}
var str=” hello “;

54.Javascript中, 以下哪条语句一定会产生运行错误？ 答案( BC )             ??????????????

A、var _变量=NaN;      // 
B、var 0bj = [];             // Invalid or unexpected token
C、var obj = //;           
D、var obj = {};
//正确答案：BC

56.Javascript创建对象的几种方式？

构造函数方式，原型模式，混合构造函数原型模式，工厂方式，动态原型方式

混合构造函数+原型模式：

function Robot(name){this.name=name;
}

Robot.prototype.say=function(){alert("大家好，我叫"+this.name);
};
var alphaGo=new Robot("阿尔法狗");
alphaGo.say();

工厂方式：

function create(name,age){var o={};o.name=name;o.age=age;return o;
}
var p1=create("张三",20);

动态原型方式：

function Person(name,work){this.name=name;if(work){Person.prototype.doWork=function(){alert("我正在从事"+work+"的工作");}}
}
var p1=new Person("姚明");
var p2=new Person("喵喵","程序猿鼓励师");

59.documen.write和 innerHTML 的区别？

• document.write 指定位置输出
• dom.innerHTML 可以重绘指定元素的内容
• document.write和innerHTML的区别

61.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

62.将数字 12345678 转化成 RMB形式 如： 12,345,678

//思路：先将数字转为字符， str= str + ” ;
//利用反转函数，每三位字符加一个 ‘,’最后一位不加； re()是自定义的反转函数，最后再反转回去！

for(var i = 1; i <= re(str).length; i++){tmp += re(str)[i - 1];if(i % 3 == 0 && i != re(str).length){tmp += ',';}
}

64.什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？

一个运算符如果有一个操作数，为一元运算符，两个为二元，三个为三元运算符，三元表达式则为一个三元运算表达式！

71.如果某一个接口很缓慢，用户离开这个页面该怎么处理？

84.内建对象：Object,Array，自定义对象

var Obj = new Object()
// 添加属性
obj.name = "小明"
// 添加方法
obj.sleep = function(){
console.log(this.name + '在')
}

内建对象可以通过几种方式创建

1. new关键字创建对象
2. 通过字面量创建对象   var fun = new fun()
3. 构造函数对象
4. 用中括号法访问属性

87.什么是数组？什么是对象

数组：用于在变量中存储多个值，以下角标为标识

方法：

cocat()   .............................合并数组

pop....................................删除最后一位

push.................................添加最后以为

shift.................................. 删除第一位

unshift.............................增加第一位

reverse............................反转

slice...................................截取指定位置数组

sort.................................数组排序

splice...............................删除指定位置

toString.............................转成字符串并返回

indexOf............................数组的索引

map()同forEach

forEach   遍历数组，没有返回值

forEach(value,index,self)

value:遍历数组的数据

index:对应索引

self: 数组自身

map:同forEach功能

map的回调函数会执行结果，然后map将所有回调函数的返回值组成一个新数组返回

forEach与map区别

相同点：

1.都是循环遍历数组中的每一项

2.都有3个参数，item（当前每一项），index(索引值），arr(原数组）

不同点：

forEach:遍历数组，无返回值

map遍历数组,有返回值

93.js有几种弹出窗

alert.confirm,prompt

alert：警告窗

confirm：确认窗口

prompt:信息输入窗口

es6===================

VUE面试题

-------------------

vue中更新版本/升级添加版本号/项目升级/打包部署/等

1.对MVVM的理解

M：model层，在model层对数据进行操作和修改数据

V：View(视图层）

VM:ViewModel监听模型数据的改变和控制视图行为。相当于模型层和视图层的一个桥梁，起连接作用。

在MVVM模式下，View和Modal没有直接的联系，而是通过ViewModal进行交互，Modal和ViewModal之间交互是双向的，因此View数据的变化会同步到Modal上，Modal数据的变化也会立即反应到View上。

ViewModal通过数据双向绑定把View和Modal层连接起来，而View和Modal之间的工作同步是完全自动的，无需别人干涉，因此开发者只关注业务逻辑，不需要动手操作DOM，不需要关注状态的同步问题，复杂的数据状态完全由MVVM管理

2.生命周期：Vue实例从创建到销毁的过程。从开始创建，初始化数据，编译模板，挂载DOM->渲染，更新->渲染，销毁等一系列过程。

beforeCreate(创建前）：只是单纯的创建$el和data,数据观测和初始化时间还未开始（自己理解：只是单纯的创建$el和data）

created(创建后）：完成数据观测，属性和方法的运算，初始化事件（data），但是$el属性还没有显示出来（自己理解：data初始化完成，$el仍只是创建中）

beforeMounte(挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。（自己理解：vue实例的$el和data都初始化完成，但data还是挂载之前虚拟的DOM节点，data尚未替换,此时还没有挂载html在页面上）

mounted(载入后）：在el被创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置。用上面编译好的html内容替换el属性指向DOM对象。完成模板的html渲染到html页面上。此过程是ajax交互过程（自己理解：用真实数据替换虚拟DOM）

beforeUpdate（更新前）： 重新渲染之前触发（自己理解：data数据已经发生改变，但是未渲染）

updated（更新后）：数据已经更改完成，dom也重新render完成，更改数据会陷入死循环（自己理解：data数据已经发生改变，并且旧数据代替新数据）

beforeDestory（销毁前）：在实例销毁之前调用。实例仍然完全可用

destoryed（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

(1).生命周期的作用？

生命周期有很多钩子函数，通过钩子函数让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

(2).生命周期总共有几个阶段？

8个，创建前/后；载入前/后；更新前/后；销毁前/后

(3).第一次页面加载会出发那几个钩子？

beforeCreate, created, beforeMount, mounted 

(4).DOM渲染在哪个周期已经完成？

mounted

(5)简单描述每个周期具体适合那些场景？

beforeCreate:可以在这个上加loading事件，在加载实例时触发

created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求的调用 

mounted:挂载元素，获取到DOM节点  

beforeDestory:可以做停止确认框事件
nexTick:改变dom元素,nexTick()方法延时调用函数事件来渲染视图

[更改数据后当你想立即使用js操作新的视图的时候需要使用它]

    changeTxt:function(){let that=this;that.testMsg="修改后的文本值";  //修改dom结构that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行let domTxt=document.getElementById('h').innerText; console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，if(domTxt==="原始值"){console.log("文本data被修改后dom内容没立即更新");}else {console.log("文本data被修改后dom内容被马上更新了");}});},

https://www.jianshu.com/p/a7550c0e164f

3.VUE双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据的变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：

1.在自身实例化时往属性订阅器（dep）里面添加自己

2.自身必须有一个update（）方法

3.待属性变动dep.motice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

4.Vue组件间的参数传递；（vue组件传值）

一：父子关系组件

1.父向子传值

父组件向子组件传值用props属性。首先，在子组件里定义一个props值用来接收父组件数据；然后调用子组件并v-bind绑定这个props值 = 父组件的data值。

父组件代码：

<template><div class="home"><HelloWorld :newMsg="msg" /> //绑定子组件newMsg(props值) = 父组件msg(data值)</div>
</template><script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {name: "Home",data(){return{msg:'Welcome to Vue.js'} //父组件数据msg},components: {HelloWorld}
};
</script>

子组件代码：

<template><div><h1>{{ newMsg }}</h1>  //直接调用newMsg，显示“Welcome to Vue.js”</div>
</template><script>
export default {name: "HelloWorld",props: {newMsg: String}  //为子组件定义newMsg(props值)接收父组件msg//或者props:['newMsg']
};
</script>

2.子组件向父组件传值

子组件向父组件传值有两种方式：

（1）：利用$emit()方法。 首先在子组件中用$emit()向上传递一个自定义事件并附带想要传递的数据；然后在父组件v-on监听这个自定义事件并自动接收到数据；最后在响应该事件的方法中进行数据操作。

子组件代码：

<script>
export default {name: "HelloWorld",data() {return {msg:"Welcome to Vue"} //data值，即将向上传递的值},created(){this.$emit('change',this.msg) //向上传递自定义事件change和data值。这里我调用created生命周期函数触发$emit()}
};
</script>

 父组件代码：

<template><div class="home"><HelloWorld @change="handle" /> //监听到子组件传递来的事件并响应handle方法<span>{{newMsg}}</span>  //直接调用newMsg，显示“Welcome to Vue”</div>
</template><script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {name: "Home",data() {return {newMsg:""}},methods:{handle(msg){           //定义handle方法，将自动接收到的msg值给了自己的newMsgthis.newMsg = msg}},components: {HelloWorld}
};
</script>

（2）利用ref属性。ref是vue的内部属性，类似于id,class标识。首先在子组件上定义ref值(例:ref="son")；然后在父组件中用this.\$refs.son即可获取到son这个ref的组件，进行操作。

子组件代码：

<script>
export default {name: "HelloWorld",data() {return {msg:"Welcome to Vue"}  //即将向父传递的data值}
};
</script>

 父组件代码：

<template><div class="home"><HelloWorld ref="son" />  //在子组件上定义一个ref 名为"son"</div>
</template><script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {name: "Home",mounted(){console.log(this.$refs.son.msg)  //获取到ref名为"son"的子组件内msg数据，在控制台显示“Welcome to Vue”},components:{HelloWorld}
};
</script>

二：兄弟关系组件:

1. 兄弟之间传递数据需要借助事件车，通过事件车的方式传递数据
2. 创建一个vue实例，让各个兄弟共同使用一个事件机制
3. 传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据）
4. 接收数据方，通过mounted()触发bus.$on(方法名，function(接收数据的参数）{用该数据接收的传递过来的数据}），此时函数中的this已经发生了改变，可以使用箭头函数。
   自己总结:(先单独创建一个eventVue.js文件,在兄弟组件中引入这个js事件,并且兄弟之间传递数据需要借助一个中间人,这个中间人可以是父组件,在父组件中引入兄弟组件,传递数据的组件通过触发bus.$emit事件传数据,接收数据的组件通过bus.$on接收参数,这样就达成了兄弟组件的传递)

举例子：

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue'export default new Vue

 假如父组件如下：

<template><components-a></components-a><components-b></components-b>
</template>

子组件a如下：

<template><div class="components-a"><button @click="abtn">A按钮</button></div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {name: 'app',data () {return {‘msg':"我是组件A"}},methods:{abtn:function(){eventVue .$emit("myFun",this.msg)   //$emit这个方法会触发一个事件}}
}
</script>

 子组件b如下：

<template><div class="components-a"><div>{{btext}}</div></div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {name: 'app',data () {return {'btext':"我是B组件内容"}},created:function(){this.bbtn();},methods:{bbtn:function(){eventVue .$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题this.btext = message      })}}
}
</script>

三：页面关系组件

在vuecli3.0以后，项目结构对组件级别作了明确的区别：入口组件(App) - 页级组件(View) - 零件组件(Component)。一般在开发中我们也会尽量按照这种结构去划分模块，但页级组件没有父组件，如果说页级组件之间需要传值，那就不能用“总线转送”的方法了。
vuex： 这是官方提供的一个插件，可称为“状态管理仓库”，用来管理项目中需要跨页共享反复调用的状态(状态你可以理解成就是数据、变量、方法)。

vuex的存放仓库为Store，内部结构可分五大块：
state： 状态库，寄放基础状态。
mutations： 同步方法，可理解成相当于组件内的computed属性，接收state进行改装。
actions： 异步方法，只针对mutations，接收并改装。
getters： 过滤器，对state调用前进行改装、派生并返回数据。
modules： 模块，在复杂项目中用modules处理Store，使分工更清晰。

自己总结

vuex:状态管理库,分5大模块:

• state:状态库
• mutations:相当于computed属性,改变state状态(同步方法)
• actions:对mutations进行改变(异步方法)
• getters:过滤器,对state调用前的状态进行修改
• modules: 模块,处理Store，使分工更清晰

vue页面之间传值:

1. 使用vue-router通过跳转链接带参数传参。
2. 使用本地缓存localStorge。
3. 使用vuex数据管理传值。

说说vue的动态组件

    多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

主要考查面试这 component的 is属性。

https://segmentfault.com/a/1190000019208626

https://zhuanlan.zhihu.com/p/33036996

5.Vue的路由实现：hash模式和history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash,用window.location.hash读取
URL：http://www.abc.com/#/hello hash 的值为 #/hello

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务器安全无用，hash不会重加载页面

hash模式下，hash符号之前的内容会被包含在请求中。如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：它采用的是HTML5的新特性；且提供了2个新方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听状态变更。history模式下，前端URL必须和实际向后端发起请求的URL一致，如http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

6.Vue与React的区别？-------（不会）

相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；

不同点：

React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

7.vue的优点是什么？vue如何性能优化

可重用性：可以将公共部分抽取出组件

低耦合。使用了双向绑定原理

性能优化：

代码层面优化：

根据不用场景选择合适的条件

1. v-show和v-if的使用(v-show:频繁的切换场景)
2. computed 和 watch  区分使用场景

Webpack 层面的优化：

1. Webpack 对图片进行压缩
2. 提取公共代码，抽成公共组件
3. 减少 ES6 转为 ES5 的冗余代码

https://www.jianshu.com/p/41d161310949

8.路由之间跳转

声明式（标签跳转<router-link to='home'>）

编程式（js跳转router.push（‘/home’））

9.组件传值.sync   

 原理------vue子父组件传值

vue2.4版本后添加了.sync修饰符:可以在子组件中修改值

<HelloWorld :msg.sync="msg" @parentFun='change'/>   //使用sync修饰符//在父组件中监听msg是否发生了变化watch:{			　　　msg:(newValue,oldValue)=>{				　　　console.log(oldValue);				console.log(newValue);}	}

子组件中：要修改值需要出发函数  update:msg    : update是固定的,后面跟着的是变量   

changeMsg: function() {this.$emit('update:msg','hello')console.log(this.$props.msg)
},

11.vuex是什么？怎么使用？使用场景

全局存储数据用的-----状态管理

在main.js引入store，注入。用来读取状态集中store中

新建了一个目录store，….. export 。

场景:单页应用中，组件之间的状态

State：存放数据状态，不可直接修改里面数据

https://blog.csdn.net/LuckyandLucky/article/details/104209839?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

12.如何让css在当前组件中起作用

就在当前组件内使用

13.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id

接收传递的参数 params.id

14.vue-router有哪几种导航钩子？

3种：

一种是全局导航钩子：router.beforeEach(to,from,next),

作用：

• 跳转前进行判断拦截
• to:route即将进入的目标路由对象
• from:route当前导航正要离开的路由

next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

第二种：组件内的钩子

第三种：单独路由独享组件

15.说出至少4种vue当中的指令和他的用法？

v-if

v-on：事件绑定

v-bind:class:绑定属性样式

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}

v-modal:绑定数据

<template><div><div class="message">{{ info.message }}</div><div><input v-model="info.message" type="text"></div><button @click="change">click</button></div>
</template><script>export default {data () {return {info: {}}},methods: {change () {this.info.message = 'hello world'}}}
</script>

v-for:循环

v-bind(冒号就是v-bind的缩写,是为了动态绑定数据)

注意:

加上了冒号是为了动态绑定数据，等号后面可以写变量。

如果不使用冒号，等号后面就可以写字符串等原始类型数据。这时就无法进行动态绑定数据了。

16.vue-loader是什么？用途是什么？

解析.vue文件的一个加载器

用途：加载由 vue-loader 提取出的 CSS 代码

17.scss是什么？在vue.cli中的安装使用步骤是？有那几大特性？

css的预编译

第一步：先装css-loader、node-loader、sass-loader等加载器模块

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

特性：

可以用变量，例如（$变量名称=值）；
可以用混合器，例如（）
可以嵌套

18.为什么使用key?

key作为唯一标识，当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则vue为了效率只会替换相同标签内部的内容

19.说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹放静态资源

components放组件

router是定义路由相关配置

view视图

app.vue是一个应用主组件

main.js是入口文件

20.vue.cli中怎么使用自定义组件？有遇到过哪些问题吗？

第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {

第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，

问题：命名需要注意smithButton命名，使用的时候则smith-button。

21.active-class是哪个组件的属性？

vue-router模块的route-link组件

22.keep-alive

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

https://www.jianshu.com/p/9523bb439950

23.v-if与v-show的区别？

• v-show是css切换，如果，display：none在源码中也不显示   (block显示）
• v-if条件渲染，是完整的销毁和重新创建       v-if="false",当为false时不会渲染页面

24.绑定class的数组用法

• 对象方法：v-bind:class="{'name':'snsn','price':11}
• 数组方法：v-bind:class="[class1,class2]"
• 行内：v-bind:style="{color:color,fontSize:fontSize+'px}"

25.计算属性和watch的区别

computed:监听值，计算出一个新的值

get:读取当前属性值,根据计算并返回当前属性值

set:监听当前属性值的变化,当属性值变化时,更新相关属性数据

// 计算一个全名,fullName不可以在data中定义
data: {firstName: 's',lastName:'ss'
}
computed:{
fullName: {
get(){   //回调函数,读取当前属性值,根据计算并返回当前属性值
return this.firstName + this.lastName
},
set(val){ // 监事当前属性值的变化,当属性值变化时,更新相关属性数据
this.firstName = val[0]
this.lastName = val[1]
}
}
}

watch:监听值的变化,

它是一个对象,有哪些属性?

• handler:深度监听对应的函数名必须为handler
• deep:是否深度监听
• immediate:是否立即执行

<div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p>
</div>new Vue({el: '#root',data: {firstName: 'Dawei',lastName: 'Lou',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}} 
})

• immediate和handler,deep

watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样immediate: true,deep: true}
}

computed 和 methods 有什么区别？

methods是一个方法，它可以接受参数，而computed不能，computed可以缓存，methods不会。

computed 和 watch有什么区别？

computed:

1. 计算值
2. 应用:简化template里面{{}}计算和处理props和$emit的传值
3. 具有缓存性:页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数

watch:

1. 观察的动作
2. 应用:监听props,$emit或本组件的值执行异步操作
3. 无缓存性,页面重新渲染不发生变化也会执行 

26.事件修饰符

• .stop事件：阻止冒泡事件发生
• .prevent:防止事件加载跳转到下一个页面
• .once:事件只执行一次

27.组件中data为什么是函数？(为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？)

因为组件是用来复用的，JS里对象是引用关系，这样作用域没有隔离，而new Vue的实例，是不会被复用的，因此不存在引用对象的问题。

28.怎么理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

export default {props: {value: String},data () {return {currentValue: this.value}}
}

如果是对 prop 值的转换，可以使用计算属性：

export default {props: ['size'],computed: {normalizedSize: function () {return this.size.trim().toLowerCase();}}

29.slot插槽

单个插槽：

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

命名插槽：

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。
这样可以将父组件模板中 slot 位置，和子组件 slot 元素产生关联，便于插槽内容对应传递

作用于插槽：

可以访问组件内部数据的可复用插槽(reusable slot)
在父级中，具有特殊特性 slot-scope 的<template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。

30.css只在当前组件起作用。

在style标签中写入scoped即可。例如：<style scoped></style>

31.vue路由  动态路由  怎么动态添加路由

route和router的区别：

动态路由实际上指的是路由传参，比如列表调详情，动态添加路由是vue router中的addRoutes方法

route是“路由信息对象”，包括path,params,hash,query,fullPath,matched，name等路由信息参数。

而router是“路由实例“对象包括路由的跳转方法，钩子函数等

https://www.jianshu.com/p/51fb8003f312

https://www.cnblogs.com/dengyao-blogs/p/11562257.html

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

数据驱动，组件系统

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

可以

34.vue等单页面应用以及优缺点？

• 优点：可以通过API实现响应的数据绑定和组合的视图组件
• 缺点：如果数据很多，页面加载慢

35.this.$route.params与this.$route.query的区别。（开发中遇到什么问题?）

this.$route.query的使用

A:传参数

this.$router.push({path:'/custom',quuery:{id:id}
})

 B:接收参数

this.$route.query.id

C.在url中的形式（url带参数）

http://172.19.186.224:8080/#/monitor?id=1

D.页面之间用路由跳转传参时，刷新跳转后传参页面，数据还会显示存在。

this.$route.params的使用

A.传参

this.$router.push({
path:'/custom',
params:{
id:id
}
})

B:接收参数

this.$route.params.id

C.在url中的形式（url不带参数）

http://172.19.186.224:8080/#/monitor

D.页面之间用路由跳转传参时，刷新页面跳转传参的页面，数据不存在

37.聊聊对vue.js的template编译的理解 

38.你怎么认识vuex的?

微信小程序

1.请谈谈微信小程序主要目录和文件的作用？

• App.js 设置一些全局的基础数据等；
• App.json 底部tab, 标题栏和路由等设置；
• App.wxss 公共样式，引入iconfont等；
• pages 里面包含一个个具体的页面；
• index.json (配置当前页面标题和引入组件等)；
• index.wxml (页面结构)；
• index.wxss (页面样式表)；
• index.js (页面的逻辑，请求和数据处理等)；
• project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

 2 请谈谈wxml与标准的html的异同？

相同:都是用来描述页面的结构；

不同:

• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
• WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
• 都由标签、属性等构成；
• 标签名字不一样，且小程序标签更少，单一标签更多；
• 组件封装不同， WXML对组件进行了重新封装，
• 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

 3.请谈谈WXSS和CSS的异同？

相同:都是用来描述页面的样子；

不同:

• WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
• WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
• WXSS 仅支持部分 CSS 选择器；
• WXSS 提供全局样式与局部样式

4.你是怎么封装微信小程序的数据请求的？

1.在根目录下创建api目录及api.js文件和request.js文件；

2.在request.js 封装基础的get, post 和 put，delete方法和一个请求公共的方法，创建函数设置请求体，带上token和异常处理等；

3.根据页面数据请求的需要, 导出增删改查4个方法

 4.index.js-------------->是写请求接口的,引入4个方法,并根据不同接口使用不同函数

5.在具体的页面中导入；

5 小程序页面间有哪些传递数据的方法？

• 使用全局变量实现数据传递
• 页面跳转或重定向时，使用url带参数传递数据
• 使用组件模板 template传递参数
• 使用缓存传递参数
• 使用数据库传递数据

6.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

7 请谈谈小程序的生命周期函数？

• onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
• onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
• onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
• onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

8 简述微信小程序原理？

• 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
• 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
• 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
• 功能可分为webview和appService两个部分；
• webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
• 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

9.小程序视图渲染结束回调？

使用setData(data, callback)，在callback回调方法中添加后续操作代码

10.this.setData

赋值用的,会让页面重新渲染,如果直接用data里赋值,页面不会重新渲染,宇vue的不同之处

11.方法传值

问题:点击方法怎么获得传的值?

可以data-参数名 = "传的值"    wxml

接收值 (e.currentage.target)

12.小程序2点间距离

获取当前用的地理位置   wx.getlocal

用wx.getlocal拿到经纬度,再用后台返的经纬度,再在前端方法计算2点间距离

PC端

1.引入腾讯地图js文件

2.页面创建一个节点(div)

3.初始化新建地图实例的一个方法

搜索:通过调用腾讯地图的API实现

13.e:事件对象

14.json:小程序页面的配置

例如:页面标题,颜色什么的都可以在这里面设置

主要文件:

app.json   全局配置  tarBar

app.js       入口文件必须有的

15.小程序页面间有哪些传递数据的方法

var app = get App()

app:存储全局变量或者存在本地

缓存中:localStorage:用于微信小程序自己的方法

16.小程序跳转方式有几种?

• wx.navigateTo:          正常跳转可以返回
• wx.redirectTo             跳转后当前页面关闭
• wx:relanuch           跳转页面后所有页面
• wx:swichTab          调到tab页
• 前3个不能跳转到tab页

17.wxss和css有哪些不一样

在css上做了一些补充和修改

1.单位:rpx

2.用import引入外部样式

例如:2个页面相同样式比较多就可以用引入  的方式

18.如何提高微信小程序的应用速度？

1. 提高页面加载速度
2. 用户行为预测
3. 组件化方案

19.组件间通信

https://www.cnblogs.com/fps2tao/p/11368357.html

20.前端分页--分页

22.组件传值 

1.父组件引用子组件

父组件json文件中(局部的)

 "usingComponets":{"customerSelector":"/compnents/customerSelector/index"}

子组件中json

{"component": true
}

2.父组件中给组件传的值

<empty-image tableList="{{tableList.list}}"></empty-image>

 3.子组件接收

// 无数据
Component({properties: {tableList: {type: Array,value: []}}
})

2：子组件传值给父组件

子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传递想要给父组件的值( sonParam )

在父组件中，子组件的引用处，通过这个myevent事件绑定一个方法( onMyEvent )

在父组件的js中，定义这个方法onMyEvent，在这个方法内就可以获取到子组件传递过来的值了

浏览器面试题

1.浏览器的存储方式有哪些?

HTTP面试题

1.HTTP有哪些请求方法?

HTTP1.0定义了3中方法:GET,POST,HEAD

HTTP1.1新增了5种请求:OPTIONS,PUT,DELETE,TRACE和CONNECT

2.以上方法具体有什么作用?

• GET:请求指定的页面信息，并返回实体主体
• POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
• PUT:从客户端向服务器传送的数据取代指定的文档的内容。
• DELETE: 请求服务器删除指定的页面的数据。
• HEAD:  只请求页面的首部。
• OPTIONS:允许客户端查看服务器的性能

3.GET和POST有什么区别?

1. 数据传输不同:GET请求通过URL传输数据,而POST的数据通过请求体传输
2. 安全性不同:POST数据因为在请求体内,所以有一定的安全性保证;而GET的数据在URL中,通过历史记录,缓存很容易查到数据信息

4..什么是幂等性

幂等不管进行多少次重复操作,都是实现相同的结果.

5.REST请求中哪些是幂等操作(rest:前后台通信的一种方式)

• GET,PUT,DELETE都是幂等操作,而POST不是
• GET请求很好理解，对资源做查询多次，此实现的结果都是一样的。
• PUT请求的幂等性可以这样理解，将A修改为B，它第一次请求值变为了B，再进行多次此操作，最终的结果还是B，与一次执行的结果是一样的，所以PUT是幂等操作。
• 同理可以理解DELETE操作，第一次将资源删除后，后面多次进行此删除请求，最终结果是一样的，将资源删除掉了。
• POST不是幂等操作，因为一次请求添加一份新资源，二次请求则添加了两份新资源，多次请求会产生不同的结果，因此POST不是幂等操作。(对于POST请求，两次调用POST请求，可能就会在服务器创建两份资源，所以当然不是幂等的。)

6.PUT和POST都是给服务器发送资源的,有什么区别?

区别:幂等性（PUT方法是幂等的：连续调用一次或者多次的效果相同（无副作用），而POST方法是非幂等的。）

我们在开发一个博客系统，当我们要创建一篇文章的时候往往用POST https://www.jianshu.com/articles，这个请求的语义是，在articles的资源集合下创建一篇新的文章，如果我们多次提交这个请求会创建多个文章，这是非幂等的。

而PUT https://www.jianshu.com/articles/820357430的语义是更新对应文章下的资源（比如修改作者名称等），这个URI指向的就是单一资源，而且是幂等的，比如你把『刘德华』修改成『蔡徐坤』，提交多少次都是修改成『蔡徐坤』

GET和POST方法区别?

• get重点在从服务器上获取资源,post重点在向服务器发送数据
• get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?"连接，多个请求数据间用"&"连接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的；
  post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
• Get传输的数据量小，因为受URL长度限制，但效率较高；
  Post可以传输大量数据，所以上传文件时只能用Post方式；(自己总结:get传输数据量小,但是高效;post传输数据量大)
• get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；
  post较get安全性较高；(自己总结:post安全性比get高)
• get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。
  post支持标准字符集，可以正确传递中文字符。(get只支持ASCII字符;post支持标准字符集)

7.PUT和PATCH都是给服务器发送修改资源，有什么区别？

PUT和PATCH都是更新资源，而PATCH用来对已知资源进行局部更新.

比如我们有一篇文章的地址https://www.jianshu.com/articles/820357430,这篇文章的可以表示为:

article = {author: 'dxy',creationDate: '2019-6-12',content: '我写文章像蔡徐坤',id: 820357430
}

当我们要修改文章的作者时，我们可以直接发送PUT https://www.jianshu.com/articles/820357430，这个时候的数据应该是

{author:'蔡徐坤',creationDate: '2019-6-12',content: '我写文章像蔡徐坤',id: 820357430
}

这种直接覆盖资源的修改方式应该用put，但是你觉得每次都带有这么多无用的信息，那么可以发送PATCH https://www.jianshu.com/articles/820357430，这个时候只需要:

{author:'蔡徐坤',
}

8.http的请求报文是什么样的？

请求报文有4部分组成:

• 请求行:请求方法,地址,http版本信息.他们用空格分隔.例如, GET /index.html HTTP/1.1
• 请求头部:由关键字和值组成,用英文冒号分隔;
• 空行
• 请求体

• 请求体: post put等请求携带的数据
  

9.http的响应报文是什么样的？

请求报文有4部分组成:

• 响应行:由协议版本,状态码和状态码原因短语组成;例如HTTP/1.1 200 OK
• 响应头:响应部首组成
• 空行
• 响应体:服务器响应的数据

10.HTTP的部首有哪些？

// ✨重点

通用首部字段（请求报文与响应报文都会使用的首部字段）

• Cache-Control  控制缓存 ✨
• Connection 连接管理、逐条首部 ✨
• Date 创建报文的日期✨
• Transfor-Encoding 报文主体的传输编码格式 ✨

请求首部字段（请求报文会使用的首部字段）

• Accept 客户端请求的浏览器类型 ✨
• Accept-Encoding 优先可处理的编码格式✨
• Accept-Language 优先可处理的自然语言✨
• Accept-Charset 优先可以处理的字符集✨
• Authorization web的认证信息 ✨
• Host 请求资源所在服务器 ✨
• User-Agent 客户端程序信息 ✨

响应首部字段（响应报文会使用的首部字段）

• Accept-Ranges 能接受的字节范围✨
• Location 令客户端重定向的URI ✨
• Server 服务器的信息 ✨
• ETag 能够表示资源唯一资源的字符串 ✨

实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）

• Allow 资源可支持http请求的方法 ✨                  // Allow：GET, HEAD
• Content-Language 实体的资源语言✨               //Content-Lanuage: zh-CN
• Content-Encoding 实体的编码格式✨                   // Content-Encoding: gizp
• Content-Length 实体的大小（字节）✨              // Content-Length: 15000
• Content-Type 实体媒体类型✨
• Content-Range实体主体的位置返回✨
• Last-Modified 资源最后的修改资源 ✨
• Expires 实体主体的过期资源 ✨
  https://www.cnblogs.com/insane-Mr-Li/p/10142445.html

11.HTTP的状态码有哪些？

2XX 成功

• 200 OK，表示从客户端发来的请求在服务器端被正确处理 ✨(请求成功)
• 204 No content，表示请求成功，但响应报文不含实体的主体部分
• 206 Partial Content，进行范围请求 

3XX 重定向

• 301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
• 302 found，临时性重定向，表示资源临时被分配了新的 URL ✨(重定向,临时被分配新的url)
• 303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
• 304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
• 307 temporary redirect，临时重定向，和302含义相同

4XX 客户端错误

• 400 bad request，请求报文存在语法错误 ✨(请求无效,提交数据的字段名与后端要的不一样)https://www.cnblogs.com/beppezhang/p/5824986.html
• 401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息 ✨(token失效)https://blog.csdn.net/ShiMengRan107/article/details/101781145
• 403 forbidden，表示对请求资源的访问被服务器拒绝 ✨(一般为跨域问题,请求头不一样)
• 404 not found，表示在服务器上没有找到请求的资源 ✨(请求路径不对)
• 408 Request timeout, 客户端请求超时(请求超时)

5XX 服务器错误

• 500 internal sever error，表示服务器端在执行请求时发生了错误 ✨
• 503 service unavailable，服务器正忙✨

12.同样是重定向307，303，302的区别？同样是重定向307，303，302的区别？

302是http1.0的协议状态码，在http1.1版本的时候为了细化302状态码又出来了两个303和307。

303明确表示客户端应当采用get方法获取资源，他会把POST请求变为GET请求进行重定向。 307会遵照浏览器标准，不会从post变为get。

13.为什么有了HTTP为什么还要HTTPS？

https是安全版的http，因为http协议的数据都是明文进行传输的，所以对于一些敏感信息的传输就很不安全，HTTPS就是为了解决HTTP的不安全而生的。

14.HTTPS是如何保证安全的？

对称加密：即通信的双方都使用同一个秘钥进行加解密，比如特务接头的暗号，就属于对称加密

对称加密虽然很简单性能也好，但是无法解决首次把秘钥发给对方的问题，很容易被hacker拦截秘钥。

非对称加密：

1. 私钥 + 公钥= 密钥对
2. 即用私钥加密的数据,只有对应的公钥才能解密,用公钥加密的数据,只有对应的私钥才能解密
3. 因为通信双方的手里都有一套自己的密钥对,通信之前双方会先把自己的公钥都先发给对方
4. 然后对方再拿着这个公钥来加密数据响应给对方,等到到了对方那里,对方再用自己的私钥进行解密

非对称加密虽然安全性更高，但是带来的问题就是速度很慢，影响性能。

解决方案：

那么结合两种加密方式，将对称加密的密钥使用非对称加密的公钥进行加密，然后发送出去，接收方使用私钥进行解密得到对称加密的密钥，然后双方可以使用对称加密来进行沟通。

此时又带来一个问题，中间人问题：

如果此时在客户端和服务器之间存在一个中间人,这个中间人只需要把原本双方通信互发的公钥,换成自己的公钥,这样中间人就可以轻松解密通信双方所发送的所有数据。

所以这个时候需要一个安全的第三方颁发证书（CA），证明身份的身份，防止被中间人攻击。

证书中包括：签发者、证书用途、使用者公钥、使用者私钥、使用者的HASH算法、证书到期时间等

但是问题来了，如果中间人篡改了证书，那么身份证明是不是就无效了？这个证明就白买了，这个时候需要一个新的技术，数字签名。

数字签名就是用CA自带的HASH算法对证书的内容进行HASH得到一个摘要，再用CA的私钥加密，最终组成数字签名。

当别人把他的证书发过来的时候,我再用同样的Hash算法,再次生成消息摘要，然后用CA的公钥对数字签名解密,得到CA创建的消息摘要,两者一比,就知道中间有没有被人篡改了。

这个时候就能最大程度保证通信的安全了。

14.Http与Https的区别：

1. HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2. HTTP 是不安全的，而 HTTPS 是安全的
3. HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
4. 在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5. HTTP 无法加密，而HTTPS 对传输的数据进行加密
6. HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

15.一次完整的HTTP请求所经历的7个步骤

16.HTTP1.1版本新特性

• 默认持久连接节省通信量,只要客户端服务端任意一端没有明确提出断开TCP连接,就一直保持连接,可以发送多次HTTP请求
• 管线化,客户端可以同时发出多个HTTP请求,而不用一个个等待响应
• 断点续化(实际上就是利用http消息头使用分块传输编码,将实体主体分块传输)

17.TCP/IP面试整理

https://blog.csdn.net/qq_40086556/article/details/82017916

React面试题