面试题集锦（JS-v3）

130、请问代码实现 outerHTML

//说明：outerHTML其实就是innerHTML再加上本身；

Object.prototype.outerHTML = function(){

var innerCon = this.innerHTML, //获得里面的内容

outerCon = this.appendChild(innerCon); //添加到里面

alert(outerCon);

}

演示代码：

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

hello

</div>

Object.prototype.outerHTML = function(){

var innerCon = this.innerHTML, //获得里面的内容

outerCon = this.appendChild(innerCon); //添加到里面

alert(outerCon);

}

function $(id){

return document.getElementById(id);

}

alert($('outer').innerHTML);

alert($('outer').outerHTML);

</script>

</body>

</html>

131、JS中的简单继承 call方法！

//顶一个父母类，注意：类名都是首字母大写的哦！

function Parent(name, money){

this.name = name;

this.money = money;

this.info = function(){

alert('姓名： '+this.name+' 钱： '+ this.money);

}

//定义孩子类

function Children(name){

Parent.call(this, name); //继承姓名属性，不要钱。

this.info = function(){

alert('姓名： '+this.name);

}

//实例化类

var per = new Parent('parent', 800000000000);

var chi = new Children('child');

per.info();

chi.info();

132、bind(), live(), delegate()的区别

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

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

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

最佳实现：on() off()

133、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

134、简述link和import的区别？

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

135、window.onload 和 document.ready的区别？

load要等到图片和包含的文件都加在进来之后执行；

ready是不包含图片和非文字文件的文档结构准备好就执行；

136、解析URL成一个对象？

String.prototype.urlQueryString = function(){

var url = this.split('?')[1].split('&'),

len = url.length;

this.url = {};

for(var i = 0; i < len; i += 1){

var cell = url[i].split('='),

key = cell[0],

val = cell[1];

this.url[''+key+''] = val;

}

return this.url;

}

var url = '?name=12&age=23';

console.log(url.urlQueryString().age);

137、看下列代码输出什么？

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

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

138、看下列代码,输出什么？

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);

执行完后输出结果为2

139、已知数组var stringArray = ["This”, "is”, "Baidu”, "Campus”]，Alert出”This is Baidu Campus”。

答案：alert(stringArray.join(" "))

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

答案：function combo(msg){

var arr = msg.split("-");

var len = arr.length; //将arr.length存储在一个局部变量可以提高for循环效率

for(var i=1;i<len;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

142、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？

　　window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

143、你如何优化自己的代码？

代码重用

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

拆分函数避免函数过于臃肿：单一职责原则

适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程

内存管理，尤其是闭包中的变量释放

144、请描述出下列代码运行的结果

function d(){

console.log(this);

}

d();//window

145、需要将变量e的值修改为“a+b+c+d”,请写出对应的代码

var e=”abcd”;

设计一段代码能够遍历下列整个DOM节点

<div>

<p>

</p>

<ul>

</ul>

</div>

146、怎样实现两栏等高？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="container" style="display: table;width: 100%;">

        <div id="left" style="display: table-cell;">

            内容<br/>

            内容<br/>

            内容<br/>

            内容<br/>

            内容<br/>

            内容<br/>

        </div>

        <div style="display:table-cell;"></div>

        <div id="right" style="display: table-cell">

            内容

        </div>

    </div>

</body>

</html>

147、使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).

textarea.onkeydown=function(e){

e.preventDefault();//为了阻止enter键的默认换行效果

if(e.keycode==”enter键码”){

testarea.value+=”{{enter}}”;

}

148、以下代码中end字符串什么时候输出

var t=true;

setTimeout(function(){

console.log(123);

t=false;

},1000);

while(t){}// 此时是一个死循环，永远不可能执行setTimeout中的回调函数

console.log(‘end’);

149、specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数

function specify(str){

    var tempArray =  Array.prototype.filter.call(str,function(value,index,array){

        return value >= 'A' &&  value <= 'z' && value != "_";

    });

    return tempArray.join(",");

}



console.log(specify("hedd____df*(%$#a !!!))))))llo,Wo@@@r        ld")); //h,e,l,l,o,W,o,r,l,d

150、请将一个URL的search部分参数与值转换成一个json对象

//search部分的参数格式：a=1&b=2&c=3

151、请用原生js实现jquery的get\post功能，以及跨域情况下

152、请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？

//参见雅虎14web优化规则

//减少http请求：

//1、小图弄成大图，2、合理的设置缓存

//3、资源合并、压缩

//将外部的js文件置底

153、简述readyonly与disabled的区别

readonly只针对input(text / password)和textarea有效，

而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

155、编写一个方法，去掉一个数组的复重元素

156、写出3个使用this的典型应用

构造函数中使用this，原型中使用this，对象字面量使用this

157、请尽可能详尽的解释ajax的工作原理

思路：先解释异步，再解释ajax如何使用

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

158、为什么扩展javascript内置对象不是好的做法？

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

159、请解释一下javascript的同源策略

域名、协议、端口相同

160、什么是三元表达式？“三元”表示什么意思？

? :

因为运算符会涉及3个表达式

161、浏览器标准模式和怪异模式之间的区别是什么？

标准模式是指，浏览器按W3C标准解析执行代码；

怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式

162、如果设计中使用了非标准的字体，你该如何去实现？

先通过font-face定义字体，再引用

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */

}

163、用css分别实现某个div元素上下居中和左右居中

margin:0 auto;

164、module(12,5)//2 实现满足这个结果的modulo函数

function modulo(a,b){
return a%b;//return a/b;
}

165、HTTP协议中，GET和POST有什么区别？分别适用什么场景？

get传送的数据长度有限制，post没有

get通过url传递，在浏览器地址栏可见，post是在报文中传递

适用场景：

post一般用于表单提交

get一般用于简单的数据查询，严格要求不是那么高的场景

166、HTTP状态消息200 302 304 403 404 500分别表示什么

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

302：请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的

304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

403：服务器已经理解请求，但是拒绝执行它。

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

500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

167、HTTP协议中，header信息里面，怎么控制页面失效时间（last-modified,cache-control,Expires分别代表什么）

Last-Modified	文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置。
Expires	应该在什么时候认为文档已经过期，从而不再缓存它？

168、HTTP协议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？

http1.0

http1.1 keeplive

169、业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）

170、列举常用的web页面开发，调试以及优化工具

sublime vscode webstorm hbuilder dw

httpwatch=>ie

ff:firebug

chrome:

171、解释什么是sql注入，xss漏洞

172、如何判断一个js变量是数组类型

ES5:Array.isArray()

[] instanceof Array

Object.prototype.toString.call([]);//"[object Array]"

173、请列举js数组类型中的常用方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

174、FF与IE中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素

175、列举常用的js框架以及分别适用的领域

jquery：简化了js的一些操作，并且提供了一些非常好用的API

jquery ui、jquery-easyui：在jqeury的基础上提供了一些常用的组件日期，下拉框，表格这些组件

require.js、sea.js（阿里的玉帛）+》模块化开发使用的

zepto：精简版的jquery，常用于手机web前端开发提供了一些手机页面实用功能,touch

ext.js：跟jquery差不多，但是不开源，也没有jquery轻量

angular、knockoutjs、avalon(去哪儿前端总监)：MV*框架，适合用于单页应用开发(SPA)

176、js中如何实现一个map

数组的map方法：

概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法

array.map(callback[, thisArg])

参数

callback

原数组中的元素经过该方法后返回一个新的元素。

currentValue

callback 的第一个参数，数组中当前被传递的元素。

index

callback 的第二个参数，数组中当前被传递的元素的索引。

array

callback 的第三个参数，调用 map 方法的数组。

thisArg

执行 callback 函数时 this 指向的对象。

实现：

Array.prototype.map2=function(callback){
    for (var i = 0; i < this.length; i++) {
        this[i]=callback(this[i]);
    }
};

177、js可否实现面向对象编程，如果可以如何实现js对象的继承

创建对象的几种方式

实现继承的几种方式

原型链

178、约瑟夫环—已知n个人（以编号1，2，3…分别表示）围坐在一张圆桌周围。从编号为k的人开始报数，数到m的那个人出列；他的下一个人又从1开始报数，数到m的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。

179、有1到10w这个10w个数，去除2个并打乱次序，如何找出那两个数？

180、如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）

Object.keys——IE9+

或者使用for…in并过滤出继承的属性

for(o in obj){

if(obj.hasOwnproperty(o)){

//把o这个属性放入到一个数组中

}

181、有下面这样一段HTML结构，使用css实现这样的效果：

左边容器无论宽度如何变动，右边容器都能自适应填满父容器剩余的宽度。

</div>

182、下面这段代码想要循环昝输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果

for(var i=0;i<5;++i){

setTimeout(function(){

console.log(i+’’);

},100*i);

}

183、解释下这个css选择器什么发生什么？

[role=nav]>ul a:not([href^-mailto]){}

184、JavaScript以下哪条语句会产生运行错误

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

答案：AD

185、以下哪些是javascript的全局函数：（ABCDE）

A. escape 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。ECMAScript v3 反对使用该方法，应用使用 decodeURI() 和 decodeURIComponent() 替代它。

B. parseFloat parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

C. eval 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

D. setTimeout

E. alert

186、关于IE的window对象表述正确的有：（CD）

A. window.opener属性本身就是指向window对象

window.opener返回打开当前窗口的那个窗口的引用.

如果当前窗口是由另一个窗口打开的, window.opener保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null.

B. window.reload()方法可以用来刷新当前页面 //正确答案：应该是location.reload或者window.location.reload

C. window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面

D. 定义了全局变量g；可以用window.g的方式来存取该变量

187、描述错误的是 D

A：Http状态码302表示暂时性转移对

B:domContentLoaded事件早于onload事件 //正确

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

C: IE678不支持事件捕获

D:localStorage 存储的数据在电脑重启后丢失 //错误，因为没有时间限制

try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)

188、关于link和@import的区别正确的是 A

A: link属于XHTML标签，而@import是CSS提供的；

B：页面被加载时，link会同时被加载，而后者引用的CSS会等到页面被加载完再加载

C：import只在IE5以上才能识别而link是XHTML标签，无兼容问题

D: link方式的样式的权重高于@import的权重

189、下面正确的是 A

A: 跨域问题能通过JsonP方案解决

B：不同子域名间仅能通过修改window.name解决跨域 //还可以通过script标签src jsonp

C：只有在IE中可通过iframe嵌套跨域 //任何浏览器都可以使用iframe

D：MediaQuery属性是进行视频格式检测的属性是做响应式的

188、错误的是：AC

A: Ajax本质是XMLHttpRequest //异步请求json和xml数据

B: 块元素实际占用的宽度与它的width、border、padding属性有关，与background无关

C: position属性absolute、fixed、---relative---会使文档脱标

D: float属性left也会使div脱标

189、不用任何插件，如何实现一个tab栏切换？

通过改变不同层的css设置层的显示和隐藏

190、基本数据类型的专业术语以及单词拼写

191、变量的命名规范以及命名推荐

192、三种弹窗的单词以及三种弹窗的功能

alert

confirm

prompt

193、console.log( 8 | 1 ); 输出值是多少？

答案：9

194、只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。

答案：

function f(x, a, b) {

var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));

return a * temp + b * (1 - temp);

}

console.log(f(-10, 1, 2));

195、JavaScript alert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？

有误差，应该比准确结果偏大。一般我会将小数变为整数来处理。当前之前遇到这个问题时也上网查询发现有人用try catch return写了一个函数，

当然原理也是一致先转为整数再计算。看起来挺麻烦的，我没用过。

196、一个div，有几种方式得到这个div的jQuery对象？<div class='aabbcc' id='nodesView'></div>想直接获取这个div的dom对象，如何获取？dom对象如何转化为jQuery对象？

var domView=document.getElementById(“nodesView”)

document.getElementsByClassName(“aabbcc”);

document.querySelector(“.aabbcc#nodesView”);

转换为jquery对象：$( domView)

197、主流浏览器内核

IE trident 火狐gecko 谷歌苹果webkit

Opera：Presto

198、如何显示/隐藏一个dom元素？请用原生的JavaScript方法实现

dom.style.display=”none”;

dom.style.display=””;

199、JavaScript有哪几种数据类型

Number String Boolean Null Undefined Object

200、jQuery框架中$.ajax()的常用参数有哪些？

type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url

类型：String

默认值: 当前页地址。发送请求的地址。

success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

options

类型：Object

可选。AJAX 请求设置。所有选项都是可选的。

async

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)

类型：Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

cache

类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

contentType

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter

类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

error

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。

写一个post请求并带有发送数据和返回数据的样例

$.ajax({
    url:"1.html",
    data:{name:"张三",age:18},//post数据
    dataType:"json",
    type:"POST",
    success:function(data){
        //data：返回的数据
    },
    error:function(){
        //异常处理
    }
});

201、JavaScript数组元素添加、删除、排序等方法有哪些？

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

202、如何添加html元素的事件，有几种方法？请列举

a、直接在标签里添加：<div onclick=”alert(你好)”>这是一个层</div>

b、在元素上通过js添加:

c、使用事件注册函数添加

203、JavaScript的循环语句有哪些？

while for do while for…in

204、作用域-编译期执行期以及全局局部作用域问题

理解js执行主要的两个阶段：预解析和执行期

205、闭包：下面这个ul，如何点击每一列的时候alert其index？

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

//非闭包实现

var lis=document.querySelectorAll('li');
document.querySelector('#test').onclick=function(e){
    for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        if(li==e.target){
            alert(i);
        }
    }
};

//闭包实现

var lis=document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    li.onclick=(function(index){
        return function(e){
            alert(index);
        };
    })(i);
}

206、列出3条以上ff和IE的脚本兼容问题

1、在IE下可通过document.frames["id"];得到该IFRAME对象，

而在火狐下则是通过document.getElementById("content_panel_if").contentWindow;

2、IE的写法： _tbody=_table.childNodes[0]

在FF中，firefox会在子节点中包含空白则第一个子节点为空白""，而ie不会返回空白

可以通过if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件

if(document.all){ //ie下

document.getElementById("a3").click();

}

else{ //非IE

var evt = document.createEvent("MouseEvents");

evt.initEvent("click", true, true);

document.getElementById("a3").dispatchEvent(evt);

}

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

207、列举可以哪些方面对前端开发进行优化

代码压缩、合并减少http请求，图片制作精灵图、代码优化

208、至少列出一种JavaScript继承的实现方式

209、如现在有一个效果，有显示用户头像、用户昵称、用户其他信息；当用户鼠标移到头像上时，会弹出用户的所有信息；如果是你，你会如何实现这个功能，请用代码实现？

//答案见：J:\代码,PPT,笔记,电子书\面试题\面试题02.html

210、call与apply有什么作用？又有什么什么区别？用callee属性实现函数递归？

apply的参数是数组,call的参数是单个的值，除此之外，两者没有差别，重点理解this的改变，callee已经不推荐使用

211、用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？

var reg=/^[a-ZA-Z][\da-zA-Z_]{5,29}/;

212、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个（10分）

对象：window document location screen history navigator

方法：alert() confirm() prompt() open() close() setInterval() setTimeout() clearInterval() clearTimeout()

(详细参见：J:\代码,PPT,笔记,电子书\面试题\window对象方法.png)

214、对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：?apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。?如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。

215、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

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

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

216、写一个函数可以计算 sum(5,0,-5);输出0; sum(1,2,3,4);输出10;

function calc(){
    var result=0;
    for (var i = 0; i < arguments.length; i++) {
        var obj = arguments[i];
        result+=obj;
    }
    return result;
}
alert(calc(1,2,3,4));

Js基本功

217、事件代理怎么实现？

在元素的父节点注册事件，通过事件冒泡，在父节点捕获事件

218、《正则》写出正确的正则表达式匹配固话号，区号3-4位，第一位为0，中横线，7-8位数字，中横线，3-4位分机号格式的固话号

常用正则表达式语法要熟悉

/0[0-9]{2,3}-\d{7,8}/

219、《算法》一下A,B可任选一题作答，两题全答加分

A:农场买了一只羊，第一年是小羊，第二年底生一只，第三年不生，第四年底再生一只，第五年死掉。

B:写出代码对下列数组去重并从大到小排列{5,2,3,6,8,6,5,4,7,1,9}

先去重再排序

去重方法参考：J:\代码,PPT,笔记,电子书\面试题

220、请写出一张图片的HTML代码，已知道图片地址为“images/abc.jpg”,宽100px，高50px

221、请写一个正则表达式：要求最短6位数，最长20位，阿拉伯数和英文字母（不区分大小写）组成

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$

222、统计1到400亿之间的自然数中含有多少个1？比如1-21中，有1、10、11、12、13、14、15、16、17、18、19、20、21这么多自然数有13个1

答案参考：J:\代码,PPT,笔记,电子书\面试题\面试题_222.html

223、删除与某个字符相邻且相同的字符，比如fdaffdaaklfjklja字符串处理之后成为“fdafdaklfjklja”

答案参考：J:\代码,PPT,笔记,电子书\面试题\面试题_223.html

224、请写出三种以上的Firefox有但InternetExplorer没有的属性和函数

1、在IE下可通过document.frames["id"];得到该IFRAME对象，

而在火狐下则是通过document.getElementById("content_panel_if").contentWindow;

2、IE的写法： _tbody=_table.childNodes[0]

在FF中，firefox会在子节点中包含空白则第一个子节点为空白""，而ie不会返回空白

可以通过if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件

if(document.all){ //ie下

document.getElementById("a3").click();

}

else{ //非IE

var evt = document.createEvent("MouseEvents");

evt.initEvent("click", true, true);

document.getElementById("a3").dispatchEvent(evt);

}

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

225、请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到：http://127.0.0.1/save.php

答案参考：J:\代码,PPT,笔记,电子书\面试题\面试题_225.html

226、用JavaScript实现冒泡排序。数据为23、45、18、37、92、13、24

面试经常遇到的排序，查找算法要熟悉

227、解释一下什么叫闭包，并实现一段闭包代码

简单理解就是函数的嵌套形成闭包，闭包包括函数本身及其外部作用域

228、简述一下什么叫事件委托以及其原理

在元素的父节点注册事件，通过事件冒泡，在父节点捕获事件

229、前端代码优化的方法

var User = { 对象

count = 1，属性

getCount：function（）{ 方法

return this.count;

}

console.log(User.getCount());

var func = User.getCount;

console.log(func());

1 undefined（window）;

posted @ 2017-01-14 10:42 波吉大王子阅读(987) 评论(0) 收藏举报

大云🐶

面试题集锦（JS-v3）

130、请问代码实现 outerHTML

131、JS中的简单继承 call方法！

132、bind(), live(), delegate()的区别

133、typeof 的返回类型有哪些？

134、简述link和import的区别？

135、window.onload 和 document.ready的区别？

136、 解析URL成一个对象？

137、看下列代码输出什么？

138、看下列代码,输出什么？

139、已知数组var stringArray = ["This”, "is”, "Baidu”, "Campus”]，Alert出”This is Baidu Campus”。

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

142、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？

143、你如何优化自己的代码？

144、请描述出下列代码运行的结果

145、需要将变量e的值修改为“a+b+c+d”,请写出对应的代码

146、怎样实现两栏等高？

147、使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).

148、以下代码中end字符串什么时候输出

149、specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数

150、请将一个URL的search部分参数与值转换成一个json对象

151、请用原生js实现jquery的get\post功能，以及跨域情况下

152、请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？

153、简述readyonly与disabled的区别

155、编写一个方法，去掉一个数组的复重元素

156、写出3个使用this的典型应用

157、请尽可能详尽的解释ajax的工作原理

158、为什么扩展javascript内置对象不是好的做法？

159、请解释一下javascript的同源策略

160、什么是三元表达式？“三元”表示什么意思？

161、浏览器标准模式和怪异模式之间的区别是什么？

162、如果设计中使用了非标准的字体，你该如何去实现？

163、用css分别实现某个div元素上下居中和左右居中

164、module(12,5)//2 实现满足这个结果的modulo函数

165、HTTP协议中，GET和POST有什么区别？分别适用什么场景 ？

166、HTTP状态消息200 302 304 403 404 500分别表示什么

167、HTTP协议中，header信息里面，怎么控制页面失效时间（last-modified,cache-control,Expires分别代表什么）

168、HTTP协议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？

169、业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）

170、列举常用的web页面开发，调试以及优化工具

171、解释什么是sql注入，xss漏洞

172、如何判断一个js变量是数组类型

173、请列举js数组类型中的常用方法

174、FF与IE中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素

175、列举常用的js框架以及分别适用的领域

176、js中如何实现一个map

概述

语法

参数

177、js可否实现面向对象编程，如果可以如何实现js对象的继承

179、有1到10w这个10w个数，去除2个并打乱次序，如何找出那两个数？

180、如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）

181、有下面这样一段HTML结构，使用css实现这样的效果：

182、下面这段代码想要循环昝输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果

183、解释下这个css选择器什么发生什么？

184、JavaScript以下哪条语句会产生运行错误

185、以下哪些是javascript的全局函数：（ABCDE）

186、关于IE的window对象表述正确的有：（CD）

187、描述错误的是 D

188、关于link和@import的区别正确的是 A

189、下面正确的是 A

188、错误的是：AC

189、不用任何插件，如何实现一个tab栏切换？

190、基本数据类型的专业术语以及单词拼写

191、变量的命名规范以及命名推荐

192、三种弹窗的单词以及三种弹窗的功能

193、console.log( 8 | 1 ); 输出值是多少？

194、只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。

195、JavaScript alert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？

196、一个div，有几种方式得到这个div的jQuery对象？<div class='aabbcc' id='nodesView'></div>想直接获取这个div的dom对象，如何获取？dom对象如何转化为jQuery对象？

197、主流浏览器内核

198、如何显示/隐藏一个dom元素？请用原生的JavaScript方法实现

199、JavaScript有哪几种数据类型

200、jQuery框架中$.ajax()的常用参数有哪些？

写一个post请求并带有发送数据和返回数据的样例

201、JavaScript数组元素添加、删除、排序等方法有哪些？

202、如何添加html元素的事件，有几种方法？请列举

203、JavaScript的循环语句有哪些？

204、作用域-编译期执行期以及全局局部作用域问题

136、解析URL成一个对象？

165、HTTP协议中，GET和POST有什么区别？分别适用什么场景？

212、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个（10分）

219、《算法》一下A,B可任选一题作答，两题全答加分