一、理论知识 - [ 前端面试题目搜集 ] - 看云
原文出处：
1.1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
1.2、谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
*1.3、前端 MV框架的意义**
早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。
随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。
如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。
长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。
从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的 MV框架，这个状况会大有改观。
之所以感受不到 MV*框架的重要性，是因为Model部分代码较少，View的相对多一些。如果主要在操作View和Controller，那当然 jQuery 这类库比较好用了。
1.4、请简述盒模型
IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
CSS3中有个属性可以控制盒子的计算方式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
1.5、请你谈谈Cookie的弊端
a. 每个特定的域名下最多生成的cookie个数有限制
b. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
c. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
d. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
1.6、浏览器本地存储
在HTML5中提供了和。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
1.7、web storage和cookie的区别
a. Cookie的大小是受限的
b. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
c. cookie还需要指定作用域，不可以跨域调用
d. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
e. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
f. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
1.8、对BFC规范的理解
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。
BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
利用BFC可以闭合浮动，防止与浮动元素重叠。
1.9、线程与进程的区别
a. 一个程序至少有一个进程，一个进程至少有一个线程
b. 线程的划分尺度小于进程，使得多线程程序的并发性高
c. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
e. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配
1.10、请说出三种减少页面加载时间的方法
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
1.11、你都使用哪些工具来测试代码的性能？
1.12、你遇到过比较难的技术问题是？你是如何解决的？
1.13、常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
1.14、列举IE与其他浏览器不一样的特性？
a. IE的排版引擎是Trident （又称为MSHTML）
b. Trident内核曾经几乎与W3C标准脱节（2005年）
c. Trident内核的大量 Bug等安全性问题没有得到及时解决
d. JS方面，有很多独立的方法，例如绑定事件的attachEvent、创建事件的createEventObject等
e. CSS方面，也有自己独有的处理方式，例如设置透明，低版本IE中使用滤镜的方式
1.15、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
1.16、WEB应用从服务器主动推送Data到客户端有那些方式？
a. html5 websoket
b. WebSocket 通过 Flash
c. XHR长时间连接
d. XHR Multipart Streaming
e. 不可见的Iframe
f. 标签的长时间连接(可跨域)
1.17、对前端界面工程师这个职位是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
1.18、你在现在的团队处于什么样的角色，起到了什么明显的作用？
1.19、你的优点是什么？缺点是什么？
1.20、如何管理前端团队?
1.21、最近在学什么？能谈谈你未来3，5年给自己的规划吗？
1.22、平时如何管理你的项目？
a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
d. 页面进行标注（例如 页面 模块 开始和结束）；
e. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
f. JS 分文件夹存放 命名以该JS功能为准的英文翻译。
g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
1.23、说说最近最流行的一些东西吧？常去哪些网站？
CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
1.24、Flash、Ajax各自的优缺点，在使用中如何取舍？
a. Flash适合处理多媒体、矢量图形、访问机器
b. 对CSS、处理文本上不足，不容易被搜索
a. Ajax对CSS、文本支持很好，支持搜索
b. 多媒体、矢量图形、机器访问不足
a. 与服务器的无刷新传递消息
b. 可以检测用户离线和在线状态
c. 操作DOM
1.25、请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
1.26、AMD和CMD 规范的区别？
AMD 提前执行依赖 - 尽早执行，requireJS 是它的实现
CMD 按需执行依赖 - 懒执行，seaJS 是它的实现
参考《》、《》
1.27、网站重构的理解
重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进行优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
1.28、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
1.29、请介绍下cache-control
每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久
Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires）。
1.30、前端页面有哪三层构成，分别是什么？作用是什么？
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
1.31、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。
1.32、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
1.33、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
1.34、谈谈以前端角度出发做好SEO需要考虑什么？
a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接广泛度（Link Popularity）
f. 合理的标签使用
页面正在加载中微信号：callme_hr
扫码加一览职业生涯导师微信好友
深圳市一览网络股份有限公司（股票代码：833680）
版权所有 &BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
作者：Ico_Coco
字体：[ ] 类型：转载 时间：
很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益
而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。
附上第二篇：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
前面几题是会很基础，越下越有深度。　　
初级Javascript：
　　1.Javascript是一门什么样的语言，它有哪些特点？
　　没有标准答案。　　
　　2.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]"
3.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
代码如下:document.getElementById("ID").value
4.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
var domList = document.getElementsByTagName(‘input')
var checkBoxList = [];
var len = domList.　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox') {
　　checkBoxList.push(domList[len]);
5.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
var dom = document.getElementById("ID”);
dom.innerHTML = "xxxx”
dom.style.color = "#000”
6.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
• 直接在DOM里绑定事件：&div onclick=”test()”&&/div&
• 在JS里通过onclick绑定：xxx.onclick = test
• 通过事件添加进行绑定：addEventListener(xxx, ‘click', test)
　　那么问题来了，Javascript的事件流模型都有什么？
•"事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
•"事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
•"DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
7.什么是Ajax和JSON，它们的优缺点。
　　Ajax是异步Javascript和XML，用于在Web页面中实现异步数据交互。
　　优点：
•可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
•避免用户不断刷新或者跳转页面，提高用户体验
　　缺点：
•对搜索引擎不友好（
•要实现ajax下的前后退功能成本较大
•可能造成请求数的增加
•跨域问题限制
　　JSON是一种轻量级的数据交换格式，ECMA的一个子集
　　优点：轻量级、易于人的阅读和编写，便于机器（Javascript）解析，支持复合数据类型（数组、对象、字符串、数字）
　　8.看下列代码输出为何？解释原因。
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是"undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
9.看下列代码,输出什么？解释原因。
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
10.看下列代码,输出什么？解释原因。
undefined == // true
0 == // true
NaN == NaN; // false
[] == // 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的类型为Number。
var foo = "11"+2+"1"; //体会加一个字符串'1' 和 减去一个字符串'1'的不同
console.log(foo);
console.log(typeof foo);　　执行完后foo的值为1121(此处是字符串拼接)，foo的类型为String。
11.看代码给答案。
var a = new Object();
a.value = 1;
b.value = 2;
alert(a.value);　　
答案：2（考察引用数据类型细节）
12.已知数组var stringArray = ["This”, "is”, "Baidu”, "Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(" "))
那么问题来了，已知有字符串foo="get-element-by-id",写一个function将其转化成驼峰表示法"getElementById"。
function combo(msg){
var arr = msg.split("-");
var len = arr.
//将arr.length存储在一个局部变量可以提高for循环效率
for(var i=1;i&i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
msg=arr.join("");
(考察基础API)
13.var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){ //6,5,4,3,2,1
return b-a;
14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是日，则输出
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month & 10 ? '0' + month :
var day = d.getDate();
day = day & 10 ? '0' + day :
alert(year + '-' + month + '-' + day);
15.将字符串”&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');　　　　
16.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&, &, &, "进行转义
function escapeHtml(str) {
return str.replace(/[&&”&]/g, function(match) {
switch (match) {
case "&”:
return "&”;
case "&”:
return "&”;
case "&”:
return "&”;
case "\””:
return "&”;
17.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
18.看下列代码，将会输出什么?(变量声明提升)
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
function(){
console.log(foo); //undefined
console.log(foo); // 2;
函数声明与变量声明会被Javascript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
19.用js实现随机选取10--100之间的10个数字，存入一个数组，并排序。
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice +
for(var i=0; i&10; i++){
iArray.push(getRandom(10,100));
iArray.sort();
20.把两个数组合并，并删除第二个元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
　　1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
　　2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
　　3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
22.有这样一个URL：/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 result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map. i & i++) {
result[map[i].split("=")[0]] = map[i].split("=")[1];
23.正则表达式构造函数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})$/;
24.看下面代码，给出输出结果。
for(var i=1;i&=3;i++){
setTimeout(function(){
console.log(i);
答案：4 4 4。
　　原因：Javascript事件处理器在线程空闲之前不会运行。那么问题来了，如何让上述代码输出1 2 3？
for(var i=1;i&=3;i++){
setTimeout((function(a){ //改成立即执行函数
console.log(a);
25.写一个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"
26.Javascript中callee和caller的作用？
　　答案：
　　caller是返回一个对函数的引用，该函数调用了当前函数；
　　callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
　　那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）
var result=[];
function fn(n){ //典型的斐波那契数列
}else if(n==2){
if(result[n]){
return result[n];
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
中级Javascript：
　　1.实现一个函数clone，可以对Javascript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
•考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
•考察点2：是否知道如何判断一个变量是什么类型的
•考察点3：递归算法的设计
// 方法一：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
//方法二：
* 克隆一个对象
* @param Obj
* @returns
function clone(Obj) {
if (Obj instanceof Array) {
//创建一个空的数组
var i = Obj.
while (i--) {
buf[i] = clone(Obj[i]);
}else if (Obj instanceof Object){
//创建一个空对象
for (var k in Obj) {
//为这个对象添加新的属性
buf[k] = clone(Obj[k]);
//普通变量直接赋值
2.如何消除一个数组里面重复的元素？
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
var newArr=[];
var obj={};
var index=0;
var l=arr.
for(var i=0;i&l;i++){
if(obj[arr[i]]==undefined)
obj[arr[i]]=1;
newArr[index++]=arr[i];
else if(obj[arr[i]]==1)
return newA
var newArr2=deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25
3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
function Dog() {
this.wow = function() {
alert('Wow');
this.yelp = function() {
this.wow();
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
　　答案：
function MadDog() {
this.yelp = function() {
var self =
setInterval(function() {
self.wow();
MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
4.下面这个ul，如何点击每一列的时候alert其index?（闭包）
&ul id=”test”&
&li&这是第一条&/li&
&li&这是第二条&/li&
&li&这是第三条&/li&
// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i&3;i++)
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i&3;i++)
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
5.编写一个Javascript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
　　/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/
　　答案：（过长，点击打开）
var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
result.push(document.getElementById(regResult[3]));
//如果是class选择器
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === 'function') {
var doms = document.getElementsByClassName(regResult[3]);
if(doms) {
result = converToArray(doms);
//如果不支持getElementsByClassName函数
var allDoms = document.getElementsByTagName("*") ;
for(var i = 0, len = allDoms. i & i++) {
if(allDoms[i].className.search(new RegExp(regResult[2])) & -1) {
result.push(allDoms[i]);
//如果是标签选择器
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {
result = converToArray(doms);
function converToArray(nodes){
var array =
array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes. i & i++ ) {
array.push(nodes[i])
6.请评价以下代码并给出改进意见。
if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
•不应该在if和else语句中声明addListener函数，应该先声明；
•不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
•由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
　　改进如下：
function addEvent(elem, type, handler){
　　if(elem.addEventListener){
　　　　elem.addEventListener(type, handler, false);
　　}else if(elem.attachEvent){
　　　　elem['temp' + type + handler] =
　　　　elem[type + handler] = function(){
　　　　elem['temp' + type + handler].apply(elem);
　　elem.attachEvent('on' + type, elem[type + handler]);　
　　elem['on' + type] =
7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
　　addSpace("hello world") // -& 'h e l l o w o r l d'
String.prototype.spacify = function(){
return this.split('').join(' ');
接着上述答题，那么问题来了
　　1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　
　　2）函数声明与函数表达式的区别？　
　　答案：在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。（函数声明提升）
　　8.定义一个log方法，让它可以代理console.log的方法。
　　可行的方法一：
function log(msg)　{
console.log(msg);
log("hello world!") // hello world!
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
function log(){
console.log.apply(console, arguments);
那么问题来了，apply和call方法的异同？
　　对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
　　但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。
　　9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
　　答案：
　　伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
　　假设接第八题题干，我们要给每个log方法添加一个"(app)"前缀，比如'hello world!' -&'(app)hello world!'。方法如下：
function log(){
var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
10.对作用域上下文和this的理解，看下列代码：
var User = {
getCount: function() {
return this.
console.log(User.getCount()); // what?
var func = User.getC
console.log(func()); // what?
问两处console输出什么？为什么？
　　答案是1和undefined。
　　func是在winodw的上下文中被执行的，所以会访问不到count属性。
　　那么问题来了，如何确保Uesr总是能访问到func的上下文，即正确返回1。
　　答案：正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：
Function.prototype.bind = Function.prototype.bind || function(context){
var self =
return function(){
return self.apply(context, arguments);
var func = User.getCount.bind(User);
console.log(func());
11.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
　　window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
　　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
var whenReady = (function() {
//这个函数返回whenReady()函数
var funcs = [];
//当获得事件时，要运行的函数
var ready =
//当触发事件处理程序时,切换为true
//当文档就绪时,调用事件处理程序
function handler(e) {
//确保事件处理程序只完整运行一次
//如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
//运行所有注册函数
//注意每次都要计算funcs.length
//以防这些函数的调用可能会导致注册更多的函数
for(var i=0; i&funcs. i++) {
funcs[i].call(document);
//事件处理函数完整执行,切换ready状态, 并移除所有函数
//为接收到的任何事件注册处理程序
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false);
window.addEventListener('load', handler, false);
}else if(document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('onload', handler);
//返回whenReady()函数
return function whenReady(fn) {
if(ready) { fn.call(document); }
else { funcs.push(fn); }
如果上述代码十分难懂，下面这个简化版：
function ready(fn){
if(document.addEventListener) {
//标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
//执行函数
}, false);
}else if(document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
//函数执行
12.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
　　回答出概念即可，下面是几个要点
1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
2.mousedown事件触发后，开始拖拽
3.mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4.mouseup时，拖拽结束
5.需要注意浏览器边界的情况
function setcookie(name,value,days){ //给cookie增加一个时间变量
　　var exp = new Date();
　　exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
function getCookie(name){
　　var result = "";
　　var myCookie = ""+document.cookie+";";
　　var searchName = "+name+"=";
　　var startOfCookie = myCookie.indexOf(searchName);
　　var endOfC
　　if(satrtOfCookie != -1){
　　　　startOfcookie += searchName.
　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);
　　　　result = (myCookie.substring(startOfCookie,endOfCookie));
(function(){
　　var oTips = document.getElementById('tips');//假设tips的id为tips
　　var page = {
　　check: function(){//检查tips的cookie是否存在并且允许显示
　　　　var tips = getCookie('tips');
　　　　if(!tips || tips == 'show')//tips的cookie不存在
　　　　if(tips == "never_show_again")
　　hideTip: function(bNever){
　　　　if(bNever) setcookie('tips', 'never_show_again', 365);
　　　　oTips.style.display = "none";//隐藏
　　showTip: function(){
　　oTips.style.display = "inline";//显示，假设tips为行级元素
　　init: function(){
　　　　var _this =
　　　　if(this.check()){
　　　　_this.showTip();
　　　　setcookie('tips', 'show', 1);
　　oTips.onclick = function(){
　　　　_this.hideTip(true);
page.init();
14.说出以下函数的作用是？空白区域应该填写什么？
(function(window){
function fn(str){
fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
window.fn =
})(window);
(function(){
var t = new fn('&p&&a href="{0}"&{1}&/a&&span&{2}&/span&&/p&');
console.log(t.format('','Alibaba','Welcome'));
答案：访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：
第一个空是：arguments
第二个空是：/\{(\d+)\}/ig
15.用面向对象的Javascript来介绍一下自己。（没答案哦亲，自己试试吧）
答案： 对象或者Json都是不错的选择哦。
16.讲解原生Js实现ajax的原理。
Ajax 的全称是Asynchronous Javascript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
XMLHttpRequest这个对象的属性有：
• onreadystatechang 每次状态改变所触发事件的事件处理程序。
• responseText 从服务器进程返回数据的字符串形式。
• responseXML 从服务器进程返回的DOM兼容的文档数据对象。
• status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
• status Text 伴随状态码的字符串信息
• readyState 对象状态值
• 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
• 1 (初始化) 对象已建立，尚未调用send方法
• 2 (发送数据) send方法已调用，但是当前的状态及http头未知
• 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
• 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
下面简单封装一个函数：（略长，点击打开）
url: "./TestXHR.aspx",
//请求地址
type: "POST",
//请求方式
data: { name: "super", age: 20 },
//请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
fail: function (status) {
// 此处放失败后执行的代码
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.
if (status &= 200 && status & 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
options.fail && options.fail(status);
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
上述代码大致表述了ajax的过程，释义自行google，问题未完，那么知道什么是Jsonp和pjax吗？
　　答案：
　　Jsonp：(JSON with Padding)是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。
　　pjax：pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。（关键点：可以实现ajax无法实现的后退功能）pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。
觉得题目还ok的亲点个推荐哦，题量会不断增加。
　　你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
　　暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具