前端面试易考知识点

一.HTML/CSS部分

1.什么是盒子模型？

盒模型包括内容（content)、内边距（padding）、边框（border）、外边距（margin）。盒模型分为IE标准的盒模型以及W3C标准的盒模型，IE盒模型的width部分包含了content、border和padding。补充：标准W3C模型：盒子的总宽度=左右margin+左右border+左右padding+width(内容content);IE盒子模型：盒子的总宽度=左右margin+width(左右border+左右padding+内容content)

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、button、em、img、input、lable、span、strong、select、textarea

块级元素：blockquote、div、dl、dt、dd、h1-h6、li、ol、p、ul

空元素：即没有内容的html元素， br、meta、hr、link、input

 

行内元素与块级元素有什么不同？

 记住对行内元素

设置宽度width  无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding  上下左右padding有效， 。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了

 

 块级元素和内联元素的区别：

1.块元素，总是在新行上开始；内联元素，和其他元素在一行；
2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。

各自的特点：

1.块元素的特点：
a.总是在新行上开始；
b.高度、行高以及外边距和内边距都可控制；
c.宽度默认是它容器的100%，除非设定一个宽度；
d.他可以容纳内联元素和其他块元素。
2.内联元素的特点：
a.和其他元素都在同一行；
b.高度， 左右外边距不可改变；
c.宽度就是它的文字和图片的宽度，不可改变；
d.内联元素只能容纳文本或者其他内联元素。

3.Css实现水平垂直居中

1）只适用: 宽高已定

1设置position: absolute(父元素记得设置: relative), 然后top和left设置50%, 50%, 再设置margin-left=宽/2, margin-top:宽/2

<div id="wrapper">    <div id="content"></div></div>

<style>    #wrapper{
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
        width: 500px;
        height:500px;
        background-color: red;
    }   
 #content{
        position: absolute;/*父元素需要相对定位*/
        width: 200px;
        height: 200px;
        background-color: green;
        top:50%;
        left: 50%;
        margin-left: -100px;/*宽度的一半*/ 
        margin-top: -100px;  
  }
        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;     /*很重要,不能忘*/        }        .div2{            background: yellow;            width:300px;            height:200px;            margin:auto;            bottom: 0;            top:0;            left:0;            right:0;            position: absolute;
}
</style>

 
只适用: 固定宽高; 如果宽高随意,想靠内部撑开的话, 会占满整个父div     
2利用position:absolute属性，设置top/bottom/right/left
.four{
            position:absolute;
            width:140px;
            height:140px;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:black;}


3设置宽度+margin:0 auto方式
代码：
1
2
3
4
5
<div class="center">
　　<span class="center_text">
    我是块级元素，我是块级元素，我给自己设了display：block
　　</span>
</div>
1
2
3
4
center_text{
　　display:block;
　　width:500px<br>margin：0 auto；
}
这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
 
4最简单的一种使行内元素居中的方法，使用line-height属性
 .six{
             width:100px;
             height:100px;
             line-height:100px;
             text-align:center;
             background:gray;
  }
这种方法也很实用，比如使文字垂直居中对齐
4.简述一下src与href的区别

href是指向网络资源所在位置，建立和当前元素或当前文档之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容会嵌入到当前文档的当前标签所在的位置，在请求src资源时会将其指向的资源下载

并应用到文档内，例如img图片等元素。当浏览器解析该元素时，会暂停其他元素的下载和处理，直到将该资源下载、编译、执行

完毕。类似于将所指资源嵌入到当前标签内。

5.什么是CSS Hack?

一般是指针对不同的浏览器写不同的CSS；通过在css样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。

IE浏览器 CSS Hack分为3种，条件Hack（if ie），属性级Hack（_color），选择符Hack（*+html）

 CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

 

 CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

 

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

 

选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

 

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

 

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

 

CSS hack方式一：条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

 

只在IE下生效

 

<!--[if IE]>

 

这段文字只在IE浏览器显示

 

<![endif]-->

 

只在IE6下生效

 

<!--[if IE 6]>

 

这段文字只在IE6浏览器显示

 

<![endif]-->

 

只在IE6以上版本生效

 

<!--[if gte IE 6]>

 

这段文字只在IE6以上(包括)版本IE浏览器显示

 

<![endif]-->

 

只在IE8上不生效

 

<!--[if ! IE 8]>

 

这段文字在非IE8浏览器显示

 

<![endif]-->

 

非IE浏览器生效

 

<!--[if !IE]>

 

这段文字只在非IE浏览器显示

 

<![endif]-->

CSS hack方式一：符号前缀

在标准模式中

 

“-″减号是IE6专有的hack

 

“\9″ IE6/IE7/IE8/IE9/IE10都生效

 

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

 

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

 

CSS hack方式三：选择器前缀法

 

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

 

目前最常见的是

 

*html *前缀只对IE6生效

 

*+html *+前缀只对IE7生效

 

@media screen\9{...}只对IE6/7生效

 

@media \0screen {body { background: red; }}只对IE8有效

 

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

 

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

 

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

 

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

CSS3选择器结合JavaScript的Hack

我们用IE10进行举例：

 

由于IE10用户代理字符串（UserAgent）为：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我们可以使用javascript将此属性添加到文档标签中，再运用CSS3基本选择器匹配。

 

JavaScript代码:

 

var htmlObj = document.documentElement;

 

htmlObj.setAttribute('data-useragent',navigator.userAgent);

 

htmlObj.setAttribute('data-platform', navigator.platform );

 

CSS3匹配代码：

 

html[data-useragent*='MSIE 10.0'] #id {color: #F00;}

 

Firefox 浏览器、Webkit 内核浏览器、Opera 浏览器css hack

Firefox 浏览器css hack

 

@-moz-document url-prefix() { 

 

  .selector { property: value; } 

 

} 

 

支持所有Gecko内核的浏览器 (包括Firefox)

 

*>.selector { property: value; } 

 

Webkit 内核浏览器 css hack

 

@media screen and (-webkit-min-device-pixel-ratio: 0) { 

 

  Selector { property: value;  } 

 

} 

 

Opera 浏览器css hack

 

html:first-child>b\ody Selector {property:value;} 

 

@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }

 

Webkit 内核浏览器 css hack和Opera 浏览器css hack

 

@media all and (min-width:0px){ .font1 {color:red;} } 

 

 移动端开发专用css hack

在android2+的版本中，按钮边框会产生bug，需要清除掉，解决方案如下：

 

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */

 

利用-webkit-transform-3d属性，因为Android4.0下不识别该选择器，浏览器解析代码时，会直接跳过此步骤

 

在CSS3的兼容中，相信大家对使用media的兼容并不陌生，我之前也提到过很多次，那么今天使用的hack也是跟它离不开的，代码如下：

 

@media all and (-webkit-transform-3d){/* Android4.0下不识别该-webkit-transform-3d，使用它可做Android4.0下版本兼容 */

 

.css{...}

 

}

6.简述同步和异步的区别

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去

直到收到返回信息，才会继续执行下去。

异步是指进程不需要一直等待下去，而是执行下面的操作，不管其他进程的状态，当有消息返回时，

系统会通知进程进行处理，这样可以提高进程的效率。

7.px和em的区别

PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

• 1. IE无法调整那些使用px作为单位的字体大小；
• 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
• 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

。浏览器默认的字体高是16px,1em=16px。

REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小
和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}

8.什么叫优雅降级和渐进增强？

优雅降级是指刚开始就构建完整的功能，然后再针对低版本浏览器进行兼容；

渐进增强是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、

交互等改进和追加功能，以达到更好的用户体验。

区别：

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

2）渐进增强是从浏览器最低版本做起，并不断的扩充，以适应未来环境的需要；

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

9.浏览器的内核分别有什么？

IE：trident内核

Firefox:gecko内核

safari:webkit内核

Opera:Blink内核

chrome:Blink内核

9.对WEB标准以及W3C的理解与认识.

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以使页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点1).对于结构html要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）a.标签字母要小写b.标签要闭合c.标签不允许随意嵌套2).对于css和js来说
a.尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。用户体验提高，代码维护简单，便于改版
b.样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，
c.不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
10.xhtml和html有什么区别HTML与XHTML之间的差别，主要分为功能上的差别和书写习惯的差别两方面。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。 由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。下面列出了几条容易犯的错误，供理解。  1)所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。2)标签必须成双成对像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样3)标签顺序必须正确标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。4)所有属性都必须使用双引号在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。不允许使用target="_blank"
从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。

11.Doctype是指什么? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 

Doctype：(Document Type)文档类型，它位于文档中最前面的位置，处于标签之前。它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。

为了获取正确的Doctype声明，关键就是让dtd与文档所遵循的标准对应。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

在标准模式中，浏览器根据规范呈现页面；

在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。

对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，

但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

12.CSS引入的方式有哪些? link和@import 的区别是?
1). 使用 link标签 将样式规则写在.css的样式文件中，再以<link>标签引入。 <link rel=stylesheet type="text/css" href="example.css">
2). 使用@import引入 跟link方法很像，但必须放在<style>...</style> 中 <style type="text/css"> <!-- @import url(css/example.css); --> </style >
3). 使用style 标签
将样式规则写在<style >...</style >标签之中。 <style type="text/css"> <!-- body {color: #666;background: #f0f0f0;font-size: 12px;} td,p {color:#c00;font-size: 12px;} --> </style >
4). 使用style 属性 将style 属性直接加在个别的元件标签里<元件(标签) style ="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
5). 使用<span></span>标记引入样式 <span style="font:12px/20px #000000;">cnwebshow.com</span>
两者区别：
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS
2.加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会
等到页面全部被下载完再被加载。
3.link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持。
4.lin支持使用JavaScript控制DOM去改变样式；而import不支持。
@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css ———————- @import “sub1.css”; @import “sub2.css”; 这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了。服务器的压力增大，浏览量大的网站还是谨慎使用。
13.
CSS选择符有哪些？哪些属性可以继承？ 内联和important哪个优先级高？
1)通配选择符* { sRules } 
2)类型选择符E { sRules } 3)属性选择符E [ attr ] { sRules } E [ attr = value ] { sRules } E [ attr ~= value ] { sRules } 
E [ attr |= value ] { sRules } h[title] { color: blue; }/* 所有具有title属性的h对象 */ span[class=demo] { color: red; } div[speed="fast"][dorun="no"] { color: red; } a[rel~="copyright"] { color:black; } 4)包含选择符E1 E2 { sRules } table td { font-size:14px; } 5)子对象选择符E1 > E2 { sRules } div ul>li p { font-size:14px; } 6)ID选择符 #ID { sRules } 7)类选择符E.className { sRules }  E1 , E2 , E3 { sRules } 8）伪类及伪对象选择符
 9)选择符分组 E : Pseudo-Classes { sRules } ( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang] E : Pseudo-Elements { sRules }
 ( Pseudo-Elements )[:first-letter :first-line :before :after] 可以继承的有：font-size font-family color 不可继承的一般有：border padding margin background-color width height等。
优先级顺序：id>class>标签选择
!important 的优先级最高
使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
14.前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。
标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
例如，P 标签表达了这样一种语义：“这是一个文本段。” 
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
15.标签上title与alt属性的区别是什么?alt 当图片不显示时用文字代表。title 为该属性提供信息
16.描述css reset的作用和用途。Reset重置浏览器的css默认属性，因为浏览器的种类不同，样式不同，然后重置，让他们统一。
　reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，
通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
　　比如说，
　　　　1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
　　　　2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
　　　　3）后面设置的属性将会覆盖前面重复设置的属性。 
期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"   normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
17.解释css sprites，如何使用。Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，
background-position可以用数字能精确的定位出背景图片的位置。
18.你如何对网站的文件和资源进行优化？
期待的解决方案包括：文件合并、文件最小化、文件压缩、使用CDN托管、缓存的使用（多个域名来提供缓存）。
19.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1）.优化图片
2）.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3）.优化CSS（压缩合并css，如margin-top,margin-left...)
4）.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5）.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，
     如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
      当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6）.减少http请求（合并文件，合并图片）。
20.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
 解释浮动和工作原理
答:　　
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素
会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
关于清除浮动:清除浮动可以理解为打破横向排列。 clear: none | left | right | both
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
1）.使用空标签清除浮动。在浮动元素后面添加空标签 clear:both;弊端就是增加了无意义标签。
2）.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
3）.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
     a.该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
     b.content属性是必须的，但其值可以为空，content属性的值设为””
父级div定义, 使用伪类:after和zoom
1
2
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
　　zoom:1的作用： 触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。
21置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。
进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。
置换元素/替换元素 
1.1. 一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 
1.2. 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 
1.3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；
又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 
1.4. HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
非置换元素/不可替换元素 
2.1. HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：
   <!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->   <span>hello word</span>
display:none和visibility：hidden会产生回流与重绘吗？
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流
repaint:当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘
通过上述定义，可以很明显看出，重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。重绘就好像给人染了一个头发，而回流相当于给人做了一次抽脂手术
二、什么会引起回流
页面渲染初始化
DOM结构变化，比如删除了某个节点；骨头都被打断了，肯定比抽脂更严重，所以会引发回流
render树变化，比如减少了padding；也就是进行抽脂手术
窗口resize事件触发
最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
你最喜欢的图片替换方法是什么，你如何选择使用?
方法一： 通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1 class="technique-seven">
    <span>w3cplus</span>
</h1>
 
.technique-seven {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-seven span {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}  

方法二：使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值
<h1 class="technique-six">w3cplus</h1>
.technique-six {
  width: 329px;
  padding: 79px 0 0 0;
  height: 0px;
  font-size: 0;
  background: url(images/w3cplus-logo.png);
  overflow: hidden;
}
22.简述一下你对HTML语义化的理解？
答：用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式CSS的情况下也以一种
文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易
将网站分块，便于阅读维护理解。
如何为有功能限制的浏览器提供网页?
答: 功能限制的浏览器, 比如低版本IE, 手机浏览器, 等会在很多功能上不符合Web标准, 而应对方式主要有:
只提供符合Web标准的页面
提供另一个符合那些浏览器标准的页面
兼容: 两种思路:
渐进增强: 提供一个可用的原型，后来再为高级浏览器提供优化
优雅降级: 据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本
相关技术:
Media Query
CSS hack
条件判断<! --[if !IE]><!-->除IE外都可识别<!--<![endif]-->
      

27. 知道BFC吗? 
答: BFC指的是Block Formatting Context, 它提供了一个环境, html元素在这个环境中按照一定规则进行布局. 一个环境中的元素不会影响到其他环境中的布局. 
决定了元素如何对其内容进行定位, 以及和其他元素的关系和相互作用.
　　其中: FC(Formatting Context): 指的是页面中的一个渲染区域, 并且拥有一套渲染规则, 它决定了其子元素如何定位, 以及与其他元素的相互关系和作用.
　　BFC: 块级格式化上下文, 指的是一个独立的块级渲染区域, 只有block-level box参与, 该区域拥有一套渲染规则来约束块级盒子的布局, 且与区域外部无关.
满足下面任意一条，都可以生成BFC:
根元素
float的值不为none
overflow的值不为visible
display的值为 inline-block, table-cell, table-caption
position的值为absolute或fixed
BFC的约束规则
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），
除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
分解:
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
BFC在布局中的应用
不和浮动元素重叠:
如果一个浮动元素后面跟着一个非浮动元素, 就会产生覆盖
防止margin重叠:
同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode
解决浮动相关问题
父元素: overflow:hidden    IE: zoom:1(hasLayout)
根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式。
多栏布局
比如左右两栏宽度固定, 中间栏自适应 则中间栏设置 overflow:hidden生成BFC
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
简单归纳一下BFC的效果：

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生margin collapse；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；
举例1：通过设置float:left来创建BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对BFC的认识</title>
<style type="text/css">
/*绿色框（’#left’）向左浮动，它创建了一个新BFC，但暂时不讨论它所创建的BFC。由于绿色框浮动了，它脱离了原本normal flow的位置，
因此，粉色框（’#right’）就被定位到灰色父元素的左上角（特性3：元素左边与容器左边相接触），与浮动绿色框发生了重叠。同时，由于灰色框（’#box’）并没有创建BFC，
因此在计算高度的时候，并没有考虑绿色框的区域（特性6：浮动区域不叠加到BFC区域上），发生了高度坍塌，这也是常见问题之一。*/* {margin: 0;padding: 0;}.left{background: #73DE80;/* 绿色 */opacity: 0.5;border: 3px solid #F31264;width: 200px;height: 200px;float: left;//创建了一个BFC}.right{/* 粉色 */background: #EF5BE2;opacity: 0.5;border: 3px solid #F31264;width:400px;min-height: 100px;}.box{background:#888;height: 100%;margin-left: 50px;}</style></head><body><div class='box'><div class='left'> </div><div class='right'> </div></div></body></html>
举例2：现在通过设置overflow:hidden来创建BFC
<!DOCTYPE html><html><head><meta charset="utf-8"><title>对BFC的认识</title><style type="text/css">* {margin: 0;padding: 0;}.left{background: #73DE80;/* 绿色 */opacity: 0.5;border: 3px solid #F31264;width: 200px;height: 200px;float: left;}.right{/* 粉色 */background: #EF5BE2;opacity: 0.5;border: 3px solid #F31264;width:400px;min-height: 100px;}.box{background:#888;height: 100%;margin-left: 50px;}.BFC{overflow: hidden;}<div class='box BFC'><div class='left'> </div><div class='right'> </div></div></style></head><body> <div class='box BFC'><div class='left'> </div><div class='right'> </div></div></body></html>
灰色框创建了一个新的BFC后，高度发生了变化，计算高度时它将绿色框区域也考虑进去了（特性5：计算BFC的高度时，浮动元素也参与计算）；

而绿色框和红色框的显示效果仍然没有任何变化。
举例3：现将一些小块添加到粉色框
<!DOCTYPE html><html><head><meta charset="utf-8"><title>对BFC的认识</title><style type="text/css">* {margin: 0;padding: 0;}.left{background: #73DE80;/* 绿色 */opacity: 0.5;border: 3px solid #F31264;width: 200px;height: 200px;float: left;}.right{/* 粉色 */background: #EF5BE2;opacity: 0.5;border: 3px solid #F31264;width:400px;min-height: 100px;}.box{background:#888;height: 100%;margin-left: 50px;}.BFC{overflow: hidden;}.little{background: #fff;width: 50px;height: 50px;margin: 10px;float: left;}<div class='box BFC'><div class='left'> </div><div class='right'> </div></div></style></head><body> <div class='box BFC'><div class='left'> </div><div class='right'> </div><div class='little'></div><div class='little'></div><div class='little'></div></div></body></html>
由于粉色框没有创建新的BFC，因此粉色框中白色块受到了绿色框的影响，被挤到了右下边去了
       
举例4：为粉色框创建BFC：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>对BFC的认识</title><style type="text/css">* {margin: 0;padding: 0;}.left{background: #73DE80;/* 绿色 */opacity: 0.5;border: 3px solid #F31264;width: 200px;height: 200px;float: left;}.right{/* 粉色 */background: #EF5BE2;opacity: 0.5;border: 3px solid #F31264;width:400px;min-height: 100px;}.box{background:#888;height: 100%;margin-left: 50px;}.BFC{overflow: hidden;}.little{background: #fff;width: 50px;height: 50px;margin: 10px;float: left;} </style></head><body> <div class='box BFC'><div class='left'> </div><div class='right BFC'> </div><div class='little'></div><div class='little'></div><div class='little'></div></div></body></html>
         
一旦粉色框创建了新的BFC以后，粉色框就不与绿色浮动框发生重叠了，同时内部的白色块处于隔离的空间
（特性4：BFC就是页面上的一个隔离的独立容器），白色块也不会受到绿色浮动框的挤压。
在实际中，利用BFC可以闭合浮动（实例二），防止与浮动元素重叠（实例四）。同时，由于BFC的隔离作用，
可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。
position属性：
稳定排序和不稳定排序 （7大排序的稳定性分析）
  稳定排序有：插入排序、冒泡排序、归并排序 、基数排序
不稳定排序：希尔排序、快速排序、选择排序、堆排序
【3】各种排序算法稳定性分析
现在分析一下常见的排序算法的稳定性，每个都给出简单的理由。 
（1）冒泡排序 
冒泡排序就是把小的元素往前调（或者把大的元素往后调）。注意是相邻的两个元素进行比较，而且是否需要交换也发生在这两个元素之间。
所以，如果两个元素相等，我想你是不会再无聊地把它们俩再交换一下。
如果两个相等的元素没有相邻，那么即使通过前面的两两交换把两个元素相邻起来，最终也不会交换它俩的位置，所以相同元素经过排序后顺序并没有改变。
所以冒泡排序是一种稳定排序算法。 
（2）选择排序
选择排序即是给每个位置选择待排序元素中当前最小的元素。比如给第一个位置选择最小的，在剩余元素里面给第二个位置选择次小的，
依次类推，直到第n-1个元素，第n个元素不用选择了，因为只剩下它一个最大的元素了。
那么，在一趟选择时，如果当前锁定元素比后面一个元素大，而后面较小的那个元素又出现在一个与当前锁定元素相等的元素后面，那么交换后位置顺序显然改变了。
呵呵！比较拗口，举个例子：序列5 8 5 2 9， 我们知道第一趟选择第1个元素5会与2进行交换，那么原序列中两个5的相对先后顺序也就被破坏了。
所以选择排序不是一个稳定的排序算法。
 
（3）插入排序
插入排序是在一个已经有序的小序列的基础上，一次插入一个元素。当然，刚开始这个有序的小序列只有1个元素，也就是第一个元素（默认它有序）。
比较是从有序序列的末尾开始，也就是把待插入的元素和已经有序的最大者开始比起，如果比它大则直接插入在其后面。
否则一直往前找直到找到它该插入的位置。如果遇见一个与插入元素相等的，那么把待插入的元素放在相等元素的后面。
所以，相等元素的前后顺序没有改变，从原无序序列出去的顺序仍是排好序后的顺序，所以插入排序是稳定的。
 
（4）快速排序
快速排序有两个方向，左边的i下标一直往右走（当条件a[i] <= a[center_index]时），其中center_index是中枢元素的数组下标，一般取为数组第0个元素。
而右边的j下标一直往左走（当a[j] > a[center_index]时）。
如果i和j都走不动了，i <= j, 交换a[i]和a[j],重复上面的过程，直到i>j。交换a[j]和a[center_index]，完成一趟快速排序。
在中枢元素和a[j]交换的时候，很有可能把前面的元素的稳定性打乱，比如序列为 5 3 3 4 3 8 9 10 11 
现在中枢元素5和3(第5个元素，下标从1开始计)交换就会把元素3的稳定性打乱。
所以快速排序是一个不稳定的排序算法，不稳定发生在中枢元素和a[j]交换的时刻。 
（5）归并排序
归并排序是把序列递归地分成短序列，递归出口是短序列只有1个元素(认为直接有序)或者2个序列(1次比较和交换)，
然后把各个有序的段序列合并成一个有序的长序列，不断合并直到原序列全部排好序。
可以发现，在1个或2个元素时，1个元素不会交换，2个元素如果大小相等也没有人故意交换，这不会破坏稳定性。
那么，在短的有序序列合并的过程中，稳定是是否受到破坏？
没有，合并过程中我们可以保证如果两个当前元素相等时，我们把处在前面的序列的元素保存在结果序列的前面，这样就保证了稳定性。
所以，归并排序也是稳定的排序算法。
 
（6）基数排序
基数排序是按照低位先排序，然后收集；再按照高位排序，然后再收集；依次类推，直到最高位。
有时候有些属性是有优先级顺序的，先按低优先级排序，再按高优先级排序，最后的次序结果就是高优先级高的在前，高优先级相同的情况下低优先级高的在前。
基数排序基于分别排序，分别收集，所以其是稳定的排序算法。
（7）希尔排序
希尔排序是按照不同步长对元素进行插入排序，当刚开始元素很无序的时候，步长最大，所以插入排序的元素个数很少，速度很快；
当元素基本有序时，步长很小，插入排序对于有序的序列效率很高。所以，希尔排序的时间复杂度会比O(N^2)好一些。
由于多次插入排序，我们知道一次插入排序是稳定的，不会改变相同元素的相对顺序，
但在不同的插入排序过程中，相同的元素可能在各自的插入排序中移动，最后其稳定性就会被打乱。
所以shell排序是不稳定的排序算法。 
（8）堆排序(不稳定)
我们知道堆的结构是节点i的孩子为2*i和2*i+1节点，大顶堆要求父节点大于等于其2个子节点，小顶堆要求父节点小于等于其2个子节点。
在一个长为n的序列，堆排序的过程是从第n/2开始和其子节点共3个值选择最大（大顶堆）或者最小（小顶堆），这3个元素之间的选择当然不会破坏稳定性。
但当为n/2-1, n/2-2, ...1这些个父节点选择元素时，就会破坏稳定性。
有可能第n/2个父节点交换把后面一个元素交换过去了，而第n/2-1个父节点把后面一个相同的元素没有交换，那么这2个相同的元素之间的稳定性就被破坏了。
所以，堆排序不是稳定的排序算法。
 操作过程如下：
     1)初始化堆：将R[1..n]构造为堆；
     2)将当前无序区的堆顶元素R[1]同该区间的最后一个记录交换，然后将新的无序区调整为新的堆。
    因此对于堆排序，最重要的两个操作就是构造初始堆和调整堆，其实构造初始堆事实上也是调整堆的过程，只不过构造初始堆是对所有的非叶节点都进行调整。
 

二、JavaScript部分

1.怎样创建、添加、移除、移动、复制、和查找节点？

1）创建新节点

createDocumentFragment//创建一个DOM片段

createElement//创建一个元素

createTextNode//创建一个文本节点

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

appendChild();

removeChild();

replaceChild();

insertBefore();

3）查找

getElementsByTagName();

getElementsByName();

getElementById();

2.实现一个函数clone，可以对JavaScript中的5种主要的数据类型

（包括Number、String、Object、Array、Boolean）进行值复制。

function clone(obj){

var o;

switch(typeof obj){

case "undefined"：

break;

case "string":

o=obj+"";

break;

case "number":

o=obj-0;

break;

case "boolean":

o=obj;

break;

case "object":

if(obj==null){

o=null;

}else{

if(object.prototype.toString.call(obj).slice(8,-1)==="Array"){//Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组

o=[];

for(var i=0;i<obj.length;i++){

o.push(clone(obj[i]));

}

}else{

o={};

for(var k in obj){

o(k)=clone(obj[k]);

}

}

}

break;

default:

o=obj;

break;

}

return o;

}

3.如何消除一个数组里面重复的元素？

function differElement(){

var arr1=[1,2,3,2,4,3,2,1];

var arr2=[];

for(var i=0;i<arr1.length;i++){

      if(arr2.indexOf(arr1[i])<0){//检索arr2中第一次出现arr2[i]元素的位置，如果arr2中没有该元素，则返回-1；

        arr2.push(arr1[i]);

}

}

document.write(arr2);

}

4.Javascript中callee和caller的作用？

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

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

5.请描述一下cookies，webStorage，sessionStorage和localStorage的区别

cookies的容量大小受限，当你每次请求一个新的页面时，cookie都会被发送过去，这样就会无形中浪费了带宽，

cookie还需要指定作用域，不可以跨域调用；

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话的页面才会被访问，并且当会话结束时，

数据也会随之销毁，因此，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储；

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

webStorage和cookie相似，区别是它的存储容量更大一些，并且拥有setItem,getItem,removeItem,clear等方法，

不像cookie需要前端开发者自己封装setCookie()、getCookie()方法；cookie的作用是与服务器进行交互，

作为HTTP规范的一部分存在，而webStorage仅仅是为了存储本地数据。

6.统计字符串中各个字母的个数或统计最多字母数。

function countStr(){

var str="aaaabbbccddfgh";

obj={};//obj为对象

for(var i=0;i<str.length;i++){

var v=str.charAt(i);

if(obj[v]!=null&&obj[v]==v){

obj[v].count=++obj[v].count;

}else{

obj[v]={};

obj[v].count=1;

obj[v].value=v;

}

}

for(k in obj){

document.write(obj[key].value+'='+obj[key].count+ ");//a=4,b=3,c=2,d=2,f=1,g=1,h=1

}

}
1.javascript的typeof返回哪些数据类型
Object number function boolean undefined string
2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
3.split() join() 的区别
前者是将字符串切割成数组的形式，后者是将数组转换成字符串。

4.数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除

5.ajax请求时，如何解释json数据使用eval()方法或者 JSON.parse()方法来解析json数据，但是鉴于安全性考虑 使用JSON.parse()方法更靠谱6.js是什么，js和html 的开发如何结合?
js是一种基于对象和事件驱动，并具有安全性的脚本语言。
可以html的三个地方编写js脚本语言：一是在网页文件的标签对中直接编写脚本程序代码；二是将脚本程序代码放置在一个单独的文件中，

在网页文件中引用这个脚本程序语言；三是将脚本程序代码作为某个元素的事件属性值或超链接的href属性值。

7.caller与callee的区别：

caller返回一个函数的引用，这个函数调用了当前的函数;callee放回正在执行的函数本身的引用，它是arguments的一个属性.

caller返回一个函数的引用，这个函数调用了当前的函数。
使用这个属性要注意:
1 这个属性只有当函数在执行时才有用
2 如果在JavaScript程序中，函数是由顶层调用的，则返回null。

var a=function(){ alert(a.caller); } var b=function(){ a(); } b();

上面的代码中，b调用了a，那么a.caller返回的是b的引用

返回：

如果直接调用a(即a在任何函数中被调用，也就是顶层调用),返回null:
[javascript] view plain copy
 
var a = function() {   
alert(a.caller);   
}   
var b = function() {   
a();   
}   
//b();   
a();  

calleecallee返回正在执行的函数本身的引用，它是arguments的一个属性使用callee时要注意:1 这个属性只有在函数执行时才有效2 它有一个length属性，可以用来获得形参的个数，因此可以用来比较形参和实参个数是否一致，即比较arguments.length是否等于arguments.callee.length3 它可以用来递归匿名函数。
[javascript] view plain copy
 
var a = function() {   
alert(arguments.callee);   
}   
var b = function() {   
a();   
}   
b();  
a在b中被调用，但是它返回了a本身的引用，结果如下:
[javascript] view plain copy
 
var a = function() {   
alert(arguments.callee);   
}   
8.apply和call的区别
<script type="text/javascript">// apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.// Function.apply(obj,args)方法能接收两个参数// obj：这个对象将代替Function类里this对象// args：这个是数组，它将作为参数传给Function（args-->arguments）// call:和apply的意思一样,只不过是参数列表不一样.// Function.call(obj,[param1[,param2[,…[,paramN]]]])//obj：这个对象将代替Function类里this对象// params：这个是一个参数列表//apply示例//定义一个人类function Person(name,age){this.name=name;this.age=age;}//定义一个学生类function Student(name,age,grade){this.grade=grade;Person.apply(this,arguments);}var student=new Student("xiaoli",22,"三年级");alert("name:"+student.name+","+"age:"+student.age+","+"grade:"+student.grade);</script>
分析: Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“qian”,”21”,”一年级”];
也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
//call示例// 在Studen函数里面可以将apply中修改成如下:// Person.call(this,name,age);
什么情况下用apply,什么情况下用call
在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表
是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),
而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade))
;
apply的一些其他巧妙用法
细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,
在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,
这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:
 
a)Math.max 可以实现得到数组中最大的一项
因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组
但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项
(apply会将一个数组装换为一个参数接一个参数的传递给方法)
这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去
b)Math.min 可以实现得到数组中最小的一项
同样和 max是一个思想 var min=Math.min.apply(null,array);
c)Array.prototype.push 可以实现两个数组合并
同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:
vararr1=new Array("1","2","3"); 
vararr2=new Array("4","5","6"); 
Array.prototype.push.apply(arr1,arr2);
也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.
通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:
一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!
9.JavaScript 代码中的 "use strict"; 是什么意思？使用它的区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;提高编译器效率，增加运行速度；为未来新版本的Javascript标准化做铺垫。
10.new 操作符具体干了什么呢？
(1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。(2)属性和方法被加入到 this 引用的对象中。(3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。//var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);
11.JavaScript 中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是哪个？
hasOwnPropertyJavaScript 中 hasOwnProperty 函数方法是返回一个布尔值，指出一个对象中是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。使用方法：object.hasOwnProperty(proName)其中参数object是必选项，一个对象的实例。proName是必选项，一个属性名称的字符串值。如果 object本身自己 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

12.你对 JSON 了解吗？
JSON(JavaScript Object Notation：javascript的对象表示方法)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。如：{"age":"12", "name":"back"}

13.Ajax 是什么？如何创建一个 Ajax ？
ajax的全称：Asynchronous Javascript And XML，异步传输+js+xml。所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。//(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息(3)设置响应HTTP请求状态变化的函数(4)发送HTTP请求(5)获取异步调用返回的数据(6)使用JavaScript和DOM实现局部刷新

14.同步和异步的区别？
同步的概念应该是来自于操作系统中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。//同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。//异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

15.如何解决跨域问题？
jsonp、iframe、window.name、window.postMessage、document.domain服务器上设置代理页面
16.谈一谈你对 ECMAScript6 的了解？
ECMAScript 6 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015
17.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 + ')';   }}
18.异步加载 JS 的方式有哪些？
(1)defer，只支持 IE(2)async:(3)动态创建 script，插入到 DOM 中，加载完毕后 callBack
19.document.write 和 innerHTML 有何区别？
document.write 只能重绘整个页面innerHTML 可以重绘页面的一部分

20.jQuery 中如何将数组转化为 json 字符串，然后再转化回来？
jQuery 中没有提供这个功能，所以需要先编写两个 jQuery 的扩展：$.fn.stringifyArray = function(array) {   return JSON.stringify(array)}$.fn.parseArray = function(array) {  return JSON.parse(array)}//然后调用:$("").stringifyArray(array)
21.前端 MVC、MVVM

1、MVC

模型（Model）：数据保存视图（View）：用户界面控制器（Controller）：业务逻辑(1)View 传送指令到 Controller(2)Controller 完成业务逻辑后，要求 Model 改变状态(3)Model 将新的数据发送到 View ，用户得到反馈所有通信都是单向的。

2、MVVM

模型（Model）视图（View）视图模型（ViewModel）(1)各部分间都是双向通信(2)View 与 Model 不发生联系，都通过 ViewModel 传递(3)View 非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性；而 ViewModel 非常厚，所有逻辑都部署在那里。采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel ，反之亦然。

22.检测浏览器版本有哪些方式？
功能检测、userAgent 特征检测比如：navigator.userAgent
用JavaScript的内置对象 navigator 的属性userAgent的值来判断（navigator.userAgent）。navigator是javascript的内置对象，通常用于检测浏览器与操作系统的版本。 常用的属性有
appCodeName -- 浏览器代码名的字符串表示
appName -- 官方浏览器名的字符串表示
appVersion -- 浏览器版本信息的字符串表示
cookieEnabled -- 如果启用cookie返回true，否则返回false
javaEnabled -- 如果启用java返回true，否则返回false
platform -- 浏览器所在计算机平台的字符串表示
plugins -- 安装在浏览器中的插件数组
taintEnabled -- 如果启用了数据污点返回true，否则返回false
userAgent -- 用户代理头的字符串表示（就是包含浏览器版本信息等的字符串）

23.如何实现浏览器内多个标签页之间的通信?

 
可通过调用localStorage,cookies等本地存储的方式。
24.谈谈你对this的理解

1）this是js的一个关键字，随着函数使用场合的不同，this的值也会发生变化；

2）总有一个原则，this指的是调用函数的那个对象；

3）this一般情况下是：全局对象Global

三、HTTP

1.一次完整的HTTP事务是一个怎样的过程？

1）域名解析

2）发起TCP的三次握手

3）建立HTTP连接后发起http请求

4）服务器响应http请求，浏览器得到html代码

5）浏览器解析html代码，并请求html代码中的资源

6）浏览器对页面进行渲染，并呈现给用户

2.HTTP的状态码有哪些？

2开头 （请求成功）表示成功处理了请求的状态代码。
200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201   （已创建）  请求成功并且服务器创建了新的资源。 202   （已接受）  服务器已接受请求，但尚未处理。 203   （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。 204   （无内容）  服务器成功处理了请求，但没有返回任何内容。 205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。206   （部分内容）  服务器成功处理了部分 GET 请求。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
300   （多种选择）  针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。302   （临时移动）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。303   （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 305   （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 307   （临时重定向）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
400   （错误请求） 服务器不理解请求的语法。 401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 403   （禁止） 服务器拒绝请求。404   （未找到） 服务器找不到请求的网页。405   （方法禁用） 禁用请求中指定的方法。 406   （不接受） 无法使用请求的内容特性响应请求的网页。 407   （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。408   （请求超时）  服务器等候请求时发生超时。 409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 410   （已删除）  如果请求的资源已永久删除，服务器就会返回此响应。 411   （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 412   （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 413   （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 414   （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 415   （不支持的媒体类型） 请求的格式不受请求页面的支持。 416   （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 417   （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500   （服务器内部错误）  服务器遇到错误，无法完成请求。 501   （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。 505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
3、https是如何实现加密的？
https=http+ssl安全传输协议+ca身份认证；https是http的安全版，它不仅涵盖http协议，

而且加入了ssl安全加密传输协议保证数据传输的安全性，ca身份认证则验证服务器域名是否是真实可靠的 。

浏览器把自身支持的一系列Cipher Suite（密钥算法套件，后文简称Cipher）[C1,C2,C3, …]发给服务器；
服务器接收到浏览器的所有Cipher后，与自己支持的套件作对比，如果找到双方都支持的Cipher，则告知浏览器；
浏览器与服务器使用匹配的Cipher进行后续通信。如果服务器没有找到匹配的算法，浏览器将给出错误信息
4、排序算法

1）快速排序算法

 快速排序是对冒泡排序的一种改进，第一趟排序时将数据分成两部分，一部分比另一部分的所有数据都要小。然后递归调用，在两边都实行快速排序。// 排序思想:1、在数据集中选取一个元素作为基准；//       2、所有小于基准的元素都移到基准的左边，所有大于基准的元素都移到基准的右边//       3、对基准的左边和右边分别重复第1、2步，直到所有子集只剩下一个元素为止。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>快速排序</title></head><body><script type="text/javascript">// function quickSort(arr){if(arr.length<=1){return arr;}var pivotIndex=Math.floor(arr.length/2);//取数组中间的元素作为基准var pivot=arr.splice(pivotIndex,1)[0];//splice从数组中删除中间一项。并返回被删除的元素，作为基准var left=[];var right=[];for(var i=0;i<arr.length;i++){if(arr[i]<pivot){left.push(arr[i]);}else{right.push(arr[i]);}}return quickSort(left).concat([pivot],quickSort(right));};var arr=[3,45,2,5,33,46,55,4,30];document.write(quickSort(arr));//2,3,4,5,30,33,45,46,55</script></body></html>

2）冒泡排序

<!-- 冒泡排序:
解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。
　　　2.第一轮的时候最后一个元素应该是最大的一个。
　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。 -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡排序</title>
</head>
<body>

<script type="text/javascript">
function bubbleSort(arr){
        for(var i=0;i<arr.length-1;i++){
            for(var j=0;j<arr.length-1-i;j++){
                if(arr[j]>arr[j+1]){
                     var temp=arr[j];
                     arr[j]=arr[j+1];
                     arr[j+1]=temp;
                }
            }
        }
        return arr;
}
var arr=[3,45,2,5,33,46,55,4,30];
console.log(bubbleSort(arr));//2,3,4,5,30,33,45,46,55
 
</script>
</body>
</html>

3）选择排序

首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，
再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
以此类推，直到所有元素均排序完毕。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择排序</title></head><body><script type="text/javascript">//   function selectSort(arr){var len=arr.length;var minIndex,temp;for(var i=0;i<len-1;i++){minIndex=i;  for(var j=i+1;j<len;j++){       if(arr[j]<arr[minIndex]){//寻找最小数       minIndex=j;//保存最小数的索引       }  }  temp=arr[i];  arr[i]=arr[minIndex];  arr[minIndex]=temp;}return arr; }var arr=[3,45,2,5,33,46,55,4,30];document.write(selectSort(arr));//2,3,4,5,30,33,45,46,55</script></body></html>

4）插入排序

<!DOCTYPE html><html><head><meta charset="utf-8"><title>插入排序</title></head><body><script type="text/javascript"> function insertionSort(arr){  var temp,j;  for(var i=1;i<arr.length;i++){            temp=arr[i];            j=i;            while(j>=0&&temp<arr[j-1]){//在剩余的序列中找到最小的元素              arr[j]=arr[j-1];              --j;            }            arr[j]=temp;  }}var elements = [10, 9, 8, 7, 6, 5];console.log('before: ' + elements);insertionSort(elements);console.log(' after: ' + elements);//[5,6,7,8,9,10]

</script>

</body>

</html>

5、二分法查找

思想：

1)、首先对所要查找的数据集进行排序，然后将目标元素与数据集中间位置的元素进行比较；

2)、若目标元素正好等于中间位置的元素，则结束查找，否则进行下一步；

3)、若目标元素大于或小于中间位置的元素，则在大于或小于中间位置元素的那一半进行查找，然后重复第一步；

4)、如果某一步的数组为空了，则表示找不到该元素；

非递归算法：

function binarySearch(arr,key){

var low=0;

var high=arr.length-1;

while(low<=high){

var mid=parseInt((high+low)/2);

if(arr[mid]==key){

return mid;

}else if(key>arr[mid]){

low=mid+1;

}else if(key<arr[mid]){

high=mid-1;

}else{

return -1;

}

}

};

var arr=[1,2,3,4,5,6,7,8,9,20];

var result=binarySearch(arr,8);

alert(result);

递归算法：

function binarySearch(arr,low,high,key){

if(low>high){

return -1;

}

var mid=parseInt((low+high)/2);

if(arr[mid]==key){

return mid;

}else if(arr[mid]>key){

high=mid-1;

return binarySearch(arr,low,high,key);

}else(arr[mid]<key){

low=mid+1;

return binarySearch(arr,low,high,key);

}

}

var arr=[1,2,3,4,5,6,7,8,9,20];
var result=binarySearch(arr,0,9,8);
return result;
四、设计模式

1.谈谈你对MVC的理解

MVC即Model-View-Controller,模型-视图-控制器，是一种设计模式，它强制性的把应用程序的输入、处理和输出分开。

MVC中的模型、视图、控制器分别承担着不同的任务

模型：表示业务数据和业务处理，一个模型能为多个视图提供数据，这提高了应用程序的重要性；

视图：是用户看到并与之交互的界面。视图向用户显示相关的数据，并接受用户的输入，视图不进行任何的业务逻辑处理；

控制器：当用户单击web页面中的提交按钮时，控制器接受相应的请求并调用相应的模型去处理，然后根据处理的结果

调用相应的视图来显示处理的结果。

MVC的处理过程：首先控制器接受用户的请求，调用相应的模型来进行业务处理，并返回数据给控制器，控制器再调用

相应的视图来显示处理的结果，通过视图呈现给用户。

五、浏览器兼容问题

(一）IE6下的Bug及解决办法

1.双倍边距问题
在IE6中，如果有两个并行的漂浮元素并且用了margin的话，会出现双倍margin值的问题
给漂浮元素设置样式display:inline
为IE6hack一下：margin-left:10px;_margin-left:5px;
在DOM结构允许的情况下，左边的用float:left，右边的用float:right;
2.固定定位fix

position:fixed这个样式有时候作用很大，尤其是在有浮动栏的时候，但是IE6中并不支持固定定位。

3.
默认高度问题

在IE6中，如果我们设置一个空白的div，会发现这个div会有一个默认的高度，因为IE6中有一个默认的字体大小，大致在12-14px之间，

IE6会认为这个层的高度不应该小于字体的行高，所以会出现这个问题。解决方法：font-size:0;

4.
图片下方出现空白间隙

设置图片为块级元素：img{display:block;}
把父元素的字体大小设置为0：font-size:0
设置图片的垂直对齐方式：vertical-align:top
5.
IE6中3像素问题

如果两个容器挨着，一个浮动，一个不浮动，在IE6中这两个容器之间就会有3像素的间隙，解决办法：给漂浮的容器添加样式_margin-right:-3px;

6.
不支持背景透明的PNG

在IE6中背景透明的PNG是不能生效的，所以最好用矩形或者背景颜色。

1）背景透明的PNG图片质量其实还是不错的，但是有时候我们为了方便，会为IE6用图片质量低一些的GIF图片：

.box{    background:url("bg.png");    _background:url("bg.gif");}
2）
用滤镜来解决比上面的方法要好：
.box{    width:12px;    height:12px;    background:url("bg.png");    _background:transparent none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png")}
3）
JS插件。如果仅仅是几个页面需要PNG背景透明的话，那么还是选择第2种方法为好，但是如果需要大范围使用的话，使用插件是不错的选择，插件的名称叫做DD_belated:
DD_belatedPNG.fix('#box img');
7.IE6中的:hover 
在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。

最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。 

8.IE6调整窗口大小的 Bug 
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。 

9.最小高度 
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。

#container {min-height:200px; height:auto !important; height:200px;} 

10.line-height默认行高bug 
解决方法：line-height设值 

        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;     /*很重要,不能忘*/        }        .div2{            background: yellow;            width:300px;            height:200px;            margin:auto;            bottom: 0;            top:0;            left:0;            right:0;            position: absolute;

一旦粉色框创建了新的BFC以后，粉色框就不与绿色浮动框发生重叠了，同时内部的白色块处于隔离的空间（特性4：BFC就是页面上的一个隔离的独立容器），白色块也不会受到绿色浮动框的挤压。

png和jpg格式的区别：

png属于无损压缩，jpg属于有损压缩，这意味着一张图片多次使用jpg格式压缩的话会逐渐失真。png格式的图片存储空间明显大于jpg格式的图片

常见的Web攻击有哪些？
（1）跨站脚本攻击（XSS）
（2）分布式拒绝服务（DDOS）
基本方法是利用合理的请求占用服务器的大量资源，使正常用户无法得到服务器的相应。
（3）跨站请求伪造攻击（CSRF）
攻击者通过各种方法伪造一个请求，模仿用户提交表单的行为，从而达到修改用户的数据，或者执行特定任务的目的。解决方法是尽量使用post请求。
（4）sql注入
攻击主要针对后台使用sql拼接方式查询的情况，攻击者注入类似or 1 = 1的sql语句，致使表内的全部信息泄露。

post请求和get请求的区别
（1） get请求一般用来获得数据，而post请求一般用来发送数据。人们期望，get请求不会对服务器造成任何影响，而post请求则可能会影响服务器端的数据。get请求消耗的资源较post请求而言，会少一些，但相对安全性较差。发送同样大小的数据，get请求的效率最高可以达到post请求的2倍。
（2）一般按照约定，使用get请求时，将数据通过url进行传递，而是用post请求时，将数据放在body里。但这并非硬性规定，因为method和data本身是正交的。post请求亦可将数据放在url中。
（3）就协议底层实现而言，在get请求中，只产生一个TCP数据包，浏览器会将header和data一并发送出去，等待服务器的回应；而在post请求中，会产生2个TCP数据包。浏览器先发送header，服务器响应100 continue，浏览器再发送data。

JavaScript数组方法总结(上）

JavaScript中提供了多种数组方法，如下：
转换方法—toLocaleString()方法、toString()方法、valueOf()方法
栈方法——push()方法、pop()方法
队列方法——shift()方法、unshift()方法
重排序方法——reverse()方法、sort()方法
操作方法——concat()方法、slice()方法、splice()方法
位置方法——indexOf()方法、lastIndexOf()方法
迭代方法——every()方法、filter()方法、forEach()方法、map()方法、some()方法
归并方法——reduce()方法、reduceRight()方法
转换方法：
①：toString()方法返回由数组中每个值的字符串形式拼接并且以逗号相隔的字符串
②：valueOf()方法返回的还是数组
③：toLocaleString()方法也会返回一个数组值以逗号相隔的字符串，但与toString()方法不同的是在返回日期对象时格式不同。
具体看一下例子：
var colors=["red","blue","green"];
console.log(colors.toString());    //"red,blue,green"
console.log(colors.valueOf());    //red,blue,green
console.log(colors.toLocaleString());    //"red,blue,green"
//toLocaleString()方法与toString()方法在返回日期对象时格式不同
var today=new Date();
console.log(today.toString());    //    Sun Mar 05 2017 12:57:11 GMT+0800 (中国标准时间)
console.log(today.toLocaleString());    //    2017/3/5 下午12:57:11
栈方法：
①：push()方法可以接受任意数量的参数，逐个添加到数组末尾，返回修改后数组的长度
②：pop()方法从数组末尾移除最后一项，返回被移除的项
具体看下面例子：
var arr=new Array();    //使用构造函数创建数组
var count=arr.push("red","blue");    //push()返回数组长度
console.log("count="+count);    //count=2
console.log(arr);    //red,blue
count=arr.push("black");    //count=3
var item=arr.pop();
console.log("item="+item);//pop返回被移除的项--item=black
队列方法：
①：shift()方法移除数组的第一次项并返回该项
②：unshift()方法在数组前端添加任意项，并返回新数组的长度
具体看一下例子：
var colors=new Array();    //创建数组
var count=colors.unshift("red","green");    //在数组前端添加两项
console.log(count);    //2
count=colors.unshift("black");     //此时数组各项顺序为"black","red","green"
console.log(count)    //3
item=colors.shift();
console.log(item);    //black
由栈方法跟队列方法可知，在这两种方法中添加数组项的方法返回新数组的长度，移除数组项的方法返回被移除项