面试题（一）

作者: 福尔摩鸡 | 来源:发表于2017-04-06 19:35 被阅读637次

3月1日

1. 你做的页面在哪些浏览器测试过，它们的内核分别是什么？

IE：trident内核
Firefox：gecko内核
Safari：webkit内核
Chrome：Blink内核

2. DOCTYPE的作用是什么？

<!DOCTYPE>位于文档的最顶部，它可以告诉浏览器按何种规范解析页面。

3. Quirks模式是什么？它和Standards模式有什么区别？

IE6开始对CSS提供了更好的兼容，为了保证原来的一些页面显示正常，它将DTD视为参数，如果写了则开启Quirks模式（怪癖模式，诡异模式，怪异模式，向后兼容模式），IE6将用IE5.5的内核来解析页面。

在Quirks模式下，和Standards模式相比会有布局、样式解析和脚本执行三个方面的区别：

Quirks模式下，设置一个元素的宽度和高度会包含padding和border。
Quirks模式下，可以给span等行内元素设置width和height。
Quirks模式下，margin:0auto;无法使元素水平居中。

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

改版的时候更方便，只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

5. img的alt与title有何异同？strong与em的异同？

alt属性是用来设置在图片无法显示时的替换文字，title属性设置的是鼠标悬停在图片上时所显示的提示信息，在IE浏览器下会在没有设置title时把alt当成title显示。
strong：粗体强调标签，强调，表示内容的重要性。

em：斜体强调标签，更强烈强调，表示内容的强调点。

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

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

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

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

7. 为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

8. 请谈一下你对网页标准和标准制定机构重要性的理解。

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

9. 请描述一下cookies、sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。WebStorage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要前端开发者自己封装setCookie、getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。

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

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

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

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是HypertextReference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href='common.css' rel='stylesheet' />，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

11. 知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣）

13. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存
cdn缓存
浏览器缓存
服务器缓存

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15. 你如何理解HTML结构的语义化？

去掉或样式丢失的时候能让页面呈现清晰的结构。
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
便于团队开发和维护。

3月2日

1. 谈谈以前端角度出发，做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页，以及如何对搜索结果进行排序等。
Meta标签优化：主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
如何选取关键词并在网页中放置关键词，关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎，不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。
按点击付费的搜索引擎里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
发外链。
合理的标签使用。

2. 有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表，引入一个外部css文件。
内部样式表，将css代码放在<head>标签内部。
内联样式，将css样式直接定义在HTML元素内部。

3. CSS都有哪些选择器？它们的权重如何计算？

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 浏览器默认样式 > 继承

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

display:none;（隐藏后不占位置）
visibility:hidden;（隐藏后依然占位置）
overflow:hidden;
设置宽高为0

5. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A（link,visited,hover,active）。

6. 什么是CSS Hack？ie6,7,8的hack分别是什么？

由于不同厂商的浏览器，或是同一厂商的浏览器的不同版本，对CSS的解析认识不完全一样，针对不同的浏览器写不同的CSS的过程就是CSS Hack。

_background-color:orange;           /*ie6*/
+background-color:pink;                 /*ie7*/
background-color:yellow;                /*ie8*/
:root #test { background-color:purple\9; } /*ie9*/
background-color:red\9;                 /*all ie*/

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

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

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

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

外边距重叠就是margin-collapse

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

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

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

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

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

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

opacity作用于元素，以及元素内的所有内容的透明度。
rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）

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

垂直方向：line-heigh
水平方向：letter-spacing（可以用于消除inline-block元素间的换行符空格间隙问题）

11. 如何垂直居中一个浮动元素？

已知元素的高宽：

#div1{
background-color:red;
width:200px;
height:200px;
position: absolute;       //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px;        //二分之一的height，width
margin-left: -100px;
}

未知元素的高宽：

#div1{
width: 200px;
height: 200px;
background-color: red;

margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}

如何垂直居中一个<img>?（用更简便的方法）

#container //<img>的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}

12. 请简述px和em的区别。

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

13. 描述一个'reset'的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

14. SASS、LESS是什么？大家为什么要使用他们？

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

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
为什么要使用它们？
1. 结构清晰，便于扩展。
2. 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
3. 可以轻松实现多重继承。
4. 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

15. CSS中link和@import的区别是？

Link属于html标签，而@import是CSS中提供的。
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS。
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题。
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

3月3日

1. 简介盒子模型。

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型。
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框。
IE盒子模型：width：content+padding+border

W3C盒子模型：width：content

2. 为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。

但是初始化CSS会对搜索引擎优化造成小影响。

3.BFC是什么?

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。

BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。

4. 如何解决IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。

加入display：inline

5. HTML与XHTML有什么区别？

所有的标记都必须要有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的 XML 标记都必须合理嵌套
所有的属性必须用引号 "" 括起来
把所有 < 和 & 特殊符号用编码表示
给所有属性赋一个值
不要在注释内容中使用 "--"
图片必须有说明文字

6. html常见兼容性问题有哪些？

IE的双边距bug
3px的问题
超链接hove后点击失效
无法定义1px左右的宽度容器（IE6默认的行高造成的，使用overflow:hidden,zoom:0.08 line-height:1px）

IE5-8不支持opacity，解决办法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

7. 谈谈你对web标准及w3c的理解与认识。

标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率，使用外链css和js脚本，结构行为表现的分离，页面下载与加载速度更快，内容能被更多的用户和更广泛的设备访问，更少的代码和组件，容易维护，改版方便，不需要改变页面内容，提供打印版不需要复制页面内容，提高网站的易用性。

8. 行内元素有哪些，块级元素有哪些，css的盒模型包括什么？

行内元素：span input b u i s select
块级元素：div p h1-h6 form ul
css盒模型：内容content + 内边距padding + 边框border + 外边距 margin

9. 前端页面由哪三层构成，它们的作用分别是什么？

HTML负责页面结构，CSS负责样式，JS负责行为

10. 列出display的值，说明它们的作用。position的值，relative和absolute的定位原点分别是？

display：
1. inline：按照行内元素样式显示
2. block：按照块级元素样式显示
3. inline-block：按照行内块级元素样式显示
4. none：隐藏元素
position：
1. static：静态定位，默认值，标准流中的元素都是静态定位
2. relation：相对定位，相对于原来的位置移动，依然占据着原来的位置
3. absolute：绝对定位，若元素没有父元素，或者父元素没有定位，则相对body定位，若父元素有定位（非static），则相对父元素定位，绝对定位的元素脱离标准流
4. fixed：固定定位，相对浏览器边框定位，固定定位的元素也脱离标准流

11. 浏览器标准模式和怪异模式之间的区别是什么?

盒子模型渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

12. 哪些css属性是可以继承的？

color、以font-开头的、以text-开头的、以line-开头的属性可以继承。

13. 行高的单位有哪些？它们有什么区别？

行高的单位有：
1. 具体像素值
2. em
3. 百分号
4. 不带单位
区别：
1. em、百分号、不带单位均是以当前标签字体大小为基数计算
2. 在行高继承时，如果单位是em或者百分号，那么行高会先计算再继承给子元素；如果无单位，则会先继承，再计算。

14. 如何解决margin的塌陷现象？

给大盒子设置一个border或者border-top
给大盒子设置一个overflow：hidden属性
浮动

15. 清除浮动有哪些方法？

额外标签法（会增加标签，一般不用）：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，以此来清除浮动。
使用overflow:hidden属性：找到浮动盒子的父元素，给它添加overflow:hidden属性，即可清除浮动的影响。（一般也不用此方法清除浮动，因为溢出的元素会被隐藏）

使用伪元素清楚浮动：

.clearfix:after {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  overflow: hidden;
  clear: both;
}

3月4日

1. javascript的typeof返回哪些数据类型？

alert(typeof[1,2]);//object
alert(typeof'leipeng');//string
vari=true;
alert(typeofi);//boolean
alert(typeof1);//number
vara;
alert(typeofa);//undefined
functiona(){};
alert(typeofa)//function

2. 列举你知道的强制类型转换和隐式类型转换。

强制转换：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()
隐式转换：加（例外：不能是算式中，而需要加在变量前）减乘除及取余，!!

3. split() 、join() 的区别。

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

4. 数组方法pop() push() unshift() shift()

push()尾部添加、pop()尾部删除、unshift()头部添加、shift()头部删除

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

普通事件：

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

区别：
1. 普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
2. addEventListener不兼容低版本IE
3. 普通事件无法取消
4. addEventLisntener还支持事件冒泡+事件捕获

6. IE和DOM事件流的区别

执行顺序不一样
参数不一样
事件加不加on
this指向问题

7. call和apply的区别

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

8. b继承a的方法。

function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父级方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'侠客行'); 
var a = new B(15,'狼侠','侠客');

9. 如何阻止事件冒泡和默认事件?

canceBubble()只支持IE、return false、stopPropagation()

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

obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

11. javascript的本地对象，内置对象和宿主对象分别是什么？

本地对象为array、obj、regexp 等可以new实例化
内置对象为gload、Math 等不可以实例化的
宿主为浏览器自带的document、window 等

12. window.onload和document.ready的区别？

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

13. "=="和"==="的不同。

前者只比较值，会自动转换类型。
后者比较值和类型。

14. javascript的同源策略。

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

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

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

基本特点：

是一种解释性脚本语言（代码不进行预编译）
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。�
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

3月5日

1. JavaScript的数据类型都有哪些？

基本数据类型：String、boolean、Number、undefined、null
引用数据类型：Object(Array、Date、RegExp、Function)

那么，如何判断某变量是否为数组数据类型？

方法一：判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效。
方法二：obj instanceof Array，在某些IE版本中不正确。

方法三：方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray()，保证其兼容性，最好的方法如下：

if(typeof Array.isArray==="undefined") {
    Array.isArray = function(arg){
      return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

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

document.getElementById('ID').value

3. 希望获取到页面中所有的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]);
　　}
}

4. 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById('ID');
dom.innerHTML = 'xxxx';
dom.style.color = '#000';

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

直接在DOM里绑定事件：<div onclick='test()'></div>
在JS里通过onclick绑定：xxx.onclick=test()
通过事件添加进行绑定：addEventListener(xxx,'click',test())

那么，Javascript的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接收，然后逐级向上传播。
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的。
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。

6. 下列代码输出为何？解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

7.下列代码输出为何？解释原因。

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

null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

8. 下列代码输出什么？解释原因。

var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true

undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

尝试将boolean转换为number，0或1

尝试将Object转换成number或string，取决于另外一个对比量的类型

所以，对于0、空字符串的判断，建议使用“===”。“===”会先判断两边的值类型，类型不匹配时为false。

那么，看下面的代码，输出什么，foo的值为什么？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

执行完后foo的值为111，foo的类型为String。

9. 下列代码输出什么？

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

输出2，引用数据类型传地址。

10. 已知数组var stringArray=['This','is','Baidu','Campus']，Alert出'ThisisBaiduCampus'。

alert(stringArray.join(""));

11. 已知有字符串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;
}

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

实现对该数组的倒排，输出[5,1,4,2,6,3]
```
numberArray.reverse();
```
实现对该数组的降序排列，输出[6,5,4,3,2,1]
```
numberArray.sort(function(a,b){return b-a})
```

13. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2017年1月1日，则输出2017-01-01。

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);

14. 将字符串`"<tr><td>{$id}</td><td>{$name}</td></tr>"`中的`{$id}`替换成10，`{$name}`替换成Tony （使用正则表达式）

"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g,'10').replace(/{\$name}/g,'Tony');

15. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将`<,>,&,“`进行转义。

function escapeHtml(str) {
    return str.replace(/[<>"&]/g, function (match) {
        switch (match) {
            case '<':
                return '<';
            case '>':
                return '>';
            case '&':
                return '&';
            case '\"':
                return '"';
        }
    });
}

3月6日

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

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

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

2. 看下列代码，将会输出什么?(变量声明提升)

var foo = 1;
(function () {
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()

输出 undefined 和 2 。

3. 用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);

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

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

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

创建新节点：

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

添加、移除、替换、插入

appendChild()     //添加
removeChild()     //移除
replaceChild()//替换
insertBefore()//插入

查找：

getElementsByTagName()    //通过标签名称
getElementsByName()   //通过元素的Name属性的值
getElementById()      //通过元素Id，唯一性

6. 有这样一个URL：`http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e`，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按`key-value`形式返回到一个json结构中，如`{a:'1',b:'2',c:'',d:'xxx',e:undefined}`。

function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}

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

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

邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

8. 看下面代码，给出输出结果。�

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i); //4 4 4
    }, 0);
}

原因：Javascript事件处理器在线程空闲之前不会运行。

追问，如何让上述代码输出1 2 3？

for (var i = 1; i <= 3; i++) {
    setTimeout((function (a) { //改成立即执行函数
        console.log(a);
    })(i), 0);
}

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

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"

10. Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

那么，请使用callee完成斐波那契数列。

var result = [];
function fn(n) {
    //典型的斐波那契数列
    if (n == 1) {
        return 1;
    } else if (n == 2) {
        return 1;
    } else {
        if (result[n]) {
            return result[n];
        } else {
            //argument.callee()表示fn()
            result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
            return result[n];
        }
    }
}

11. Javascript中, 以下哪条语句一定会产生运行错误？

A、var _变量=NaN

B、var 0bj= []

C、var obj = //

D、var obj = {}

答案：B C

12. 以下两个变量a和b，a+b的哪个结果是NaN？

A、var a=undefined; b=NaN

B、var a='123'; b=NaN

C、var a=undefined , b=NaN

D、var a=NaN , b='undefined'

答案：A C

13. var a=10; b=20; c=4; ++b+c+a++以下哪个结果是正确的？

A、34 B、35 C、36 D、37

答案：B

14. 下面的JavaScript语句中，（）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空。

A. for (var i = 0; i < form1.elements.length; i++) {
    if (form1.elements.type == "text")
        form1.elements.value = "";
    }
B. for (vari = 0; i < document.forms.length; i++) {
    if (forms[0].elements.type == "text")
        forms[0].elements.value = "";
    }
C. if (document.form.elements.type == "text")
    form.elements.value = "";
D. for (vari = 0; i < document.forms.length; i++) {
    for (var j = 0; j < document.forms.elements.length; j++) {
        if (document.forms.elements[j].type == "text")
            document.forms.elements[j].value = "";
        }
    }

答案：D

15. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是？

A. window.status='已经选中该文本框'

B. document.status='已经选中该文本框'

C. window.screen='已经选中该文本框'

D. document.screen='已经选中该文本框'

答案：A

3月7日

1. 以下哪条语句会产生运行错误？

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;

答案：A D

2. 以下哪个单词不属于javascript保留字？

A.with

B.parent

C.class

D.void