Web前端面试题（全锦集）

- 日理万妓 2022-12-26 04:48 189阅读 0赞

## 1    第一部分： ##

# 聪明的猴子都在看右下角目录 #

[点击查看更多资源][Link 1]

## 前端基础(HTML CSS JS基础) ##

### 1.    怎么让一个不定宽高的 DIV，垂直水平居中？ ###

答：1.使用 CSS 方法：

父盒子设置：display：table-cell； text-align：center；vertical-align：middle；

Div设置：   display：inline-block；vertical-align：middle；

2.使用 CSS3 transform：

父盒子设置：display：relative

Div 设置：   transform： translate(-50%，-50%)；position： absolute；top： 50%；left:50%

### 2.    px，em，rem 的区别？ ###

答：1.px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

2.em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3.rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML根元素。

4.区别：IE 无法调整那些使用 px作为单位的字体大小，而 em和 rem可以缩放，rem相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8 及更早版本外，所有浏览器均已支持 rem。

### 3.    CSS 引入的方式有哪些? link 和@import 的区别是? ###

答：内联 内嵌 外链 导入

区别 ：同时加载  前者无兼容性，后者 CSS2.1 以下浏览器不支持  Link 支持使用javascript 改变样式，后者不可

### 4.    div+css的布局较table布局有什么优点？ ###

答:  1.改版的时候更方便 只要改css文件。

2.页面加载速度更快、结构化清晰、页面显示简洁。

3.表现与结构相分离。

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

### 5.    描述 css reset 的作用和用途？ ###

答：Reset 重置浏览器的 css 默认属性 ，览器的品种不同，样式不同，然后重置，让他们统一

### 6.    解释 css sprites，如何使用？ ###

答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

### 7.    简述一下src与href的区别。 ###

答:src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

### 8.    CSS都有哪些选择器？ ###

答:

派生选择器（用HTML标签申明）

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a\{  \}）

群组选择器（利用逗号间隔，比如p,div,\#a\{  \}）

### 9.    CSS选择器的优先级是怎么样定义的？ ###

答:一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

用1表示派生选择器的优先级

用10表示类选择器的优先级

用100标示ID选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1

span\#xxx .songs li 优先级1+100 + 10 + 1

\#xxx li 优先级 100 +1

### 10. 清除浮动的几种方式？ ###

答：1，父级 div定义 height  原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、 容易掌握 ，但只适合高度固定的布局.

2，结尾处加空div标签 clear：both  原理：在浮动元素的后面添加一个空 div兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .

3，父级 div定义 伪类：after 和 zoom  /\*清除浮动代码\*/  .clearfix：after\{ content：""； display：block； visibility：hidden； height：0； line-height：0； clear：both； \}  .clearfix\{zoom：1\} 原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 转有属性)可解决 ie6，ie7浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。

4，父级 div定义 overflow：hidden  超出盒子部分会被隐藏，不推荐使用. 5. 双伪元素法： .clearfix：before，.clearfix：after \{    content： ""；    display： block；    clear： both；   \}   .clearfix \{    zoom： 1；   \}

### 11. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ ###

答:

最基本的：设置display属性为none，或者设置visibility属性为hidden

技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000em

### 12. 能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？ ###

答：

流式布局:使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏 幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。     这样的布局方式，就是移动 web 开发使用的常用布局方式。这样的布局可以适配移动端不同 的分辨率设备。

响应式开发:那么 Ethan Marcotte 在 2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多 个终端。越来越多的设计师也采用了这种设计。CSS3 中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。

1.     超小屏幕（移动设备）768px以下

2.     小屏设备 768px-992px

3.     中等屏幕 992px-1200px

4.     宽屏设备 1200px 以上

### 13. 合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？ ###

答：结构是 html，表现是 css

### 14. 简述对 Web 语义化的理解？ ###

答：就是让浏览器更好的读懂你写的代码，在进行 HTML结构、表现、行为设计时，尽量使 用语义化的标签，使程序代码简介明了，易于进行 Web 操作和网站SEO，方便团队协作的一种标 准，以图实现一种“无障碍”的 Web开发

### 15. display： none；与 visibility： hidden 的区别是什么？ ###

答：

display：none； 使用该属性后，HTM元素（对象）的宽度、高度等各种属性值都将“丢失”；

visibility：hidden； 使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全 透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值

### 16. HTML 与 XHTML——二者有什么区别 ###

答: HTML是一种基本的 WEB 网页设计语言，XHTML 是一个基于XML 的置标语言  最主要的不同：  XHTML 元素必须被正确地嵌套。  XHTML 元素必须被关闭。  标签名必须用小写字母。  XHTML 文档必须拥有根元素。

### 17. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ ###

答:

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

### 18. 浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？ ###

答:<input> 、<img> 、<button> 、<texterea> 、<label>。

### 19. 什么是外边距重叠？重叠的结果是什么？ ###

答: 外边距重叠就是margin-collapse。在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

### 20. rgba()和opacity的透明效果有什么不同？ ###

答:rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

### 21. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ ###

答:

垂直方向：line-height

水平方向：letter-spacing

### 22. 关于letter-spacing的实际用法有哪些？ ###

答:可以用于消除inline-block元素间的换行符空格间隙问题。

### 23. display：inline-block 什么时候会显示间隙？ ###

答:真正意义上的 inline-block 水平呈现的元素间，换行显示或空格分隔的情况下会有间距。  解决：父元素\{font-size：0；-webkit-text-size-adjust：none；\}

### 24. overflow 有哪些属性值？ ###

答:

Visible：默认值。内容不会被修剪，会呈现在元素框之外。

Hidden：内容会被修剪，并且其余内容是不可见的。

Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Inherit：规定应该从父元素继承 overflow 属性的值

### 25. CSS 样式初始化的目的 ###

答:是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初 始化往往会出现浏览器之间的页面差异。当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌 不可兼得，但力求影响最小的情况下初始化

### 26. Sass、LESS是什么？大家为什么要使用他们？ ###

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如[Less][]是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

### 27. 用 div+css 网站布局的好处 ###

答:

1：表现和内容相分离   将设计部分剥离出来放在一个独立样式文件中，HTML 文件中只存放文本信息。

2：提高搜索引擎对网页的索引效率用只包含结构化内容的 HTML 代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并 可能给你一个较高的评价。

3：提高页面浏览速度对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。

4：易于维护和改版   你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。从以上的描述来看，采用 CSS+DIV 对网站重构可以大大提升网站用户与搜索引擎的友好度,CSS+DIV 所以成为目前网页布局主流

### 28. CSS3 新特性有哪些？ ###

答：

1.颜色：新增 RGBA，HSLA 模式

2. 文字阴影（text-shadow、）

3.边框： 圆角（border-radius）边框阴影： box-shadow

4. 盒子模型：box-sizing

5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

6.渐变：linear-gradient、radial-gradient

7. 过渡：transition，可实现动画

8. 自定义动画 animate   @keyfrom

9. 在 CSS3 中唯一引入的伪元素是 ：：selection.

10. 媒体查询，多栏布局  @media screen and (width:800px)\{ … \}

11. border-image

12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13. 3D 转换

14 字体图标   font-face

15 弹性布局 flex

### 29. 移动端优先使用弹性布局（flex）来解决布局问题，请列出弹性布局的相关属性，并说明属性用途: ###

答:

flex 的 3 个属性  flex-grow | flex-shrink| flex-basis flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长 度单位的数字。 用 js 设置 flex object.style.flex="1"

### 30. CSS3 的兼容问题怎么处理？ ###

答:一般加私有前缀否则不做特殊处理，再有就是遵循 2 大原则，渐进增强和优雅降级

### 31. CSS3 新增伪类有那些？ ###

答:p:first-child 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-child  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 p:nth-child(2n)  选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked，单选框或复选框被选中。

### 32. CSS3 动画和 JS 动画主要的不同点是什么？ ###

答:

1.     功能涵盖面，JS 比 CSS3 大

①定义动画过程的@keyframes 不支持递归定义，如果有多种类似的动画过程，需要调 节多个参数来生成的话，将会有很大的冗余（比如 jQuery Mobile 的动画方案），而 JS 则天然可以 以一套函数实现多个不同的动画过程

② 时间尺度上，@keyframes 的动画粒度粗，而 JS 的动画粒度控制可以很细

③ CSS3 动画里被支持的时间函数非常少，不够灵活   ④ 以现有的接口，CSS3 动画无法做到支持两个以上的状态转化

2. 实现/重构难度不一，CSS3 比 JS 更简单，性能调优方向固定

3. 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码

4. CSS 动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前 缀），JS 则需要自己写事件

5. CSS3 有兼容性问题，而 JS 大多时候没有兼容性问

### 33. 简介盒子模型： ###

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

![image][]

### 34. 前端页面有哪三层构成，分别是什么?作用是什么? ###

答：结构层 Html 表示层 CSS 行为层 js。

### 35. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ ###

答:

1. block 象块类型元素一样显示。

none 缺省值。向行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

2. position的值

\*absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

\*fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

\* relative

生成相对定位的元素，相对于其正常位置进行定位。

\* static  默认值。没有定位，元素出现在正常的流中

\*（忽略 top, bottom, left, right z-index 声明）。

\* inherit 规定从父元素继承 position 属性的值。

### 36. css的基本语句构成是? ###

答:选择器\{属性1:值1;属性2:值2;……\}

### 37. 哪些css属性可以继承？ ###

答:

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height ;

### 38. b标签和strong标签,i标签和em标签的区别？ ###

答:后者有语义，前者则无。

### 39. image 和 canvas 在处理图片的时候有什么区别？ ###

答：image 是通过对象的形式描述图片的；canvas 通过专门的 API将图片绘制在画布上。

### 40. javascript的typeof返回哪些数据类型 ###

答:

alert(typeof \[1, 2\]); //object

alert(typeof 'leipeng'); //string

var i = true;

alert(typeof i); //boolean

alert(typeof 1); //number

var a;

alert(typeof a); //undefined

function a()\{;\};

alert(typeof a) //function

### 41. 例举3种强制类型转换和2种隐式类型转换? ###

答:

强制（parseInt(),parseFloat(),Number()）

隐式（== ,!!）

### 42. split() 、join() 的区别 ###

答:前者是切割成数组的形式，后者是将数组转换成字符串

### 43. 数组方法pop() push() unshift() shift() ###

答:

Push()尾部添加

pop()尾部删除

Unshift()头部添加

shift()头部删除

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

普通添加事件的方法：

var btn = document.getElementById("hello");

btn.onclick = function()\{

alert(1);

btn.onclick = function()\{

alert(2);

执行上面的代码只会alert 2

事件绑定方式添加事件：

var btn = document.getElementById("hello");

btn.addEventListener("click",function()\{

alert(1);

\},false);

btn.addEventListener("click",function()\{

alert(2);

\},false);

执行上面的代码会先alert 1 再 alert 2

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

addEventListener不兼容低版本IE

普通事件无法取消

addEventLisntener还支持事件冒泡+事件捕获

### 45. IE和DOM事件流的区别 ###

答:

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

### 46. call和apply的区别 ###

**答:**

**      call****方法:**   
    语法：call(thisObj，Object1,Object2...)  
    定义：调用一个对象的一个方法，以另一个对象替换当前对象。  
    说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。  
**      apply****方法：**   
    语法：apply(thisObj，\[argArray\])  
    定义：应用某一对象的一个方法，用另一个对象替换当前对象。  
    说明： 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

### 47. 如何阻止事件冒泡和默认事件 ###

答:

canceBubble() //只支持IE,

return false,stopPropagation()

### 48. 添加 删除 替换 插入到某个接点的方法 ###

答:

obj.appendChid()

obj.insertBefore()

obj.replaceChild()

obj.removeChild()

### 49. javascript的本地对象，内置对象和宿主对象 ###

答:

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

### 50. window.onload 和document ready的区别 ###

答: window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。$(document).ready要比window.onload先执行window.onload只能出来一次，$(document).ready可以出现多次

### 51. javascript的同源策略 ###

答:一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合

### 52. JavaScript是一门什么样的语言，它有哪些特点？ ###

答:javaScript一种[直译][Link 2]式[脚本语言][Link 3]，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的[解释器][Link 4]被称为JavaScript引擎，为[浏览器][Link 5]的一部分，广泛用于[客户端][Link 6]的脚本语言，最早是在[HTML][]网页上使用，用来给[HTML][]网页增加动态功能。JavaScript[兼容][Link 7]于ECMA标准，因此也称为[ECMAScript][]。

**基本特点**

1．是一种解释性脚本语言（代码不进行[预编译][Link 8]）。

2．主要用来向[HTML][]（[标准通用标记语言][Link 9]下的一个应用）页面添加交互行为。

3．可以直接嵌入HTML页面，但写成单独的[js][]文件有利于结构和行为的[分离][Link 10]。

4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如[Windows][]、[Linux][]、Mac、Android、iOS等）。

### 53. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？ ###

答:

直接在DOM里绑定事件：<div οnclick=”test()”></div>

在JS里通过onclick绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

### 54. Javascript的事件流模型都有什么？ ###

答:

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

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

答：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

### 56. 怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步） ###

答:

1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id，唯一性

### 57. 正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？ ###

答：当使用RegExp()构造函数的时候，不仅需要转义引号（即\\”表示”），并且还需要双反斜杠（即\\\\表示一个\\）。使用正则表达字面量的效率更高。

邮箱的正则匹配：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;</p> </td> 
  </tr> 
 </tbody> 
</table>

### 58. Javascript中callee和caller的作用？ ###

答:

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

### 59. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 ###

答:

Document.getElementById 根据元素id查找元素

Document.getElementByName 根据元素name查找元素

Document.getElementTagName 根据指定的元素名查找元素

### 60. 简述创建函数的几种方式 ###

答:

第一种（函数声明）：

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

第二种（函数表达式）：

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

第三种（函数对象方式）：

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

### 61. Javascript如何实现继承？ ###

答:

1.构造继承法       2.原型继承法       3.实例继承法

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

答:

1、var obj = \{\};（使用json创建对象）

2、var obj = new Object();（使用Object创建对象）

3、通过函数创建对象。

(1)、使用this关键字

(2)、使用prototype关键字

4、通过Window创建对象。

5、使用内置对象创建对象。

### 63. iframe的优缺点？ ###

答:

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空，加载也需要时间

3. 没有语意

### 64. 请你谈谈Cookie的弊端？ ###

答:

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

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

答:

1. defer和async

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 按需异步载入js

### 66. documen.write和 innerHTML 的区别？ ###

答:

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

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

答:

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

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

2. 闭包

3. 控制台日志

4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

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

答:

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

### 69. javascript的本地对象，内置对象和宿主对象 ###

答:

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

### 70. window.location.search() 返回的是什么？ ###

答：

查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值返回值：?ver=1.0&id=timlq 也就是问号后面的！

### 71. window.location.hash 返回的是什么？ ###

答：锚点 ， 返回值：\#love ；

### 72. window.location.reload() 作用？ ###

答：刷新当前页面。

### 73. javascript 中的垃圾回收机制？ ###

答：在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再  被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么  函数a执行后不会被回收的原因。

### 74. 如何在HTML中添加事件，几种方法？ ###

答:

1、标签之中直接添加 οnclick="fun()";

2、JS添加 Eobj.onclick = method;

3、现代事件IE： obj.attachEvent('onclick', method)；

FF: obj.addEventListener('click', method, false);

### 75. BOM对象有哪些，列举window对象？ ###

答:

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

### 76. bind(), live(), delegate()的区别 ###

答:

bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。

delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上。

### 77. 你如何优化自己的代码？ ###

答:

1.代码重用

2.避免全局变量（命名空间，封闭空间，模块化mvc..）

3.拆分函数避免函数过于臃肿

4.注释

### 78. 简述readyonly与disabled的区别 ###

答:ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容.但是二者还是有着一些区别的：       1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。       2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

### 79. 请尽可能详尽的解释ajax的工作原理 ###

答:Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

### 80. 什么是三元表达式？“三元”表示什么意思？ ###

三元运算符:

三元如名字表示的三元运算符需要三个操作数。语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

### 81. 对于html的语义化标签的理解，结构化标签的理解，同时写出简洁的html结构，如何进行SEO优化？ ###

**解答:**对于html的语义化标签，用正确的标签做正确的事情。html语义化，让页面的内容结构化，便于对浏览器和搜索引擎的解析，在没有css样式的情况下，以文档的形式同样易于阅读，符合文档语义的标签。标签本身所代表的语义，每一个标签所带有的语义，根据语义去使用标签，依赖标记确定权重，同时也可以提高SEO的优化。对于结构化标签，按照一定的结构去使用标签。

简单的html结构

### 82. 在form表单中，get方式和post方式提交数据的区别是什么？如何判断在实际开发中的应用？ ###

解答:get方式和post方式提交数据的区别：

1） 大小不同，get方式传输的数据量较小，而post可以传输大量的数据。

2） 安全程度不同，get方式传输数据能够被别人轻易的看到数据内容，所以安全程度较低，而post则可以很好的隐藏。

3） 速度不同，post方式速度较慢，而get方式速度较快。

4） 在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据。

在实际开发中的应用：

1）在重要数据进行传输数据的时候，用post的方式进行提交数据。

2）在做数据查询的时候，用get的方式进行提交数据。

3）在做增加、删除和修改数据的时候，用post的方式进行提交数据。

### 83. 在input表单控件中，value和placeholder的区别是什么? ###

解答:placeholder: 表示在输入框中显示的提示信息，用户点击之后，提示信息就会消失。value: 叫做默认值，当用户想要在输入框中输入信息的时候，必须先手动的删除value的值 。

### 84. 在css当中，@import 和 link的区别是什么呢？ ###

解答:

1）本质的差别：link是属于XHTML的标签，而@import是CSS提供的一种方式。

2）加载顺序的差别：当页面进行加载的时候，link引用的CSS时会被加载，而@import引用的CSS会等页面加载完成以后才被加载，所以在 @import加载CSS的时候，一开始会没有样式。

3）兼容性的差别：@import在老的浏览器上不兼容，只有在IE5以上的浏览器才可以被识别，但是link可以在任意浏览器的版本上进行加载执行。

4）使用DOM文档对象模型控制样式的差别：当使用JavaScript控制DOM区改变样式的时候，只能使用link标签，而@import是不可以的。

5）作用不同：link是属于XHTML，除了可以加载css,还可以定义RSS等其它事务，而@import是属于css范畴，只能加载css。

6）权重不同：link方式的权重高于@import的权重值。

7）标签不同：import在html使用的时候需要标签，而link在html使用的时候不需要标签。

### 85. 新的HTML5文档类型和字符集是？ ###

解答:

HTML5文档类型 <!doctype html>  
HTML5使用UTF-8字符集

### 86. 对于web标准以及标准制定机构重要性的理解？ ###

解答:

网页标准和标准制定机构都是为了能让web发展的更健康，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

### 87. .html5的新特性有哪些？ ###

解答:

用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素新的内容元素，比如 article、footer、header、nav、section、menu新的表单控件，比如 number、date、time、email、url、search、color、range、month、week、datetime、datetime\_local。

1. html5的存储类型有什么区别？

解答:

cookies:服务器和客户端都可以访问，大小只有4KB左右，有有效期，过期后将会删除；localStorage:将数据保存在本地的硬件设备，没有时间限制，关闭浏览器也不会丢失。永久保存sessionStorage:将数据保存在session对象中，关闭浏览器后数据也随之销毁。临时保存。

### 88. 对于常见的浏览器内核有哪些？ ###

解答:

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器

Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey

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

Webkit：Safari Chrome

### 89. cookies，sessionStorage和localStorage的区别是什么？ ###

解答:

它们之间的共同点：都是保存在浏览器端，且是同源的。

它们之间的区别：

1）cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

2）存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。

3）作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享。

### 90. iframe框架有那些优缺点有哪些呢？ ###

解答:

frame框架的优点：

1）iframe能够原封不动的把嵌入的网页展现出来。

2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe框架的缺点：

1）搜索引擎的爬虫程序无法解读这种页面。

2）框架结构中出现各种滚动条。

3）使用框架结构时，保证设置正确的导航链接。

4）iframe页面会增加服务器的http请求。

5）iframe会阻塞主页面的Onload事件。

6）会产生很多的页面，不容易进行管理。

### 91. label的作用是什么? 是怎么用的? ###

解答:

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

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

2）ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

### 92. .你知道多少种Doctype文档类型？ ###

解答:

1）标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

2）HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

3）XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

4）Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

### 93. HTML和XHTML这两者之间有什么样的区别呢？ ###

解答:

1）XHTML 元素必须被正确地嵌套。2） XHTML 元素必须被关闭。3） 标签名必须用小写字母。4） XHTML 文档必须拥有根元素。

### 94. .请你谈谈对于CSS的布局有什么样的理解？ ###

解答：

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

### 95. CSS3有哪些新特性？ ###

解答:

1）CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）。

2）增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局。

### 96. 为什么要初始化CSS样式？ ###

解答:

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

### 97. 经常遇到的浏览器兼容性有哪些？如何解决？ ###

解答:

(1） 浏览器默认的margin和padding不同。

(2） IE6双边距bug。

(3）在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。

(4）min-height在IE6下不起作用。

(5）透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6。

(6）input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。

### 98. 怪异盒模型box-sizing？弹性盒模型|盒布局? ###

解答:

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;  
box-sizing有两个值一个是content-box，另一个是border-box。  
当设置为box-sizing:content-box时，将采用标准模式解析计算；  
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

### 99. 如何让一个div 上下左右居中? ###

解答:

方法1：``.**div1**\{ ``**width**:400**px**;` `**height**:400**px**;` `**border**:\#CCC``1**px**``**solid**;` `**background**:\#99f;` `**position**:**absolute**;` `**left**:50**%**;` `**top**:50**%**;` `**transform**:``translate(-50**%**,-50**%**);``\}` `**<**div``class**=**"div1"**></**div**>**``

方法2：``.**div2**\{ ``**width**:400**px**;` `**height**:400**px**;` `**border**:\#CCC``1**px**``**solid**;` `**background**:\#99f;` `**position**:``**absolute**;` `**left**:0;` `**top**:``0;` `**bottom**:``0;` `**right**:``0;` `**margin**:``**auto**;``\}` `**<**div``class**=**"div2"**></**div**>**``

方法3：``.**div3**\{ ``**width**:400**px**;` `**height**:400**px**;` `**border**:\#CCC``1**px**``**solid**;` `**background**:\#9f9;` `**position**:``**absolute**;` `**left**:``50**%**;` `**top**:50**%**;` `**margin-left**:-200**px**;` `**margin-top**:``\-200**px**;` `\}` `**<**div``class**=**"div3"**></**div**>**

### 100.     简述前端优化的方式 旧的雅虎34条|h5新添加的方式? ###

解答:

1、尽量减少HTTP请求次数2、减少DNS查找次数3、避免跳转4、可缓存的AJAX  
5、推迟加载内容6、预加载7、减少DOM元素数量8、根据域名划分页面内容9、使iframe的数量最小10、不要出现404错误11、使用内容分发网络12、为文件头指定Expires或Cache-Control 13、Gzip压缩文件内容14、配置ETag  
15、尽早刷新输出缓冲16、使用GET来完成AJAX请求17、把样式表置于顶部18、避免使用CSS表达式（Expression）19、使用外部JavaScript和CSS  
20、削减JavaScript和CSS  
21、用<link>代替@import  
22、避免使用滤镜23、把脚本置于页面底部24、剔除重复脚本

### 101.     css清除浮动的几种方式？ ###

解答:

1、父级div定义 height  
2、结尾处加空div标签 clear:bothdd  
3、父级div定义 伪类:after 和 zoom  
4、父级div定义 overflow:hidden  
5、父级div定义 overflow:auto  
6、父级div 也一起浮动7、父级div定义 display:table

### 102.     介绍一下你对浏览器内核的理解？ ###

解答:

主要分成两部分：

渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

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

### 103.     XHTML与HTML的有何异同？ ###

解答:

HTML是一种基于WEB的网络设计语言，XHTML是基于XML的置标语言，XHTML可以认为是XML版的HTML，所以它的语法比较严谨：元素必须关闭，嵌套必须正确，大小写区分，属性值必须用双引号，id属性代替name属性.

### 104.     列举IE 与其他浏览器不一样的特性？ ###

解答:

IE支持currentStyle，FIrefox使用getComputStyle

IE 使用innerText，Firefox使用textContent

滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

事件方面：IE：attachEvent：火狐是addEventListener

鼠标位置：IE是event.clientX；火狐是event.pageX

IE使用event.srcElement；Firefox使用event.target

IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none

CSS圆角：ie7以下不支持圆角

### 105.     写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？ ###

解答:

float情况下有双边距的bug，使用display: inline解决

宽高为奇数时有bug，使用偶数

min-height设置不了，加!important

z-index问题，给父亲设置position：relative

设置高度小与10px左右的时候，实际高度高于设置高度，因为有默认行高，把行高也设置

### 106.     什么是Web workers？为什么我们需要他? ###

解答:

一个运行在后台的JavaScript，有助于异步执行JavaScript，提高页面性能

### 107.     对WEB标准以及W3C的理解与认识? ###

解答:

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和 js 脚本、结构行为表现的分离，

## 第二部分：高级知识(JS高级 Jquery  ES6语法 AJAX) ##

### 1.    new 操作符具体干了什么呢? ###

答:

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

### 2.      js 中深拷贝和浅拷贝的区别？ ###

答:浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

### 3.      深拷贝有哪些方法： ###

1、递归拷贝

2、使用 Object.create()方法

3、jquery 有提供一个$.extend 也可以实现

4、函数库 lodash，也有提供 cloneDeep 用来实现

### 4.      什么是回调地狱，怎么解决回调地狱？ ###

答:由于回调函数是异步的，每一层的回调函数都需要依赖上一层的回调执行完，所以形成了 层层嵌套的关系最终形成了回调地狱。例如：定时器中再写定时器再写定时器，这种就形成了 通常所说的回调地狱。

解决:

1、避免函数的嵌套

2、模块化开发

3、使用 Promise 解决

### 5.      对 ES6 中 Promise 的理解？ ###

答:Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理 和更强大。所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是 一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。           特点：

1、自己身上有 all、reject、resolve 这几个方法

2、原型上有 then、catch 等方法

3、一旦建立，就无法取消，这是它的缺点

### 6.      谈谈你对 this 理解？ ###

答:

普通函数中：this->window

定时器中：this->window

构造函数中：this->当前实例化的对象

事件处理函数中：this->事件触发对象

在 js 中一般理解就是谁调用这个 this 就指向谁

### 7.      Js 的原型和原型链？原型链的应用？ ###

答:每个对象都会在其内部初始化一个属性，就是 prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会 有自己的 prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

应用：原型链是实现继承的主要方法。

### 8.      对 json 的了解？ ###

答:Json 指的是 js 对象表示法。

1.轻量级的数据交互格式

2.可以形成复杂的嵌套格式

3.解析非常方便

4.易于读写，占用带宽小

### 9.       jq 的在项目中的常用的方法？ ###

答:

使用 JQuery 获取元素

JQ 获取元素的内容：$("xxxx").html()

JQ 中的事件操作

JQ 操作控件属性

JQ 操作 css   ajax 操作

jq 函数级插件--$.fn.extend-添加成员函数/$.extend-添加静态方法

### 10.         $(this)和 this 的区别是什么？ ###

答:$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用 val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。

### 11.         jquery 对象和 dom对象是怎样转换的？ ###

答:jquery 转 DOM 对象:jQuery 对象是一个数组对象，可以通过\[index\]的得到相应的 DOM 对象还可以 通过 get\[index\]去得到相应的 DOM 对象。DOM 对象转 jQuery 对象:$(DOM 对象)

### 12.         jq 和 zepto 区别是什么？ ###

答:

相同点：

Zepto 最初是为移动端开发的库，是 jQuery 的轻量级替代品，因为它的 API 和 jQuery 相似，而文件更 小。Zepto 最大的优势是它的文件大小，只有 8k 多，是目前功能完备的库中最小的一个，尽管不大， Zepto 所提供的工具足以满足开发程序的需要。大多数在 jQuery 中·常用的 API 和方法 Zepto 都有， Zepto 中还有一些 jQuery 中没有的。另外，因为 Zepto 的 API 大部分都能和 jQuery 兼容，所以用起来极 其容易，如果熟悉 jQuery，就能很容易掌握 Zepto。你可用同样的方式重用 jQuery 中的很多方法，也可 以方面地把方法串在一起得到更简洁的代码，甚至不用看它的文档。

不同点:

针对移动端程序，Zepto 有一些基本的触摸事件可以用来做触摸屏交互（tap 事件、swipe 事件）， Zepto 是不支持 IE 浏览器的，这不是 Zepto 的开发者 Thomas Fucks 在跨浏览器问题上犯了迷糊，而是经 过了认真考虑后为了降低文件尺寸而做出的决定，就像 jQuery 的团队在 2.0 版中不再支持旧版的 IE（6 7 8）一样。因为 Zepto 使用 jQuery 句法，所以它在文档中建议把 jQuery 作为 IE 上的后备库。那样程序 仍能在 IE 中，而其他浏览器则能享受到 Zepto 在文件大小上的优势，然而它们两个的 API 不是完全兼 容的，所以使用这种方法时一定要小心，并要做充分的测试。

主要表现:

1、width()和 height()的区别：Zepto 由盒模型(box-sizing)决定，用.width()返回赋值的 width， 用.css('width')返回加 border 等的结果；jQuery 会忽略盒模型，始终返回内容区域的宽/高(不包含 padding、border)。

2、offset()的区别：Zepto 返回\{top,left,width,height\}；jQuery 返回\{width,height\}。

3、Zepto 无法获取隐藏元素宽高，jQuery 可以。

4、Zepto 中没有为原型定义 extend 方法而 jQuery 有。

### 13.         jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this？ ###

答:this 执行 init 构造函数自身，其实就是 jQuery 实例对象，返回 this 是为了实现 jQuery 的链式 操作

### 14.         jquery.extend 与 jquery.fn.extend 的区别？ ###

答:jQuery 为开发插件提拱了两个方法，分别是：

1. jQuery.fn.extend();用来扩展 jQuery 实例

2. jQuery.extend();用来扩展 jQuery 对象本身

### 15.         Zepto 的点透问题如何解决？ ###

答:点透主要是由于两个 div 重合，例如：一个 div 调用 show()，一个 div 调用 hide()；这个时候当点击 上面的 div 的时候就会影响到下面的那个 div；

解决办法主要有 2 种：

1.github 上有一个叫做 fastclick 的库，它也能规避移动设备上 click 事件的延迟响应， [https://github.com/ftlabs/fastclick][https_github.com_ftlabs_fastclick] 将它用 script 标签引入页面（该库支持 AMD，于是你也可以按照 AMD 规范，用诸如 require.js 的 模块加载器引入），并且在 dom ready 时初始化在 body 上，

2.根据分析，如果不引入其它类库，也不想自己按照上述 fastclcik 的思路再开发一套东西，需要 1. 一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的 “divClickUnder”对 click 事件的捕获，在 ios 的 safari，click 的捕获被认为和滚屏、点击输入框弹 起键盘等一样，是一种浏览器默认行为，即可以被 event.preventDefault()阻止的行为）。

### 16.         jQuery 中.bind() .live() .delegate() .on()的区别 ###

答:

1、bind(type,\[data\],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function()\{alert("ok");\});

2、live(type,\[data\],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来 的 $("a").live("click",function()\{alert("ok");\});

3、delegate(selector,\[type\],\[data\],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处 理程序，并规定当这些事件发生时运行的函数 $("\#container").delegate("a","click",function()\{alert("ok");\})

4、on(events,\[selector\],\[data\],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别：

.bind()是直接绑定在元素上 .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。 和.bind()的优势是支持动态数据。 .delegate()则是更精确的小范围使用事件代理，性能优于.live() .on()则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制

### 17.         json 字符串和 json 对象怎么相互转化？ ###

答:

JSON.parse() 从一个字符串中解析出 json 对象

JSON.stringify()  从一个对象中解析出字符串 在前后数据交互中经常使用，必须要记住。

### 18.         http 和 https 的区别是什么？ ###

答:http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。 HTTPS 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。 由于 https 要还密钥和确认加密算法的过程，所以更安全

### 19.         get 和 post 的区别？ ###

答:

客户端对服务器的请求常用类型主要有四种：

GET（从服务器获取）

POST（向服务器发送请求数据）

PUT（更新）

POST 和 GET 区别 GET 的所有参数全部包装在 URL 中，明文显示，且服务器的访问日志会记录，非常不安全 POST 的 URL 中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有涉及用户隐私的数据都要用 POST 传输。 GET：不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内 POST 方法提交的数据比较大，大小靠服务器的设定值限制，PHP 默认是 2M

### 20.         jsonp 的原理，有什么优缺点？ ###

答:ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

Jsonp 优点:

完美解决在测试或者开发中获取不同域下的数据,用户传递一个 callback 参数给服务端，然后服务 端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己 的函数来自动处理返回数据了。

Jsonp 缺点:

Jsonp 只支持 get 请求而不支持 post 请求,也即是说如果想传给后台一个 json 格式的数据,此时问题 就来了,浏览器会报一个 http 状态码 415 错误,告诉你请求格式不正确.

### 21.         跨域的几种解决方式 ###

答:

1.通过 jsonp 跨域

2. CORS 核心思想：在服务器端通过检查请求头部的 origin，从而决定请求应该成功还是失败。具体的方法 是在服务端设置 Response Header 响应头中的 Access-Control-Allow-Origin 为对应的域名，实现了 CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用 \*，但对于一些不重要的 数据则随意。

3.通过反向代理

### 22.         同源策略 ###

答:

1. 同源，就是指两个页面具有相同的协议，主机（域名），端口，浏览器会对不同源的脚本或者文本的访问方式进行的限制

2. 页面中的链接，重定向以及表单提交不会受到同源策略的限制，允许跨域资源嵌入

### 23.         jq 中 ajax 请求的步骤？怎么解决跨域的？ ###

答:

$.ajax(\{

Type:”get/post”,

Url:””,

dataType:”jsonp”,  利用 jsonp 进行跨域

Data:\{\},

async: false，--默认为 true 异步  false 同步

cache: false,--默认为 true 缓存  false 不缓存                                         beforeSend:fucntion()\{\},

Success:function()\{\},

Errorr:function()\{\}

\})

### 24.         简述 ajax 的交互原理 ###

答:Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后 用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据

1、创建 XMLHttpRequest 对象

2、建立连接，设置为 GET 发送：xmlHttp.open("GET", "/ajax/getHint.jsp?q=" + txtValue, true);

3、发送数据：xmlHttp.send();

4、注册回调方法：xmlHttp.onreadystatechange = ajaxCallback;

5、执行回调： function ajaxCallback()\{     //响应就绪时     if(xmlHttp.readyState == 4 && xmlHttp.status == 200)\{         searchInput.value = xmlHttp.responseText;     \} \}

### 25.         以及同步和异步的区别 ###

答:

同步：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队 列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

### 26.         ajax 出现错误怎么调试？ ###

JQuery 使我们在开发 Ajax 应用程序的时候提高了效率，减少了许多兼容性问题，我们在 Ajax 项目 中，遇到 ajax 异步获取数据出错怎么办，我们可以通过捕捉 error 事件来获取出错的信息。 发送 error 可能有下面两张引起的，或者其他程序问题，需要我们认真仔细。

1、data:"\{\}", data 为空也一定要传"\{\}"；不然返回的是 xml 格式的。并提示 parsererror.

2、parsererror的异常和Header 类型也有关系。及编码header('Content-type: text/html; charset=utf8');

### 27.         ajax 的缺点（答出三点即可） ###

答:

1、ajax 不支持浏览器 back 按钮。

2、安全问题 AJAX 暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

### 28.         WEB 应用从服务器主动推送 Data 到客户端有那些方式？ ###

答:html5 websoket,  WebSocket 通过 Flash XHR 长时间连接    XHR Multipart Streaming     不可见的 Iframe <script>标签的长时间连接(可跨域)

### 29.         请写出至少 5 种常见的 http  状态码以及代表的意义 ###

答:5种常见的 http  状态码以及代表的意义如下：

1.200（OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。

2.303（See Other）：告知客户端使用另一个 URL  来获取资源。

3.400（Bad  Request）：请求格式错误。1)语义有误，当前请求无法被服务器 理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。

4.404（Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。

### 30.         程序中捕获异常的方法？ ###

window.error

try\{\}catch()\{\}finally\{\}

### 31.         JQuery一个对象可以同时绑定多个事件，这是如何实现的？ ###

答:jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。

### 32.         知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么? ###

答:Webkit是浏览器引擎，包括html渲染和js解析功能，手机浏览器的主流内核，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。 对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js调试工具使用，熟练使用这些工具可以快速提高解决问题的效率

### 33.         在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ ###

答:伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

### 34.         eval是做什么的？ ###

答:它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2个步骤，一次解析成js语句，一次执行）

### 35.         javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ ###

答:意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持

### 36.         Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ ###

答:HasOwnProperty

### 37.         怎么实现一个类。怎么实例化这个类 ###

答:严格来讲js中并没有类的概念，不过js中的函数可以作为构造函数来使用，通过new来实例化，其实函数本身也是一个对象。

### 38.         JavaScript中的作用域与变量声明提升？ ###

答:理解JavaScript的预解析机制，js的运行主要分两个阶段：js的预解析和运行，预解析阶段所有的变量声明和函数定义都会提前，但是变量的赋值不会提前

### 39.         如何编写高性能的Javascript？ ###

答:

1.使用 DocumentFragment 优化多次 append

2.通过模板元素 clone ，替代 createElement

3.使用一次 innerHTML 赋值代替构建 dom 元素

4.使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素

5.使用 Array 做为 StringBuffer ，代替字符串拼接的操作

6.将循环控制量保存到局部变量

7.顺序无关的遍历时，用 while 替代 for

8.将条件分支，按可能性顺序从高到低排列

9.在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if

10.使用三目运算符替代条件分支

11.需要不断执行的时候，优先考虑使用 setInterval

### 40.         jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？ ###

答:this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作

### 41.         jquery中如何将数组转化为json字符串，然后再转化回来？ ###

答$.parseJSON('\{"name":"John"\}');

### 42.         jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ ###

答:递归赋值

### 43.         jquery.extend 与 jquery.fn.extend的区别？ ###

答:Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例

### 44.         Jquery与jQuery UI有啥区别？ ###

答:jQuery是操作dom的框架，jQueryUI是基于jQuery做的一个UI组件库

### 45.         jQuery和Zepto的区别？各自的使用场景？ ###

答:jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端

### 46.         针对 jQuery 的优化方法？ ###

答:

1.优先使用ID选择器

2.在class前使用tag(标签名)

3.给选择器一个上下文

4.慎用 .live()方法（应该说尽量不要使用）

5.使用data()方法存储临时变量

### 47.         let const 的区别 ###

答: let const 块级作用域 没有变量提升 const 不能修改

### 48.         箭头函数 ###

答: (形参) => \{函数体\} 箭头函数特点 没有this指向

### 49.         使用展开运算符 合并数组和对象 ###

答:

var arr1 = \[11, 22, 33\]

var arr2 = \[44, 55, 66, ...arr1\] // \[44, 55, 66, 11, 22, 33\]

var obj = \{name: '宋公明'\}

var obj1 = \{age: 18\}

var obj2 = \{

desc: '及时雨',

...obj,

...obj1

console.log(obj2)

### 50.          解构赋值 ###

答:

对象解构赋值

var myobj = \{name1: \{a: 10\},age: 18\}

var name1 = myobj.name1

var \{name1: ss, age\} = myobj // 解构过程中通过: 可以修改解构的名字

console.log(ss, age)

数组解构赋值

var myarr = \[11, 22, 33\]

var \[a, b, c, d\] = myarr

var a,b,c,d;

console.log(a, b, c, d) // 11 22 33 undefined \*/

Set数据解构

var arr = \[36, 99, 66, 99, 44, 99, 21, 36\]

var result = new Set(arr)

console.log(\[...result\])

console.log(Array.from(result)) // Array.from将类数组转为真正的数组 \*/

### 51.         字符串操作的方法 ###

答:

var str = \`一点寒芒先到，随后枪出如龙\`

1.获取字符串第一个字符

console.log(str\[0\])

2.判断字符串是否以 某个字符 开始或结束

console.log(str.startsWith('点')) // str是否以 点  是就返回 true 否就返回false

console.log(str.endsWith('龙')) // str是否以 点  是就返回 true 否就返回false

3.往字符串填充 padStart(填充完之后多少个字符, 要填充的字符)

console.log(str.padStart(20, 'abcd'))

console.log(str.padEnd(20, 'abcd'))

console.log(str)

str.includes('a') // str中是否包含a字符

4.包含

console.log(str.includes('芒'))

### 52.         Promise 使用Promise封装一个ajax ###

答:

function myAjax () \{

return new Promise((resolve, reject) => \{

// 这里开始封装ajax

//     \})

// \}

// myAjax().then(成功回调).catch(失败回调)

// 10.async await

// 10.1 以前的

/\* function myTest () \{

console.log(666666)

return '我是一块小小鸟'

console.log(myTest()) // 1. 执行函数体代码 2. 获取返回值 \*/

/\*  async function myTest () \{

console.log(666666)

return '我是一块小小鸟' // return 相当于resolve(return的值)

// console.log(myTest()) // romise \{<resolved>: "我是一块小小鸟"\}

myTest().then(result => \{

console.log(result, 1111)

\}) \*/

### 53.          JS如何检测基本数据类型和复杂数据类型 ###

解答:

1.   typeof  检测基本数据类型

2.   Array.isArray(); 浏览器兼容性：IE9

3.   变量 instanceof  object  检测复杂数据类型

### 54.         例举3种强制类型转换和2种隐式类型转换? ###

解答:

强制类型转换：自己通过函数来进行数据类型转换  
举例：（parseInt,parseFloat,Number()）

隐式类型转换：JS引擎自动帮我们转换的  
举例：==、 console.log()、 alert() 、if() 、+-\*/

### 55.          split() join() 的区别 ###

解答:

split()将字符串按照指定的字符分割成一个数组，并返回join()将数组用指定的字符连接成一个字符串，并返回

### 56.         数组方法pop() push() unshift() shift() ###

解答：**栈方法：push()尾部添加，返回 数组长度pop()尾部删除，返回 被删除的元素**

队列方法：unshift()头部添加 ，返回 数组长度shift()头部删除，返回被删除的元素

### 57.         事件绑定和普通事件有什么区别？ ###

解答:

普通事件:

1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

事件绑定:

1、如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发2、支持DOM事件流的3、进行事件绑定传参不需要on前端

### 58.         IE和DOM事件流的区别? ###

解答:

比较attachEvent和addEventListener：

1、attachEvent只支持事件冒泡 addEventListener既支持事件冒泡，也支持事件捕获

2、参数：attachEvent事件类型需要on前缀 addEventListener事件类型不需要on前缀

3、如果使用attachEvent对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发

如果使用addEventListener对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序进行触发

### 59.         7.call和apply，bind的区别 ###

解答：call和apply的用法

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

不同点：函数参数的传递形式call将函数参数依次传入apply将函数参数用一个数组的形式传入

Bind函数参数传入不同

### 60.         JavaScript this、闭包、作用域? ###

解答:

this：指向调用上下文

作用域：定义一个函数就开辟了一个局部作用域，整个js执行环境有一个全局作用域

闭包：一个函数可以访问其他函数中的变量（闭包是一个受保护的变量空间）

### 61.         事件委托的原理是什么 ###

解答：利用事件冒泡的原理，将事件绑定在父容器中，让父容器代为触发

### 62.         添加 删除 替换 插入到某个节点的方法 ###

解答:

obj.appendChild()  //添加obj.insertBefore(newElement, referenceElement )  /插入

obj.replaceChild(newChild, oldChild)//替换

obj.removeChild(child)//删除

### 63.         javascript的本地对象，内置对象和宿主对象 ###

解答:

本地对象为Array RegExp（正则表达式）等可以new实例化  
内置对象为global Math 等不可以实例化的  
宿主对象为浏览器自带的document,window 等

**13、****javascript****的同源策略**

解答:

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

http,ftp:协议

关键词解释：

主机名：localhost、www.baidu.com

协议：http https ftp

端口：一个网站对应着一个端口， http协议的默认端口：80

https协议的默认端口是8083

同源策略带来的麻烦：ajax在不同域名下的请求无法实现，

如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

### 64.         数组去重的方法有那几种? ###

解答:

1.   set数据类型，实例化进行去重

2.   For循环结合indexOf进行去重

3.   利用数组原型上面的 filter 和 includes或者 forEach 和 includes方法可以进行数组去重

function unique7(arr) \{

var newArr = \[\]

array.forEach(item => \{

return newArr.includes(item) ? '' : newArr.push(item)

\});

return newArr

console.log(unique7(\[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4\]));

function unique6(arr) \{

var newArr = \[\]

newArr = arr.filter(function (item) \{

return newArr.includes(item) ? '' : newArr.push(item)

\})

return newArr

console.log(unique6(\[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4\]));

### 65.         JavaScript是一门什么样的语言，它有哪些特点？ ###

解答：

弱类型、脚本语言、面向对象、

没有标准答案。

运行环境：JS引擎（v8(Chrome)/SpiderMonkey(FireFox)/JavaScriptCore(Safari)

/Chakra(IE)）

语言特性：

1、面向对象：原型继承、构造函数、原型链

2、动态语言：弱类型语言

//动态语言的特性 var num=10;//num是一个数字类型 num="jim";//此时num又变成一个字符串类型

//我们把一个变量用来保存不同数据类型的语言称之为一个动态语言 //静态语言：c\# java c c++ OC //int a; //静态语言在声明一个变量就已经确定了这个变量的数据类型， // 而且在任何时候都不可以改变他的数据类型

### 66.         JavaScript的数据类型都有什么？ ###

基本数据类型：number、string、boolean、undefined、null复杂数据类型：Object(Array,Date,RegExp,Function)

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

解答:

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

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

2. 闭包

3. 控制台日志

### 68.         for in和for of的区别 ###

解答:

1.推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of  
2.for...in循环出的是key，for...of循环出的是value  
3.注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足4.for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

### 69.         什么是函数柯里化？ ###

解答:

是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

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

解答:

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

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

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

### 72.         请说出三种减低页面加载时间的方法? ###

解答:

1、压缩css、js文件2、合并js、css文件，减少http请求3、外部js、css文件放在最底下4、减少dom操作，尽可能用变量替代不必要的dom操作

### 73.         什么是FOUC？你如何来避免FOUC？ ###

解答:

由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏  
用link加载css文件，放在head标签里面

### 74.         http协议属于七层协议中的哪一层，下一层是什么 ###

解答:

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层tcp属于传输层；http属于应用层。表现层

### 75.         websocket长连接原理是什么? ###

解答：

Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。

### 76.         UDP和TCP协议的概念？ ###

解答:

TCP是事先为所发送的数据开辟出连接好的通道，然后再进行数据发送；而UDP则不为IP提供可靠性、流控或差错恢复功能。一般来说，TCP对应的是可靠性要求高的应用，而UDP对应的则是可靠性要求低、传输经济的应用。

### 77.         全双工通讯协议的概念？ ###

解答:

全双工是通讯传输的一个术语。通信允许数据在两个方向上同时传输，他在能力上相当于两个单工通信方式的结合。全双工指可以同时进行信号的双向传输。

全双工是：例如我们使用的手机就是全双工，在同一时刻两个用户可以同时给对方传送数据

半双工：例如我们使用的对讲机，当A方按住通话按钮才可以向B方传送数据，B方也是，在同一时刻只有一个用户能够传送数据（A/用户都可以传递信息，但是不能够同时传递）

单工：例如我们看电视时，我们只能接收对方发送的信息，不能够给对方传递信息；

### 78.         WebSocket和Socket的区别是什么？ ###

解答:

Socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而WebSocket则不同，它是一个完整的应用层协议，包含一套标准的API。

### 79.         说一下什么是Http协议？ ###

解答:对器客户端和 服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”。

### 80.         什么是Http协议无状态协议？怎么解决Http协议无状态协议？ ###

解答:

无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息

无状态协议解决办法： 通过1、Cookie 2、通过Session会话保存。

### 81.         Http协议有什么组成？ ###

解答:

请求报文包含三部分：

请求行：包含请求方法、URI、HTTP版本信息

请求首部字段

请求内容实体

响应报文包含三部分：

状态行：包含HTTP版本、状态码、状态码的原因短语

响应首部字段

响应内容实体

### 82.         Http与Https优缺点？ ###

解答:

通信使用明文不加密，内容可能被窃听，也就是被抓包分析。

不验证通信方身份，可能遭到伪装

无法验证报文完整性，可能被篡改

HTTPS就是HTTP加上加密处理（一般是SSL安全通信线路）+认证+完整性保护

### 83.         Http优化和http协议有哪些区别？ ###

解答:

利用负载均衡优化和加速HTTP应用

利用HTTP Cache来优化网站

1、支持客户/服务器模式；2、简单快速；3、灵活；4、无连接；5、无状态。

### 84.         var、let、const之间的区别? ###

解答:

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

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

解答:

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

### 86.         介绍下 Set、Map的区别？ ###

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

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

解答:

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

### 88.         如何把es6,es7高级语法进行转换? ###

解答:

使用babel转换器，或者webpack，gulp进行转换

### 89.         什么是AMD、CMD区别？ ###

解答:

CMD 推崇依赖就近; AMD 推崇依赖前置CMD 是延迟执行; AMD 是提前执行CMD性能好,因为只有用户需要的时候才执行; AMD用户体验好,因为没有延迟,依赖模块提前执行了

### 90.         请说出es6中常用的数组方法? ###

解答:

forEach()  循环整个数组相当于for循环，带索引和值

concat()  //合并多个数组，返回合并后的新数组，原数组没有变化。

filter()  //返回一个新数组，包含通过callback函数测试的所有元素。

map()  //返回新数组

every()和some()  //every()和some()方法是数组的逻辑判定

...扩展运算符

findIndex()返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

include()方法

判断数组是否包含给定的值，有返回true，没有返回false，第二个参数表示搜索的起始位置

### 91.         es6中常用的对象的方法? ###

解答:

1.Object.is() 为解决一些异常的比较问题js中新增了Object的is方法

Object.is(NaN, NaN); //true

Object.is(5, "5"); //false

2.Object.assign() 解决了两个对象间浅拷贝的问题：（深拷贝）

const target = \{ a: 1 \};

const source1 = \{ b: 2 \};

const source2 = \{ c: 3 \};

Object.assign(target, source1, source2);

3.Object.values(obj) 获取obj的value名称并储存为一个数组，返回此数组

4.Object.keys(obj) 获取obj的key名称并储存为一个数组，返回此数组

### 92.         箭头函数和普通函数的区别? ###

解答：

相比普通函数更简洁的语法

没有this

不能使用new

不绑定arguments，用rest参数...解决

使用call()和apply()调用

捕获其所在上下文的 this 值，作为自己的 this 值

箭头函数没有原型属性

不能简单返回对象字面量

箭头函数不能当做Generator函数,不能使用yield关键字

箭头函数不能换行

### 93.         Class和普通构造函数的区别？ ###

解答:

1. Class 在语法上更加贴合面向对象的写法

2. Class在实现继承上更加易读、易理解

3. 更易于写java等后端语言

4.本质还是语法糖，使用prototype

### 94.         什么是原型链？ ###

解答:

Javascript是面向对象的，每个实例对象都有一个\_\_proto\_属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性prototype，与实例的\_\_proto\_\_属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据\_\_proto\_\_ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype.\_proto\_为nul，这样也就形成了原型链。

### 95.         如何查找构造函数和原型中的属性？ ###

解答:

构造函数.prototype  查看构造函数的原型属性

实例对象.\_\_proto\_\_ 查看实例对象的构造函数的原型

实例对象.\_\_proto\_\_.constructor 查看实例对象的构造函数

### 96.         什么是闭包? ###

解答:

高级程序设计三中:闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)

闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉

### 97.         请说说你了解哪些算法? ###

解答:

1.   递归算法，斐波那契数列

2.   数组去重

3.   冒泡排序

4.   贪心算法

5.   Diff算法

6.   排序算法

7.二叉树和二叉查找树

### 98.         谈一谈你所理解的继承？ ###

解答:

借用构造函数继承

function Parent0()\{

this.name = "parent0";

this.colors = \["red","blue","yellow"\];\}function Child0()\{

Parent0.call( this ); // 或apply

this.type = "child0";\}

new Child0().name; // Parent0

new Child0().name; // Parent0new Child0().colors; // (3) \["red", "blue", "yellow"\]

原型链式继承（借用原型链实现继承）

function Parent1()\{

this.name = "parent1";

this.colors = \["red","blue","yellow"\];

function Child1()\{

this.name = "child1";

Child1.prototype = new Parent1();

Parent1.prototype.sex = "男";

Parent1.prototype.say = function() \{

console.log(" Oh,My God! ");

new Child1().sex; //  男

new Child1().say(); // Oh,My God!

var s1 = new Child1();

s1.colors.push("black");

var s2 = new Child1();

s1.colors; // (4) \["red", "blue", "yellow", "balck"\]

s2.colors; // (4) \["red", "blue", "yellow", "balck"\]

ES6中classs继承

class Parent \{

class Child1 extends Parent \{

constructor(x, y, colors) \{

super(x, y); // 调用父类的constructor(x, y)

this.colors = colors;

toString() \{

return this.colors + ' ' + super.toString(); // 调用父类的toString()

constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。如果子类没有定义constructor方法，这个方法会被默认添加，不管有没有显式定义，任何一个子类都有constructor方法。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this

## 第三部分：框架组件(VUE 微信小程序 React) ##

### 1.    Vue 的双向数据绑定原理是什么？ ###

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

具体步骤：

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的 话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

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

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

1、在自身实例化时往属 性订阅器(dep)里面添加自己

2、自身必须有一个 update()方法

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

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

### 2.    请详细说下你对 vue 生命周期的理解？ ###

答:总共有11个,我们常用的分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后。

1、在 beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化。

2、在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。

3、载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。

4、在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

5、更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。

6、销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除 了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

### 3.    怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？ ###

答:在 router 目录下的 index.js 文件中，对 path 属性加上/:id。  使用 router 对象的 params.id

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

答:

1、全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

2、组件内的钩子；

3、单独路由独享组件

### 5.    mint-ui 是什么？怎么使用？说出至少三个组件使用方法？ ###

答:基于 vue 的前端组件库。npm 安装，然后 import 样式和 js， vue.use（mintUi）全局引入。 在单个组件局部引入：import \{Toast\} from ‘mint-ui’。

组件一：Toast(‘登录成功’)；

组件二：mint-header；

组件三：mint-swiper

### 6.    请说下封装 vue 组件的过程？ ###

答:首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目 开发：效率低、难维护、复用性等问题。 然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件。子组件需要数据，可 以在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法

### 7.    vue-loader 是什么？使用它的用途有哪些？ ###

答:解析.vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。 用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

### 8.    vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？ ###

答:

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

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

第三步：注入到 vue 的子组件的 components 属性上面,components:\{smithButton\}

第四步：在 template 视图 view 中使用，<smith-button>  </smith-button> 问题有：smithButton 命名，使用的时候则 smith-button。

### 9.    说下你对 mvvm的理解？双向绑定的理解？ ###

答:mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现 双向绑定 双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

### 10.         请说下具体使用 vue 的理解？ ###

答:

1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过 Object.defineProperty() 定义的数据 set、get 函数原理实现。

2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工 具包就可以开工。项目经理坐等收楼就好。

3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。

4、js 的代码无形的规范，团队合作开发代码可阅读性更高。

### 11.         你是怎么认识 vuex 的？ ###

答:

1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。

2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。

3、应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑 应该封装在 action 中。

### 12.         vuex 有哪几种属性？ ###

答:有五种，分别是 State、 Getter、Mutation 、Action、 Module

### 13.         vuex 的 State 特性是？ ###

答:

1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象 里面的 data。

2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变，依 赖这个数据的组件也会发生更新。

3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

### 14.         vuex 的 Getter 特性是？ ###

答:

1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性

2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用

3、 如果一个状态只在一个组件内使用，是可以不用 getters

### 15.         vuex 的 Mutation 特性是？ ###

答:

1、Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作

### 16.         <keep-alive>的作用是什么？ ###

答:<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

### 17.         vue 中 ref 的作用是什么？ ###

答:ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普 通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册

### 18.         vue 中组件直接的通信是如何实现的？ ###

答:组件关系可分为父子组件通信、兄弟组件通信。

1、父组件向子组件： 通过 props 属性来实现

2、子组件向父组件： 子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。 父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。

3、兄弟之间的通信： 通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

### 19.         你对 Webpack 的认识？ ###

答: webpack 是收把项目当作一个整体，通过一个给定的的主文件，webpack 将从这个文件开始找到你 的项目的所有依赖文件，使用 loaders 处理它们，最后打包成一个或多个浏览器可识别的 js 文件

### 20.         webpack 中的 entry 是做什么的？ ###

答:entry: 用来写入口文件，它将是整个依赖关系的根。当我们需要多个入口文件的时候，可以把 entry 写成一个对象。

var baseConfig = \{

entry: \{

main: './src/index.js'

### 21.         webpack 中的 output 是做什么的？ ###

答:output: 即使入口文件有多个，但是只有一个输出配置，如果你定义的入口文件有多个，那么我们 需要使用占位符来确保输出文件的唯一性。

var baseConfig = \{

entry: \{

main: './src/index.js'

\},

output: \{

filename: '\[name\].js',

path: path.resolve('./build')

\} module.exports = baseConfig

### 22.         webpack 中的 Loader 的作用是什么？ ###

答:

1、实现对不同格式的文件的处理，比如说将 scss 转换为 css，或者 typescript 转化为 js

2、转换这些文件，从而使其能够被添加到依赖图中 这里介绍几个常用的 loader： babel-loader： 让下一代的 js 文件转换成现代浏览器能够支持的 JS 文件。 babel 有些复杂，所以大多数都会新建一个.babelrc 进行配置 css-loader,style-loader:两个建议配合使用，用来解析 css 文件，能够解释@import,url()如果需要解析 less 就 在后面加一个 less-loader file-loader: 生成的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名 url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时，可以返回一个 DataURL 事实上，在使用 less,scss,stylus 这些的时候，npm 会提示你差什么插件，差什么，你就安上就行了

### 23.         webpack 中的 Plugins 的作用是什么？ ###

答:loaders 负责的是处理源文件的如 css、jsx，一次处理一个文件。而 plugins 并不是直接操作单个文件，它直 接对整个构建过程起作用

1、ExtractTextWebpackPlugin: 它会将入口中引用 css 文件，都打包都独立的 css 文件中，而不是内嵌在 js 打包文件中。

2、HtmlWebpackPlugin:依据一个简单的 index.html 模版，生成一个自动引用你打包后的 js 文件的新 index.html。

3、HotModuleReplacementPlugin: 它允许你在修改组件代码时，自动刷新实时预览修改后的结果注意永远 不要在生产环境中使用 HMR。

### 24.         webpack 中什么是 bundle,什么是 chunk,什么是 module? ###

答:

1、bundle 是由 webpack 打包出来的文件，

2、chunk 是指 webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。

3、module 是开发中的单个模块。

4、chunk 打包后变成 bundle.

### 25.         webpack-dev-server 和 http 服务器如 nginx 有什么区别？ ###

答:webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件，并且可以使用模块热更新，他比传统 的 http 服务对开发更加有效。

### 26.         什么是模块热更新？ ###

答:模块热更新，是 webpack 的一个功能，他可以使得代码通过修改过后，不用刷新浏览器就可以更新。是高级 版的自动刷新浏览器。

### 27.         什么是长缓存？在 webpack 中如何做到长缓存优化？ ###

答:浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升 级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。在 webpack 中， 可以在 output 给出输出的文件制定 chunkhash,并且分离经常更新的代码和框架代码，通过 NamedModulesPlugin 或者 HashedModulesIdsPlugin 使再次打包文件名不变。

### 28.         vue项目中代理配置 ###

答:

1.vue-cli中proxyTable配置接口地址代理示例,修改 config/index.js

2.Webpack-dev-server的proxy用法,webpack.config.js中配置请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

### 29.         vue中的状态管理 ###

答:用户在component中通过操作dispatch触发了一个action，action就会commit一个mutation函数，从而mutate一个新的state，vuex就会将新的state渲染（render）到component中，从而让界面更新。

### 30.         vue有哪些优点 ###

答:vue 综合了angualr和react的优点，是国人写的框架，易上手，轻量级，受到广泛的应用。

### 31.         vue中路由之间跳转 ###

答:router-link 【实现跳转最简单的方法】

### 32.         vue中组件是怎么使用的 ###

答:组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动

### 33.         vue如何实现按需加载配合webpack设置 ###

答:webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

不进行页面按需加载引入方式：import  home   from '../../common/home.vue'

进行页面按需加载的引入方式：const  home = r => require.ensure( \[\], () => r (require('../../common/home.vue')))

### 34.         axios是什么？怎么使用？描述使用它实现登录功能的流程？ ###

答:在浏览器中发送 XMLHttpRequests 请求

使用:

1.在 node.js 中发送 http请求

2.支持 Promise API

3.拦截请求和响应

4.转换请求和响应数据

5.自动转换 JSON 数据

6.客户端支持保护安全免受 XSRF 攻击

### 35.         mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？ ###

答:一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作

场景：数据操作比较多的场景，更加便捷

### 36.         vue与angular的区别? ###

答:

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是任何时候都必须遵循

Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。

例如，Vue.js 核心默认不包含路由和 Ajax 功能，并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。

Angular 使用双向绑定，Vue 也支持双向绑定，不过默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。

Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。

Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

### 37.         v-model是什么？怎么使用？ ###

答:v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

1.接收一个value prop

2.触发input事件，并传入新值

### 38.         vue-router实现原理 ###

答:前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:

1.在地址中加入\#以欺骗浏览器，地址的改变是由于正在进行页内导航

2.使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。

### 39.         怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ ###

答:在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id

### 40.         vue能不能跟后台做交互 ###

答:能，可以用resource  和 axios

### 41.         vue中父组件与子组件之间的怎么传值 ###

答:父组件传递数据给子组件(可以通过props属性来实现)：

由于组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项；

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的 HTML 特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件：

### 42.         vue里如何给元素绑定事件？ ###

答:用到v-on指令来绑定事件了。冒号后面的click所代表的便是点击事件了噢。

### 43.         vue跟react的区别 ###

答:

1.React与Vue存在很多相似之处，专注于创造前端的富应用。

2.React与Vue只有骨架，其他的功能如路由、状态管理等是框架分离的组件。

3.Virtual DOM,Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。Vue在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。React每当应用的状态被改变时，全部子组件都会重新渲染。这可以通过shouldComponentUpdate这个生命周期方法来进行控制。

### 44.         如何在vue里添加音频？ ###

答:

1.将音频文件放置在static目录中，然后进行调用，如下所示

以上这种方式就能够解决这个问题了。

2.给项目配置mp3格式的解析器

在webpack.base.conf.js中添加加载器，如下

test: /\\.(mp3)(\\?.\*)?$/,

loader: 'url-loader',

options: \{

name: utils.assetsPath('assets/\[name\].\[hash:7\].\[ext\]')

### 45.         Webpack的自动化设置 ###

答:

第一步，新建 一个文件夹，这里我叫webpackstudy，然后使用命令行进入。

第二步，安装，如果你想其他的文件也可以使用，推荐安装全局的，否则的话就安装一个局部的。

全局安装：npm install -g webpack

安装到项目目录：npm install --save-dev webpack

### 46.         你使用过哪些方法，来提高微信小程序的应用速度？ ###

答:

1.用户行为预测,而在某些场景下，用户的行为可以预测，我们可以在用户还没点击的时候就预加载下个页面的数据。让下个页面秒开，进一步提升体验的流畅性

2.减少默认data的大小页面打开一个新页面时微信会深拷贝一个page对象，因此，应该尽量减少默认data的大小，以及减少对象内的自定义属性。

以一个100个属性的data对象为测试用例，在iphone6上，页面的创建时间会因此增加150ms。

3.提高页面加载速度从页面响应用户点击行为，开始跳转，到新页面onload事件触发，存在一个延迟，这个延迟大概在100-300ms之间（安卓响应比ios慢些）。这个延迟说短不短，我们可以利用这段时间，预先发起新页面所需要的网络请求。这样一来，就节省了100-300ms（或者一个网络请求的时间）。

知道有这个gap后，代码如何实现呢？说白了，就是实现一个在A页面预加载B页面数据的功能。但而这种跨页面的调用，很容易把逻辑搞复杂，将不同页面的逻辑耦合在一起。所以，我们希望将预加载的逻辑隐藏于无形中，不增加任何的页面间耦合，以及开发复杂度。

### 47.         小程序与H5的区别 ###

答:

1.开发工具不同。

2.区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。

3.开发语言不同。这点是非常重要的，直接否定客户所说的复制粘贴。

4.小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。

5.组件封装不同。

6.小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。

### 48.         小程序是怎么封装数据请求的 ###

答:

封装HTTP类

对于HTTP请求的封装，有很多种方法，比如：axios 采用的是通过IIFE作为工厂函数处理并返回一个Axios的实例。在这里，我推荐使用类，因为类的封装形式，正是axios 的封装形式的加强版。

为了一致性，我也采用request作为请求的方法名，并且接受相同的对象作为参数。

在小程序官方文档中，当不传入method属性时，默认采用GET方法，所以我们需要将method的默认值设为GET

### 49.         怎么样提高小程序的应用速度？ ###

答:提高页面加载速度

在小程序这个环境下，怎样提高页面加载速度呢? 这个问题很大，我把问题具体一下，如何缩短从用户点击某个链接，到打开新页面的这段时间? 这里抛一个核心关键点：

从页面响应用户点击行为，开始跳转，到新页面onload事件触发，存在一个延迟，这个延迟大概在100-300ms之间(安卓响应比ios慢些)。

这个延迟说短不短，我们可以利用这段时间，预先发起新页面所需要的网络请求。这样一来，就节省了100-300ms(或者一个网络请求的时间)。

知道有这个gap后，代码如何实现呢?

说白了，就是实现一个在A页面预加载B页面数据的功能。但而这种跨页面的调用，很容易把逻辑搞复杂，将不同页面的逻辑耦合在一起。所以，我们希望将预加载的逻辑隐藏于无形中，不增加任何的页面间耦合，以及开发复杂度。

### 50.         小程序里的微信支付怎么实现？ ###

答:

1.开通了微信支付，并且小程序绑定了微信支付；

2.准备好小程序的appid，微信支付的商户号，支付秘钥。

商户系统和微信支付系统主要交互：

1.小程序内调用登录接口，获取到用户的openid

2.调用商户服务器支付统一下单接口，进行预支付

### 51.         小程序可以使用第三方组件吗？ ###

答:

第一步：

登录小程序后台管理>设置>第三方服务>添加插件

找到你需要的插件后添加

这时候点击插件的详情，我们可以看到AppID

拷贝AppID,我们等等会用到它

第二步：

微信小程序开发工具打开你的项目的app.json

加上以下代码：

"plugins": \{

"WechatSI": \{

"version": "0.0.7",

"provider": "wx069ba97219f66d99"

### 52.         简要介绍下小程序里事件的使用方式 ###

答:

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

事件分类

touchstart 手指触摸

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断，如弹窗和来电提醒

touchend 手指触摸动作结束

tap 手指触摸后离开

longtap 手指触摸后后，超过350ms离开

### 53.         如何跳出微信小程序五层页面跳转限制？ ###

答:

1.调用两次wx.navigateTo('页面B')，那么栈里存在两个页面B（或者说两个页面B的实例）。但其实栈里没有必要保留两个页面B实例

2.wx.navigateBack的参数delta可以返回栈里的指定页面，其中页面信息可以由getCurrentPages()接口得到据此，提出如下一种解决方案

1.自定义页面跳转方式

2.当页面栈里已经存在要跳转的目标页面A，那么使用wx.navigateBack(\{delta: xx\})返回到此页面A，\{xx=getCurrentPages().length - 目标页面A在栈里的index - 1\}

3.如果页面栈还没有要跳转的目标页面A

A）若页面栈已经已满（length>=5），那么使用wx.redirectTo(页面A);

B）否则，使用wx.navigateTo(页面A)

4.页面间数据采用缓存传递

### 54.         react生命周期函数 ###

答:

1.getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.

2.getInitialState()

在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props

3.componentWillMount()

组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4.render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5.componentDidMount()

组件渲染之后调用，只调用一次。

6.componentWillReceiveProps(nextProps)组件初始化时不调用，组件接受新的props时调用。

7.shouldComponentUpdate(nextProps, nextState)react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

8.componentWillUpdata(nextProps, nextState)组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

9.render()组件渲染

10.componentDidUpdate()组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

11.componentWillUnmount()组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

### 55.         redux有什么缺点 ###

答:默认只支持同步处理，连作者创造的redux-thunk都是独立于redux之外的一个包，当然，这样是让使用者自行选择异步处理方法，但是选择太多，又没有各项都见长的解法，所以使用者也抱怨很多；啰嗦（verbose），为了一个功能又要写reducer又要写action，还要写一个文件定义actionType，显得很麻烦

### 56.         react性能优化是哪个周期函数？ ###

答:shouldComponentUpdate   这是一个需要返回布尔值的生命周期，可以理解为疑问句 "组件本身需要被重新渲染吗?"

### 57.         React 当中 Element 和 Component 有何区别 ###

答:

ReactElement是描述屏幕上所见的内容的数据结构,是对于UI的对象的表述.典型的

ReactElement就是利用JSX构建的声明式代码片段,然后被转化为createElement的调用组合。

ReactComponent则是可以接收参数输入并且返回某个ReactElement的函数或者类。

### 58.         为什么虚拟dom会提高性能？ ###

答:虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提髙性能。

### 59.         React 中的keys是什么，为什么它们很重要？ ###

答:每个keys 在兄弟元素之间是独一无二的。我们已经谈过几次关于和解（reconciliation）的过程，而且这个和解过程（reconciliation）中的一部分正在执行一个新的元素树与最前一个的差异。keys 使处理列表时更加高效，因为 React 可以使用子元素上的 keys 快速知道元素是新的还是在比较树时才被移动。

而且 keys 不仅使这个过程更有效率，而且没有keys，React 不知道哪个本地状态对应于移动中的哪个项目。所以当你 map 的时候，不要忽略了 keys 。

### 60.         React中有哪些构建组件的方式？有什么区别？ ###

答:

1.函数式定义的无状态组件

2.es5方式的React.createClass定义的组件

3.es6形式的extends React.Component定义的组件

区别:

一、函数定义的无状态组件

1. 组件不会被实例化，整体渲染性能得到提升

2. 组件不能访问this对象

3. 组件无法访问生命周期的方法

4. 无状态组件只能访问输入的props，同样的props会得到同样的结果，不会有副作用

5. 无状态组件使得代码结构更加清晰，减少代码冗余，在开发过程中，尽量使用无状态组件

function WelcomeDialog(props) \{

console.log(this)

const \{ number \} = props

return <div>Welcome组件--\{number\}</div>

二、es5原生方式React.createClass定义的组件

1. React.createClass会自绑定函数方法导致不必要的性能开销

2. React.createClass的mixins不够自然、直观

3. React 版本16以后，React.createClass(\{\})创建组件的方式失效。

ar HelloMessage = React.createClass(\{

render() \{

return <div>HelloMessage组件</div>

\})

三、es6形式的extends React.Component定义的组件

1. React.Component是以ES6的形式来创建react的组件的

2. 是React目前极为推荐的创建有状态组件的方式

3. 最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。

class Contacts extends React.Component \{

constructor(props) \{

super(props)

this.state = \{\}

render() \{

return <div>Contacts组件</div>

### 61.         在React当中Element和Component有何区别 ###

答:

区别

Element

描述屏幕上所见内容的数据结构，是对UI的对象表述

利用JSX构建的声明式代码片段然后转化为createElement的调用组合

Component

可以接收参数输入并且返回某个React Element的函数或者类

共同点

他们俩之间的关联是最终都可以成为用户所看到的代码片段;

### 62.         框架和库的区别? ###

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。框架则是为解决一个(一类)问题而开发的产品。

如：node 中的 express，vue,react等等

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。库是将代码集合成的一个产品，供程序员调用。

如：从Jquery 切换到 Zepto；

### 63.         body中的onload()函数和jQuery中的document.ready()有什么区别? ###

解答:

1)、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2)、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。

### 64.         jquery中attr和prop的区别? ###

解答:

dom元素上我们自己定义的属性一般用attr进行获取

dom元素上元素自带的属性我们一般用prop进行获取

### 65.         $(this) 和 this 关键字在 jQuery 中有何不同？ ###

解答:

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法

this指向当前的元素

### 66.         jquery中如何进行操作dom，实现增删改查? ###

解答:

// 内部插入

// 1.向id为ul1的ul内部追加添加一个span(最后)

$('\#ul1').append('<span>span</spand>');

// 2.向id为ul1的ul内部前置添加一个span(最前)

$('\#ul1').prepend('<span>span</span>');

// 外部插入

// 3.向id为li1的li的前面添加span

$('\#li1').before('<span>span</span>');

// 4.向id为li1的li的后面添加span

$('\#li1').after('<span>span</span>');

// 替换

// 5.将li元素全部替换为p

$('li').replaceWith("<p>p</p>");

// 删除

// 6.移除id为ul1的ul下的所有li

$('\#ul1').empty();

$('\#ul1>li').remove();

### 67.          active-class是哪个组件的属性？嵌套路由怎么定义？   答：vue-router模块的router-link组件。     ###

### 68.      怎么定义vue-router的动态路由？怎么获取传过来的动态参数？   答：在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id  ###

9、vue-router有哪几种导航钩子？      
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

10、scss是什么？安装使用的步骤是？有哪几大特性？  
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

### 69.         什么是RESTful API？怎么使用? ###

答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

### 70.         vuex是什么？怎么使用？哪种功能场景使用它？ ###

答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

### 71.         mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？ ###

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

### 72.         说出至少4种vue当中的指令和它的用法？ ###

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

### 73.         vue-router是什么？它有哪些组件？ ###

答：vue用来写路由一个插件。router-link、router-view

### 74.         导航钩子有哪些？它们有哪些参数？ ###

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

### 75.         Vue的双向数据绑定原理是什么？ ###

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

### 76.         vue-loader是什么？使用它的用途有哪些？ ###

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

### 77.         Vue组件间的参数传递 ###

解答:

1.   **父组件与子组件传值**  
父组件传给子组件：子组件通过props方法接受数据;子组件传给父组件：$emit方法传递参数**2.****非父子组件间的数据传递，兄弟组件传值**eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。

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

解答:

**hash****模式：**在浏览器中符号“\#”，\#以及\#后面的字符称之为hash，用window.location.hash读取；  
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 [http://www.xxx.com][http_www.xxx.com]，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

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

### 79.         v-for中 key 值的作用？ ###

解答:

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

17.  怎么定义 vue-router 的动态路由? 怎么获取传过来的值  
答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

### 80.         $route和$router的区别? ###

解答：

`$route`是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而`$router`是“路由实例”对象包括了路由的跳转方法，钩子函数等。

### 81.         计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景？ ###

解答:

methods VS 计算属性

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。

然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比而言，只要发生重新渲染，method 调用总会执行该函数。总之，重新计算开销很大的话请选计算属性，不希望有缓存的请选methods。

watch VS 计算属性

当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。

侦听属性是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。  
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

### 82.         谈一谈你对vue生命周期函数的理解? ###

解答:

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

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

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。以下周期在服务端渲染期间都不被调用。

mounted

el 被新创建的 vm.el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

beforeUpdate

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

updated

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

activated

keep-alive 组件激活时调用。

deactivated

keep-alive 组件停用时调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

### 83.         你知道style加scope属性的原理和作用吗? ###

解答:

用途：防止全局同名CSS污染  
原理：在标签加上v-data-something属性，再在选择器时加上对应\[v-data-something\]，即CSS带属性选择器，以此完成类似作用域的选择方式。

### 84.         vue路由钩子函数有多少个你是如何进行区分的? ###

解答:

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

单个的路由钩子函数：beforeEnter

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

### 85.         Vue实现数据双向绑定的原理是什么? ###

解答:

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

### 86.         vue.js的两个核心是什么？ ###

解答:

数据驱动、组件系统

### 87.         谈一谈对vue组件化的理解? ###

解答:

组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型项目；

组件化开发能大幅提高应用开发效率、测试性、复用性等；

组件使用按分类有：页面组件、业务组件、通用组件；

vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent,扩展于Vue;

vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；

合理的划分组件，有助于提升应用性能；

组件应该是高内聚(单独存在的组件)、低耦合(复用性比较高)的；

遵循单向数据流的原则。

### 88.         axios的特点有哪些？ ###

解答:

一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API二、它可以拦截请求和响应  
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据  
四、安全性更高，客户端支持防御 XSRF

18.  axios有哪些常用方法？  
答：  
一、axios.get(url\[, config\])   //get请求用于列表和信息查询  
二、axios.delete(url\[, config\])  //删除  
三、axios.post(url\[, data\[, config\]\])  //post请求用于信息的添加  
四、axios.put(url\[, data\[, config\]\])  //更新操作

### 89.          说下你了解的axios相关配置属性？ ###

解答:

\`url\`是用于请求的服务器URL

\`method\`是创建请求时使用的方法,默认是get

\`baseURL\`将自动加在\`url\`前面，除非\`url\`是一个绝对URL。它可以通过设置一个\`baseURL\`便于为axios实例的方法传递相对URL

\`transformRequest\`允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法

\`headers\`是即将被发送的自定义请求头

headers:\{'X-Requested-With':'XMLHttpRequest'\},

\`params\`是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象

params:\{

ID:12345

\},

\`auth\`表示应该使用HTTP基础验证，并提供凭据

这将设置一个\`Authorization\`头，覆写掉现有的任意使用\`headers\`设置的自定义\`Authorization\`头

auth:\{

username:'janedoe',

password:'s00pers3cret'

\},

'proxy'定义代理服务器的主机名称和端口

\`auth\`表示HTTP基础验证应当用于连接代理，并提供凭据

这将会设置一个\`Proxy-Authorization\`头，覆写掉已有的通过使用\`header\`设置的自定义\`Proxy-Authorization\`头。

proxy:\{

host:'127.0.0.1',

port:9000,

auth::\{

username:'mikeymike',

password:'rapunz3l'

### 90.         react的生命周期函数 ###

解答:

初始化阶段：

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

componentWillMount：组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的 DOM 节点

componentDidMount:组件真正在被装载之后

运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

销毁阶段：

componentWillUnmount:组件即将销毁

### 91.         shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？） ###

解答:

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

### 92.         为什么虚拟 dom 会提高性能?(必考) ###

解答:

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

### 93.         react diff 原理是什么? ###

解答:

把树形结构按照层级分解，只比较同级元素。

给列表结构的每个单元添加唯一的 key 属性，方便比较。

React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）

合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

### 94.         React 中 refs 的作用是什么？ ###

解答:

Refs 可以用于获取一个 DOM 节点或者 React 组件的引用。何时使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。

### 95.         展示组件(Presentational component)和容器组件(Container component)之间有何不同? ###

解答:

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

### 96.         类组件(Class component)和函数式组件(Functional component)之间有何不同? ###

解答:

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态

当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

### 97.         (组件的)状态(state)和属性(props)之间有何不同? ###

解答:

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

### 98.         (在构造函数中)调用 super(props) 的目的是什么 ###

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

### 99.         什么是redux中间件? ###

答：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise

### 100.    redux有什么缺点 ###

答：1.一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。

2.当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

### 101.    何为 JSX ？ ###

解答：

JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。

### 102.    你是怎么封装微信小程序的数据请求的？ ###

解答:

一、将所有的接口放在统一的js文件中并导出

二、在app.js中创建封装请求数据的方法

三、在子页面中调用封装的方法请求数据

### 103.    你使用过哪些方法，来提高微信小程序的应用速度？ ###

答：

一、提高页面加载速度

二、用户行为预测

三、减少默认data的大小

四、组件化方案

### 104.    分析下微信小程序的优劣势？ ###

解答:

优势：

1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势：

1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

### 105.    小程序的双向绑定和vue哪里不一样？ ###

解答:

小程序直接this.data的属性是不可以同步到视图的，必须调用：this.setData(\{

Navbar:1

\})

50.1bindtap和catchtap的区别是什么？

解答:

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

### 106.    微信小程序传参数的几种方法? ###

解答:

1.   navigator 跳转时:

页面:<navigator url='../index/index?id=1&name=aaa'></navigator>

API:wx.navigateTo(\{

url: '../index/index?id=1&name=aaa', \})

获取方式:通过onLoad里面的函数获取，或者对应页面里的函数

js页面  在onLoad里直接获取

onLoad: function (options) \{

//页面初始化 options为页面跳转所带来的参数

var id = options.id    //获取值  \}

2.   全局传参:

（1）在APP.js页面定义globalData:\{

定义全局变量

(2) 在想要调用的js里面调用全局变量

Var app=getApp()

App.globalData.变量名 拿到全局的变量进行修改或者赋值

3.   data-\[参数\]

(1) 在wxml页面的标签组件上面定义:

<button bindtap='clickMe' data-id='1'>点击</button>//可以写多个data-自定义名字传参

（2）在js页面:

通过事件调用.e.currentTarget.dataset.id拿到值进行操作

### 107.    小程序组件传值的几种方式？ ###

解答:

父传子:

(1)  注册组件在你想注册的组件中的json文件中进行注册自定义组件

(2)  \{

"component": true,//进行自定义组件声明

"usingComponents": \{

‘自定义组件名’:’引入组件的路径’

\}\}

(3)父组件自定义属性:属性名字

(4)子组件通过properties接受

子传父:

1.注册组件在你想注册的组件中的json文件中进行注册自定义组件

2.\{

"component": true,//进行自定义组件声明

"usingComponents": \{

‘自定义组件名’:’引入组件的路径’

\}\}

3.子组件自定义事件:this.triggerEvebt(“事件名”,传递的参数)

4.父组件bind:子组件的事件名通过里面的:e.detail.取值

4.    App.js文件里面定义公共的方法或者值，data-属性名进行兄弟组件传值

### 108.      小程序常用的生命周期函数？ ###

解答:

onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数

onShow() 页面显示/切入前台时触发

onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等

onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

onPullDownRefresh() 下拉刷新的钩子函数 用户下拉刷新时会自动走到这个函数中

onReachBottom() 上翻到底的钩子函数

### 109.    怎么解决微信小程序的异步请求问题？ ###

解答:

小程序支持 ES6 语法 在返回成功的回调里面处理逻辑 Promise 异步 async/await

我们常常在处理异步时会单独封装一个方法进行逻辑操作，在异步成功里面直接进行调用方法

### 110.    你是如何在微信小程序中进行嵌套网页或h5页面的? ###

解答:

使用webview组件标签中的src属性进行跳转到对应的网页

使用注意点:

必须要在小程序后台使用管理员添加业务域名；

h5页面跳转至小程序的脚本必须是1.3.1以上；

微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上；

h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

### 111.    微信小程序如何实现下拉刷新？ ###

解答:用view代替scroll-view，设置onPullDownRefresh函数实现

### 112.    webview中的页面怎么跳转回小程序？ ###

解答:

微信小程序提供了2个官方API

wx.miniProgram.navigateTo(\{

url:’pages/login/login’+’$params’

\})

\*\*//跳转到小程序导航页面\*\*

wx.miniProgram.switchTab(\{

url:’/pages/index/index’

\})

### 113.    简述五个路由的区别？ ###

解答:

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

### 114.        请说出你在用uniapp开发过程中遇到过哪些问题? ###

1. 当组件中的数据更新时，组件不会自动的刷新，需要强制组件进行刷新,要调用this.$nextTick进行重新创建刷新

2. v-show在uniapp打包之后是没有作用的，可以用v-if和class绑定来解决这个问题

** **

3. Data.parse()时间转化为时间戳出现NaN,但在PC正常，如果时间是2017-1-2需要把-换成/

Date.parse(xxx.replace(/-/g, '/')) / 1000   \#xxx为字符串时间

** **

4.手机端 uni.createSelectorQuery() 为空,但在PC正常

let xx = uni.createSelectorQuery().in(this)  this指向问题重新修改this加.in(this)

5.千万不要使用UNI的WEEX模式开发,很多api不兼容

6.dom操作，在uni-app中基本可以说是没有dom这个概念的，只有节点这个概念，如果你想通过js的方式去创建添加dom，建议不要这么做，uni中可操作的dom功能只有更改获取它的宽高坐标等。

7.避免复杂动画

所有的h5+app都是不支持复杂的动画效果的，这个暂时没有解决办法，尽量避免出现复杂的动画，否则会出现严重的卡顿等问题。

## 第四部分：代码题(笔试中常见的代码题) ##

### 01.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ###

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = \[\];

var len = domList.length;　　//缓存到局部变量

while (len--) \{　　//使用while的效率会比for循环更高

if (domList\[len\].type == ‘checkbox’) \{

checkBoxList.push(domList\[len\]);

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

function combo(msg)\{

var arr=msg.split("-");

for(var i=1;i<arr.length;i++)\{

arr\[i\]=arr\[i\].charAt(0).toUpperCase()+arr\[i\].substr(1,arr\[i\].length-1);

msg=arr.join("");

return msg;

### 03.var numberArray = \[3,6,2,4,1,5\]; （考察基础API） ###

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

numberArray.reverse()

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

numberArray.sort(function(a,b)\{return b-a\})

### 04.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2020年02月25日，则输出2020-02-25 ###

var d = new Date();  // 获取年，getFullYear()返回4位的数字

var year = d.getFullYear();  // 获取月，月份比较特殊，0是1月，11是12月

var month = d.getMonth() + 1;  // 变成两位

month = month < 10 ? '0' + month : month;  // 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

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

function randomNub(aArray, len, min, max) \{

if (len >= (max - min)) \{

return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';

if (aArray.length >= len) \{

aArray.sort(function(a, b) \{

return a - b

\});

return aArray;

var nowNub = parseInt(Math.random() \* (max - min - 1)) + (min + 1);

for (var j = 0; j < aArray.length; j++) \{

if (nowNub == aArray\[j\]) \{

randomNub(aArray, len, min, max);

return;

aArray.push(nowNub);

randomNub(aArray, len, min, max);

return aArray;

var arr=\[\];

randomNub(arr,10,10,100);

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

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

var bArray = \['d','e','f'\];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

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

使用自带接口trim()，考虑兼容性：

if (!String.prototype.trim) \{

String.prototype.trim = function() \{

return this.replace(/^\\s+/, "").replace(/\\s+$/,"");

// test the function

var str = " \\t\\n test string ".trim();

alert(str == "test string"); // alerts "true"

### 08.判断一个字符串中出现次数最多的字符，统计这个次数 ###

var str = 'asdfssaaasasasasaa';

var json = \{\};

for (var i = 0; i < str.length; i++) \{

if(!json\[str.charAt(i)\])\{

json\[str.charAt(i)\] = 1;

\}else\{

json\[str.charAt(i)\]++;

\};

var iMax = 0;

var iIndex = '';

for(var i in json)\{

if(json\[i\]>iMax)\{

iMax = json\[i\];

iIndex = i;

alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

### 09.写一个获取非行间样式的函数 ###

function getStyle(obj,attr,value)\{

if(!value)\{

if(obj.currentStyle)\{

return obj.currentStyle(attr);

else\{

obj.getComputedStyle(attr,false);

else

obj.style\[attr\] = value;

### 10.去掉数组中重复的数字 ###

方法一:

//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！

//这里用的原型 个人做法；

Array.prototype.unique = function()\{

var len = this.length,

newArr = \[\],

flag = 1;

for(var i = 0; i < len; i++, flag = 1)\{

for(var j = 0; j < i; j++)\{

if(this\[i\] == this\[j\])\{

flag = 0;        //找到相同的数字后，不执行添加数据

flag ? newArr.push(this\[i\]) : '';

return newArr;

方法二：

var arr=\[1,2,3,3,4,4,5,5,6,1,9,3,25,4\];

Array.prototype.unique2 = function()

var n = \[\]; //一个新的临时数组

for(var i = 0; i < this.length; i++) //遍历当前数组

//如果当前数组的第i已经保存进了临时数组，那么跳过，

//否则把当前项push到临时数组里面

if (n.indexOf(this\[i\]) == -1) n.push(this\[i\]);

return n;

var newArr2=arr.unique2(arr);

alert(newArr2); //输出1,2,3,4,5,6,9,25

### 11.阶乘函数； ###

//原型方法

Number.prototype.N = function()\{

var re = 1;

for(var i = 1; i <= this; i++)\{

re \*= i;

return re;

var num = 5;

alert(num.N());

### 12.写一个函数可以计算 sum(5,0,-5);输出0; sum(1,2,3,4);输出10; ###

function sum() \{

var result = 0;

var arr = arguments;

for (var i = 0; i < arr.length; i++) \{

var num = arguments\[i\];

if (typeof num=='number') \{

result += num;

\};

return result;

[Link 1]: https://blog.csdn.net/qq_37430247/article/details/111667103
[Less]: http://www.lesscss.org/
[image]: /images/20221120/dd938551b0314ee2ab1de14047f97141.png
[Link 2]: http://baike.baidu.com/view/295412.htm
[Link 3]: http://baike.baidu.com/view/76320.htm
[Link 4]: http://baike.baidu.com/view/592974.htm
[Link 5]: http://baike.baidu.com/view/7718.htm
[Link 6]: http://baike.baidu.com/view/930.htm
[HTML]: http://baike.baidu.com/view/692.htm
[Link 7]: http://baike.baidu.com/subview/348591/5144387.htm
[ECMAScript]: http://baike.baidu.com/view/810176.htm
[Link 8]: http://baike.baidu.com/view/176610.htm
[Link 9]: http://baike.baidu.com/view/5286041.htm
[js]: http://baike.baidu.com/subview/9866/6241710.htm
[Link 10]: http://baike.baidu.com/view/351036.htm
[Windows]: http://baike.baidu.com/view/4821.htm
[Linux]: http://baike.baidu.com/view/1634.htm
[https_github.com_ftlabs_fastclick]: https://github.com/ftlabs/fastclick
[http_www.xxx.com]: http://www.xxx.com/
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id