JavaScript 习题及面试题 2

我不是女神ヾ 2022-11-15 14:04 245阅读 0赞

# 149. #

\[问答题\]

编写一个方法 求一个字符串的字节长度。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

假设：一个英文字符占用一个字节，一个中文字符占用两个字节。

function GetBytes(str)\{

var len = str.length; var bytes = len;

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

if (str.charCodeAt(i) > 255) bytes++;

return bytes;

alert(GetBytes("你好,as"));

# 150. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

var arr = \[1 ,1 ,2, 3, 3, 2, 1\];

Array.prototype.unique = function()\{

var ret = \[\]; var o = \{\};

var len = this.length; for (var i=0; i<len; i++)\{

var v = this\[i\]; if (!o\[v\])\{

o\[v\] = 1;

ret.push(v);

return ret;

\};

alert(arr.unique());

# 151. #

\[问答题\]

写出 3 个使用 this 的典型应用。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

1）在 html 元素事件属性中使用，如:

<input type=”button” οnclick=”showInfo(this);” value=”点击一下”/> 2）构造函数

function Animal(name, color) \{

this.name = name; this.color = color;

3）

var btn = document.getElementById("text"); btn.onclick = function() \{

alert(this.value); //此处的 this 是按钮元素

</script>

4）CSS expression 表达式中使用this 关键字

<tr>

<td>

<div style="width:expression(this.parentNode.width);">div element</div>

</td>

</tr>

</table>

# 152. #

\[问答题\]

如何显示/隐藏一个 DOM 元素？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

el.style.display = ""; el.style.display = "none";

el 是要操作的 DOM 元素。

# 153. #

\[问答题\]

JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

String 类型有两种生成方式：

1.  Var str = “hello world”;
2.  Var str2 = new String(“hello world”); function IsString(str)\{

return (typeof str == "string" || str.constructor == String);

var str = ""; alert(IsString(1)); alert(IsString(str));

alert(IsString(new String(str)));

# 154. #

\[问答题\]

网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“×

×年还剩××天××时××分××秒”。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

<!DOCTYPE        HTML        PUBLIC        "-//W3C//DTD        HTML        4.01        Transitional//EN" "[http://www.w3.org/TR/html4/loose.dtd"][http_www.w3.org_TR_html4_loose.dtd]>

<html>

<head>

</head>

<body>

var date = new Date();

var year = date.getFullYear();

var date2 = new Date(year, 12, 31, 23, 59, 59); var time = (date2 - date)/1000;

var day =Math.floor(time/(24\*60\*60))

var hour = Math.floor(time%(24\*60\*60)/(60\*60))

var minute = Math.floor(time%(24\*60\*60)%(60\*60)/60); var second = Math.floor(time%(24\*60\*60)%(60\*60)%60);

var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒"; document.getElementById("input").value = str;

window.setInterval("counter()", 1000);

</script>

</body>

</html>

# 155. #

\[问答题\]

补充代码，鼠标单击 Button1 后将 Button1 移动到 Button2 的后面。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

<div>

</div>

function moveBtn(obj) \{

var clone = obj.cloneNode(true); var parent = obj.parentNode; parent.appendChild(clone); parent.removeChild(obj);

</script>

# 156. #

\[问答题\]

JavaScript 有哪几种数据类型。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

简单：Number，Boolean，String，Null，Undefined 复合：Object，Array，Function

# 157. #

\[问答题\]

下面 css 标签在 JavaScript 中调用应如何拼写，border-left-color，-moz-viewport。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

borderLeftColor mozViewport

# 158. #

\[问答题\]

JavaScript 中如何对一个对象进行深度 clone。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

function cloneObject(o) \{

if(!o || 'object' !== typeof o) \{ return o;

var c = 'function' === typeof o.pop ? \[\] : \{\}; var p, v;

for(p in o) \{

if(o.hasOwnProperty(p)) \{ v = o\[p\];

if(v && 'object' === typeof v) \{ c\[p\] = Ext.ux.clone(v);

else \{

c\[p\] = v;

return c;

\};

# 159. #

\[问答题\]

如何控制 alert 中的换行。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

\\n alert(“p\\np”);

# 160. #

\[问答题\]

请实现，鼠标点击页面中的任意标签，alert 该标签的名称．（注意兼容性）。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

<!DOCTYPE        html         PUBLIC        "-//W3C//DTD         XHTML         1.0        Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]>

<head>

<title>鼠标点击页面中的任意标签，alert 该标签的名称</title>

<style>

div\{ background:\#0000FF;width:100px;height:100px;\} span\{ background:\#00FF00;width:100px;height:100px;\}

p\{ background:\#FF0000;width:100px;height:100px;\}

</style>

var tag = e\["target"\] || e\["srcElement"\]; alert(tag.tagName);

\};

</script>

</head>

<body>

</body>

</html>

# 161. #

\[问答题\]

请编写一个JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：var url = “[http://witmax.cn/index.php?key0=0&key1=1&key2=2][http_witmax.cn_index.php_key0_0_key1_1_key2_2]″;

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

function parseQueryString(url)\{

var params = \{\};

var arr = url.split("?"); if (arr.length <= 1)

return params; arr = arr\[1\].split("&");

for(var i=0, l=arr.length; i<l; i++)\{

var a = arr\[i\].split("=");

params\[a\[0\]\] = a\[1\];

return params;

var url = "[http://witmax.cn/index.php?key0=0&key1=1&key2=2][http_witmax.cn_index.php_key0_0_key1_1_key2_2]"; var ps = parseQueryString(url);

alert(ps\["key1"\]);

# 162. #

\[问答题\]

ajax 是什么? ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

Ajax 是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http 调用，并且用收到的数据来更新一个当前 web 页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：

XHTML：对应 W3C 的XHTML 规范，目前是 XHTML1.0。CSS：对应 W3C 的 CSS 规范，目前是 CSS2.0

DOM：这里的 DOM 主要是指 HTML DOM，XML DOM 包括在下面的XML 中

JavaScript：对应于 ECMA 的 ECMAScript 规范

XML：对应 W3C 的XML DOM、XSLT、XPath 等等规范

XMLHttpRequest     ：  对  应   WhatWG        的   Web        Applications1.0        规  范

（[http://whatwg.org/specs/web-apps/current-work/][http_whatwg.org_specs_web-apps_current-work]）

同步：脚本会停留并等待服务器发送回复然后再继续异步：脚本允许页面继续其进程并处理可能的回复

跨域问题简单的理解就是因为 JS 同源策略的限制，a.com 域名下的 JS 无法操作 b.com

或 c.a.com 下的对象，具体场景如下：

PS：

1.  如果是端口或者协议造成的跨域问题前端是无能为力的
2.  在跨域问题上，域仅仅通过 URL 的首部来识别而不会尝试判断相同的 IP 地址对应的域或者两个域是否对应一个 IP

前端对于跨域的解决办法：

1.  document.domain+iframe
2.  动态创建 script 标签

# 163. #

\[问答题\]

什么是闭包？下面这个 ul，如何点击每一列的时候 alert 其 index?

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

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

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

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

</ul>

内部函数被定义它的函数的外部区域调用的时候就产生了闭包。

(function A() \{

var index = 0;

var ul = document.getElementById("test"); var obj = \{\};

for (var i = 0, l = ul.childNodes.length; i < l; i++) \{

if (ul.childNodes\[i\].nodeName.toLowerCase() == "li") \{ var li = ul.childNodes\[i\];

li.onclick = function() \{ index++; alert(index);

\})();

# 164. #

\[问答题\]

请给出异步加载 js 方案，不少于两种。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

默认情况 javascript 是同步加载的，也就是 javascript 的加载时阻塞的，后面的元素要等待 javascript 加载完毕后才能进行再加载，对于一些意义不是很大的 javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

异步加载方式：

1.  defer，只支持 IE
2.  async：
3.  创建 script，插入到 DOM 中，加载完毕后 callBack，见代码： function loadScript(url, callback)\{

var script = document.createElement("script") script.type = "text/javascript";

if (script.readyState)\{ //IE

script.onreadystatechange = function()\{ if (script.readyState == "loaded" ||

script.readyState

== "complete")\{

script.onreadystatechange = null;

callback();

\};

\} else \{ //Others: Firefox, Safari, Chrome, and Opera

script.src = url;

script.onload = function()\{ callback();

\};

# 165. #

document.body.appendChild(script);

\[问答题\]

请设计一套方案，用于确保页面中 JS 加载完全。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

var n = document.createElement("script"); n.type = "text/javascript";

//以上省略部分代码

//ie 支持 script 的readystatechange 属性

if(ua.ie)\{

n.onreadystatechange = function()\{ var rs = this.readyState;

if('loaded' === rs || 'complete'===rs)\{ n.onreadystatechange = null; f(id,url); //回调函数

\};

//省略部分代码

//safari 3.x supports the load event for script nodes(DOM2) n.addEventListener('load',function()\{

f(id,url);

\});

//firefox and opera support onload(but not dom2 in ff) handlers for

//script nodes. opera, but no ff, support the onload event for link

//nodes.

\}else\{

n.onload = function()\{ f(id,url);

\};

# 166. #

\[问答题\]

js 中如何定义 class,如何扩展 prototype?

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

Ele.className =  “\*\*\*”; //\*\*\*在 css 中定义，形式如下：.\*\*\* \{„\} A.prototype.B = C;

A 是某个构造函数的名字B 是这个构造函数的属性C 是想要定义的属性的值

# 167. #

\[问答题\]

如何添加 html 元素的事件,有几种方法.

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

1.  为 HTML 元素的事件属性赋值
2.  在 JS 中使用ele.on\*\*\* = function() \{„\}
3.  使用 DOM2 的添加事件的方法 addEventListener 或 attachEvent

# 168. #

\[问答题\]

documen.write 和 innerHTML 的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

document.write 只能重绘整个页面。

innerHTML 可以重绘页面的一部分。

# 169. #

\[问答题\]

多浏览器检测通过什么？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

1.  navigator.userAgent
2.  不同浏览器的特性，如 addEventListener

# 170. #

\[问答题\]

js 的基础对象有那些, window 和 document 的常用的方法和属性列出来。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参 考 ： String,Number,Boolean Window:

方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open 属性：name,parent,screenLeft,screenTop,self,top,status

Document

方                                   法                                   ： createElement,execCommand,getElementById,getElementsByName,getElementByTagName,writ e,writeln

属性：cookie,doctype,domain,documentElement,readyState,URL,

# 171. #

\[问答题\]

前端开发的优化问题。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

1.  减少 http 请求次数：css spirit,data uri
2.  JS，CSS 源码压缩
3.  前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX

请求结果，每次操作本地变量，不用请求，减少请求次数

1.  用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化javascript 性能
2.  用 setTimeout 来避免页面失去响应
3.  用 hash-table 来优化查找
4.  当需要设置的样式很多时设置 className 而不是直接操作style
5.  少用全局变量
6.  缓存 DOM 节点查找的结果

1.  避免使用 CSS Expression
2.  图片预载
3.  避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢

# 172. #

\[问答题\]

如何控制网页在网络传输过程中的数据量。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷提示：

启用GZIP 压缩

保持良好的编程习惯，避免重复的 CSS，JavaScript 代码，多余的 HTML 标签和属性

# 173. #

\[问答题\]

Flash、Ajax 各自的优缺点，在使用中如何取舍？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷提示：

Ajax 的优势

1.  可搜索性
2.  开放性
3.  费用
4.  易用性
5.  易于开发

Flash 的优势

1.  多媒体处理
2.  兼容性
3.  矢量图形 比 SVG，Canvas 优势大很多
4.  客户端资源调度，比如麦克风，摄像头

# 174. #

\[问答题\]

写出 Math Array String 的方法。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题参考：无

# 175. #

\[问答题\]

http 状态码都有哪些。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

404: 页面不存在

301: 永久转移

……

越多越好, 可以反映你基础

# 176. #

\[问答题\]

反转字符串。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提 示 ： str.split('').reverse().join('')

# 177. #

\[问答题\]

把字符串的单词放到数组中。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

arr =     str.split(/\\s+/);

怎么把标点符号也去掉

str.replace(/\[^\\w\]/,' ').split(/\\s+/);

字符串包括数字, 不要把数字也去掉

# 178. #

\[问答题\]

表格的的语义化标签。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

....

# 179. #

\[问答题\]

遍历表格, 把 td 内容连接。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

getElementsByTagName 两个 for 循环。或

使用 innerHTML

# 180. #

\[问答题\]

对二维数组的某个进行排序。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

arr.sort(a,b)\{ return a\[0\] > b\[0\] \}

# 181. #

\[问答题\]

设计一套方案判断 css 加载完成。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题参考：无

# 182. #

\[问答题\]

ie 标准浏览器事件对象。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

ev|| window.eveng srcElement target         捕获ie 只支持冒泡

# 183. #

\[问答题\]

ajax 的底层, 原生怎么搞。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

readystate : 4 ,    0 1 2 3 4 这几种状态, status : 200 判断正确返回数据response 有几种属性

json 类型字符串返回后怎么转换成对象? json.parse

ie 怎么处理

ie6,7 引入 json.js

# 184. #

\[问答题\]

数组去重, 原型扩展, 两种方法

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

Array.prototype.unqie = function()\{

var arr = this, len=this.length, obj=\{\}, newArr=\[\];

while(--len>=0)\{

if(obj\[ arr\[len\] \] !== arr\[len\]\{

obj\[arr\[len\]\] = arr\[len\];        newArr.push( arr\[len\]);

return newArr.reverse();

# 185. #

\[问答题\]

图片, 内容延时加载。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

用 scrolltop 判断有没到第二屏, 然后后 ajax 去取数据

……

# 186. #

\[问答题\]

如何在 ie 下模拟 DOMContentLoad 事件。

\----------------------------------------------------------------------------------------------------------------------------

来自：腾讯最新前端面试题提示：

创建一个指向空的 src=http://void(0);     defer,      ie 支持这个用 defer, 浏览器再 DOM 加载完才触发, 所以在 script 的 readstate == "complete" 的时候说明 DOM 已经加载完成了

另 一 种 方 法 看 了 一 下 是 用 定 时 器 ,   当       try\{ (document.documentElemnt || document.body).doscroll("left") \} 也说明加载完了

# 187. #

\[问答题\]

请看以下代码，按照下面的要求回答

if(window.addEventListener)\{

var fn = function (type,fn,useCapture)\{ el.addEventListener(type,fn,useCapture);

else if(window.attachEvent)\{

fn = function (type,fn)\{ el.attachEvent('on'+type,);

a)以上代码的作用。b)以上代码的优点。

c)以上代码中的问题，如果你有更好的，请把它编写出来。

\----------------------------------------------------------------------------------------------------------------------------

来自：淘宝 UED Web 前端开发面试题参考：

考察对事件绑定的深入理解。

1.  以上代码主要是为 HTML 元素绑定一个事件，并且兼容 IE 和 DOM 标准下的浏览器。
2.  以上代码的优点是做到的了事件绑定的兼容性。
3.  以上代码中 fn 这个变量是在 DOM 标准下的浏览器中才会声明，在 IE 下它将是一个全局变量。

简单的编写：

function bind(el, type, fn, useCapture)\{

if (window.addEventListener) \{

el.addEventListener(type, function()\{

fn.apply(el, arguments);//始终将 this 指向 DOM

\}, useCapture);

else if (window.attachEvent) \{

el.attachEvent('on' + type, function()\{ fn.apply(el, arguments);//始终将 this 指向 DOM

\});

var el = document.getElementById('demo'); var test = function()\{

alert(this.nodeName);

bind(el, 'click', test);

注意代码中的注释部分。因为在符合 DOM 标准的浏览器中，addEventListener 方法将把this 指针指向绑定的函数，而 IE 中 attachEvent 方法将始终指向 widow 对象，为了将 this 指针始终指向当前绑定事件的DOM，我们必须要使用apply 或者call 方法来改变函数的作用域。

# 188. #

\[问答题\]

请计算下面变量的值：

var a= (Math.PI++); var b = (Math.PI++); alert(a);

alert(b);

\----------------------------------------------------------------------------------------------------------------------------

来自：淘宝 UED Web 前端开发面试题提示：

考察对 javascript 中 Math 对象的深入理解。

# 189. #

\[问答题\]

注释的代码是否可以实现？如不能实现，请修改

function test()\{

this.name = 'taobao'; this.waitMes = function ()\{

//隔 5 秒钟执行this.name

\----------------------------------------------------------------------------------------------------------------------------

来自：淘宝 UED Web 前端开发面试题参考：

考察 javascript 闭包。

function test()\{

this.name = 'taobao';

var waitMes = function ()\{

// 每 隔 5 秒 钟 执 行 this.name setTimeout(function ()\{alert(self.name)\},5000);

return waitMes;

var \_test = test();

\_test();

# 190. #

\[问答题\]

要求：

1、只能在指定的位置填写自己的代码，本文件里的其他代码不能修改

2、所有题目都不允许添加全局变量名

3、本文件应该能在 firebug 的 console 里正常执行，并输出结果

4、代码最优化，效率最高

5、代码注释明确

实现一个遍历数组或对象里所有成员的迭代器。

var each = function(obj, fn)\{

//+++++++++++答题区域+++++++++++

\};

try\{

//+++++++++++答题结束+++++++++++

var data1 = \[4,5,6,7,8,9,10,11,12\];

var data2 = \{

"a": 4,

"b": 5,

"c": 6

\};

console.group(data1); each(data1, function(o)\{

if( 6 == this )

return true; else if( 8 == this )

return false;

console.log(o + ": \\"" + this + "\\"");

\});

console.groupEnd();

/\*------\[执行结果\]------

1: "4"

2: "5"

4: "7"

\------------------\*/

console.group(data2); each(data2, function(v, n)\{

if( 5 == this )

return true; console.log(n + ": \\"" + v + "\\"");

\}catch(e)\{

\});

console.groupEnd();

/\*------\[执行结果\]------

a: "4"

c: "6"

\------------------\*/

console.error("执行出错，错误信息: " + e);

\----------------------------------------------------------------------------------------------------------------------------

来自：搜狐 JavaScript 面试题参考：无

# 191. #

\[问答题\]

要求：

1、只能在指定的位置填写自己的代码，本文件里的其他代码不能修改

2、所有题目都不允许添加全局变量名

3、本文件应该能在 firebug 的 console 里正常执行，并输出结果

4、代码最优化，效率最高

5、代码注释明确

实现一个叫 Man 的类，包含attr, words, say 三个方法。

var Man;

//+++++++++++答题区域+++++++++++

//+++++++++++答题结束+++++++++++

try\{

var me = Man(\{ fullname: "小红" \});

var she = new Man(\{ fullname: "小红" \}); console.group();

console.info(" 我的名字是：" + me.attr("fullname") + "\\n 我的性别是：" + me.attr("gender"));

console.groupEnd();

/\*------\[执行结果\]------

我的名字是：小红

我的性别是：<用户未输入>

\------------------\*/

me.attr("fullname", "小明");

me.attr("gender", "男"); me.fullname = "废柴"; me.gender = " 人 妖 "; she.attr("gender", "女"); console.group();

console.info(" 我的名字是：" + me.attr("fullname") + "\\n 我的性别是：" + me.attr("gender"));

console.groupEnd();

/\*------\[执行结果\]------

我的名字是：小明我的性别是：男

\------------------\*/

console.group();

console.info(" 我的名字是：" + she.attr("fullname") + "\\n 我的性别是：" + she.attr("gender"));

console.groupEnd();

/\*------\[执行结果\]------

我的名字是：小红我的性别是：女

\------------------\*/

me.attr(\{

"words-limit": 3,

"words-emote": "微笑"

\});

me.words(" 我 喜 欢 看 视 频 。 "); me.words("我们的办公室太漂亮了。"); me.words("视频里美女真多！"); me.words("我平时都看优酷！"); console.group();

console.log(me.say());

/\*------\[执行结果\]------

小明微笑："我喜欢看视频。我们的办公室太漂亮了。视频里美女真多！"

\------------------\*/

me.attr(\{

\});

"words-limit": 2,

"words-emote": "喊"

console.log(me.say()); console.groupEnd();

/\*------\[执行结果\]------

小明喊："我喜欢看视频。我们的办公室太漂亮了。"

\------------------\*/

\}catch(e)\{

console.error("执行出错，错误信息: " + e);

\----------------------------------------------------------------------------------------------------------------------------

来自：搜狐 JavaScript 面试题参考：无

# 192. #

\[问答题\]

要求：

1、只能在指定的位置填写自己的代码，本文件里的其他代码不能修改

2、所有题目都不允许添加全局变量名

3、本文件应该能在 firebug 的 console 里正常执行，并输出结果

4、代码最优化，效率最高

5、代码注释明确

实现一个 URI 解析方法，把 url 里\#之后的参数解析成指定的数据结构。

function urlParser(s)\{

//+++++++++++答题区域+++++++++++

try\{

//+++++++++++答题结束+++++++++++

var url1 = "[http://www.abc.com/m/s/\#page/2/?type=latest\_videos&page\_size=20][http_www.abc.com_m_s_page_2_type_latest_videos_page_size_20]";

var url2 = "[http://www.abc.com/m/s/\#type=latest\_videos&page\_size=20][http_www.abc.com_m_s_type_latest_videos_page_size_20]";

var url3 = "[http://www.abc.com/m/s/\#page?type=latest\_videos&page\_size=20][http_www.abc.com_m_s_page_type_latest_videos_page_size_20]"; console.group();

console.info( urlParser(url1) ); console.info( urlParser(url2) ); console.info( urlParser(url3) ); console.groupEnd();

/\*------\[执行结果\]------

\["page", "2", \{ "type": "latest\_videos", "page\_size": 20 \}\] \[\{ "type": "latest\_videos", "page\_size": 20 \}\]

\["page", \{ "type": "latest\_videos", "page\_size": 20 \}\]

\------------------\*/

\}catch(e)\{

console.error("执行出错，错误信息: " + e);

\----------------------------------------------------------------------------------------------------------------------------

来自：搜狐 JavaScript 面试题参考：无

# 193. #

\[问答题\]

javascript 的 typeof 返回哪些数据类型。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

Object number function boolean underfind

# 194. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

强制（parseInt,parseFloat,number） 隐式（== – ===）

# 195. #

\[问答题\]

split() join()的区别

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

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

# 196. #

\[问答题\]

数组方法 pop() push() unshift() shift()。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

Push()尾部添加 pop()尾部删除。Unshift()头部添加 shift()头部删除。

# 197. #

\[问答题\]

事件绑定和普通事件有什么区别，IE 和 DOM 事件流的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

1.  执行顺序不一样、
2.  参数不一样
3.  事件加不加 on 4.this 指向问题

# 198. #

\[问答题\]

IE 和标准下有哪些兼容性的写法。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth Var target = ev.srcElement||ev.target

# 199. #

\[问答题\]

ajax 请求的时候 get 和 post 方式的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

一个在 url 后面 一个放在虚拟载体里面。有大小限制。

安全问题。

应用不同：一个是论坛等只需要请求的，一个是类似修改密码的。

# 200. #

\[问答题\]

call 和 apply 的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)

# 201. #

\[问答题\]

ajax 请求时，如何解释 json 数据。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

使用eval、parse，鉴于安全性考虑 使用 parse 更靠谱。

# 202. #

\[问答题\]

写一个获取非行间样式的函数。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

function getStyle(obj,attr,value)

if(!value)

if(obj.currentStyle)

return obj.currentStyle(attr)

else

obj.getComputedStyle(attr,false)

else

obj.style\[attr\]=value

# 203. #

\[问答题\]

事件委托是什么。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。

# 204. #

\[问答题\]

闭包是什么，有什么特性，对页面有什么影响。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题参考：

闭包就是能够读取其他函数内部变量的函数。

# 205. #

\[问答题\]

如何阻止事件冒泡和默认事件。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

canceBubble return false

# 206. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild

# 207. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

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

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

# 208. #

\[问答题\]

javascript 的本地对象，内置对象和宿主对象。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

提示：

本地对象为 array obj regexp 等可以 new 实例化。内置对象为 gload Math 等不可以实例化的。

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

# 209. #

\[问答题\]

document load 和 document ready 的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

Document.onload 是在结构和样式加载完才执行 js

Document.ready 原生种没有这个方法，jquery 中有 $().ready(function)

# 210. #

\[问答题\]

==和===”的不同。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

前者会自动转换类型。后者不会。

# 211. #

\[问答题\]

javascript 的同源策略。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

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

# 212. #

\[问答题\]

编写一个数组去重的方法。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题提示：

function oSort(arr)

var result =\{\}; var newArr=\[\];

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

if(!result\[arr\])

newArr.push(arr) result\[arr\]=1

return newArr

# 213. #

\[问答题\]

下面代码的输出值是？

alert(1&&2);

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题一面参考：无

# 214. #

\[问答题\]

正则表达式匹配，开头为 11N, 12N 或 1NNN，后面是-7-8 个数字的电话号码。

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题一面参考：无

# 215. #

\[问答题\]

写出下面代码的输出值：

var   obj  =  \{  a:  1,         b: function () \{console.log(this.a)\}\};var a = 2;var objb = obj.b;obj.b();objb();obj.b.call(window);

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题一面参考：无

# 216. #

\[问答题\]

写出下列代码的输出值：

function  A()  \{\}function  B(a)  \{         this.a  =  a;\}function  C(a)  \{         if (a)  \{         thia.a = a;                        \}\}A.prototype.a = 1;B.prototype.a = 1;C.prototype.a = 1;console.log(new A());console.log(new B());console.log(new C(2));

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题一面参考：无

# 217. #

\[问答题\]

写出下列代码的输出值：

var  a  =  1;function  b()  \{         var  a  =  2;         function  c()  \{       console.log(a); \} return c;\}b()();

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题一面参考：无

# 218. #

\[问答题\]

已知圆心(x,y)，求圆上任一点(x1,y1)的坐标。

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题二面参考：无

# 219. #

\[问答题\]

随机抛五枚硬币，求三枚及以上朝上的概率。

\----------------------------------------------------------------------------------------------------------------------------

来自：奇虎 360Web 前端开发工程师面试题二面参考：无

# 220. #

\[问答题\]

JS 主要数据类型？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和

undefined。

# 221. #

\[问答题\]

CSS 的 JS 调用？如 font-family, -moz-border-radius 。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

fontFamily、MozBorderRadius

# 222. #

\[问答题\]

js 对象的深度克隆？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参 考 ： Object.prototype.deepClone=function()\{

function cloneObj()\{\} cloneObj.prototype=this; var obj=new cloneObj(); for(var o in obj)\{

if(typeof(obj\[o\])=="object") obj\[o\]=obj\[o\].deepClone();

return obj;

# 223. #

\[问答题\]

动态打印时间，格式为 yyyy-MM-dd hh:mm:ss?

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

function printTime()\{

var timer1=new Date();

var timer=timer1.toLocaleString(); timer=timer.replace(/\[年月\]/g,"-"); timer=timer.replace(/ 日 /,""); time.innerHTML=timer;

setInterval("printTime()",1000);

# 224. #

\[问答题\]

如何提高网页运行性能？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：无

# 225. #

\[问答题\]

linux 下删除当前目录下扩展名为 c 的文件（如 a.c，b.c）。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

rm –r \*.c

find . -name “\*.doc” -type f -exec cp \{\} /tmp/doc \\;       找到当前目录（.）下扩展名为(doc) 的文件并拷贝到指定目录【注意-type f 指普通文件，-exec ls-l\{\}列出文件，最后加上\\】

cp \[options\] source dest 复制

# 226. #

\[问答题\]

flash as2.0 和 flash as3.0 在面向对象方面的异同？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

面向对象方面，2.0 像 javascript，3.0 像 java。

到了 AS 2.0, 面向对象被引入了，但它实质上是动态脚本语言，虽然已经有了类的概念和 class 关键字，但对象支持还是基于类似 JavaScript 的 prototype 机制——动态继承。

3.0 同时支持静态类型，即基于类的继承方式；以及动态类型，即基于 prototype  的继承方式。推荐用静态类型。

# 227. #

\[问答题\]

Flash、Ajax 各自的优缺点，在使用中如何取舍？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘 web 前端开发面试题参考：

Flash 适合处理多媒体、矢量图形、访问机器；对 CSS、处理文本上不足，不容易被搜索。Ajax 对 CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作 DOM

# 228. #

\[问答题\]

用 [javascript ][javascript]优化布局。由于我们的用户群喜欢放大看页面，于是我们给页面布局做一次优化。当鼠标略过某个区块的时候，该区块会放大 25%，并且其他的区块仍然固定不动。

提示：

也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。

[关键字][Link 1]：

[javascript][]、封装、复用

\----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 Web 前端开发面试题参考：无

# 229. #

\[不定项选择题\]

声明一个对象，给它加上 name 属性和 show 方法显示其 name 值，以下代码中正确的是（）

1.  var obj = \[name:"zhangsan",show:function()\{alert(name);\}\];
2.  var obj = ,name:”zhangsan”,show:”alert(this.name)”-;
3.  var obj = ,name:”zhangsan”,show:function(),alert(name);--;
4.  var obj = ,name:”zhangsan”,show:function(),alert(this.name);--;

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：D

# 230.   #

\[不定项选择题\]

以下关于 Array 数组对象的说法不正确的是（ ）

1.  对数组里数据的排序可以用 sort 函数，如果排序效果非预期，可以给 sort 函数加一个排序函数的参数
2.  reverse 用于对数组数据的倒序排列
3.  向数组的最后位置加一个新元素，可以用 pop 方法
4.  unshift 方法用于向数组删除第一个元素

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：CD

# 231. #

\[不定项选择题\]

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

1.  window.status=”已经选中该文本框”
2.  document.status=”已经选中该文本框”
3.  window.screen=”已经选中该文本框”
4.  document.screen=”已经选中该文本框”

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：A

# 232. #

\[不定项选择题\]

点击页面的按钮，使之打开一个新窗口，加载一个网页，以下 JavaScript 代码中可行的是（ ）

1.  1.  <input type=”button” value=”new” οnclick=”open(‘new.html’, ‘\_blank’)”/>
    2.  <input type=”button” value=”new” οnclick=”window.location=’new.html’;”/>
    3.  <input type=”button” value=”new” οnclick=”location.assign(‘new.html’);”/> D.

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题

答案：AD

# 233. #

\[不定项选择题\]

使用 JavaScript 向网页中输出 hello，以下代码中可行的是（ ）

1.  document.write(hello);
2.  document.write(“hello”);
3.  hello
4.  document.write(“hello”);

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：BD

# 234. #

\[不定项选择题\]

分析下面的代码：

function writeIt (value) \{ document.myfm.first\_text.value=value;\}

以下说法中正确的是（ ）

1.  在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变
2.  在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容
3.  在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容
4.  在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：CD

# 235. #

\[不定项选择题\]

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

1.  for(vari=0;i< form1.elements.length;i++) \{ if(form1.elements.type==”text”)

form1.elements.value=”";-

1.  for(vari=0;i<document.forms.length;i++) \{ if(forms\*0+.elements.type==”text”)

forms\*0+.elements.value=”";

1.  if(document.form.elements.type==”text”) form.elements.value=”";
2.  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

# 236. #

\[不定项选择题\]

在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：010-82668155， 要求前 3 位是 010，紧接一个“-”，后面是 8 位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中，（ ）能正确实现以上功能。

1.  var str= form1.fname.value;

if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 || isNaN(parseFloat(str.substr(4))))

alert(“无效的电话号码！”);

1.  var str= form1.fname.value;

if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 && isNaN(parseFloat(str.substr(4))))

alert(“无效的电话号码！”);

1.  var str= form1.fname.value;

if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 || isNaN(parseFloat(str.substr(3))))

alert(“无效的电话号码！”);

1.  var str= form1.fname.value;

if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&

!isNaN(parseFloat(str.substr(4)))) alert(“无效的电话号码！”);

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：A

# 237. #

\[不定项选择题\]

关于正则表达式声明 6 位数字的邮编，以下代码正确的是（ ）

1.  var reg = /\\d6/;
2.  var reg = \\d\{6\}\\;
3.  var reg = /\\d\{6\}/;
4.  var reg = new RegExp(“\\d,6-”);

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：C

# 238. #

\[不定项选择题\]

关于 JavaScript 里的 xml 处理，以下说明正确的是（ ）

1.  Xml 是种可扩展标记语言，格式更规范，是作为未来 html 的替代
2.  Xml 一般用于传输和存储数据，是对 html 的补充，两者的目的不同
3.  在 JavaScript 里解析和处理 xml 数据时，因为浏览器的不同，其做法也不同
4.  在 IE 浏览器里处理 xml，首先需要创建 ActiveXObject 对象

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题答案：BCD

# 239. #

\[问答题\]

列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

对象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

# 240. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

Document.getElementById 根据元素 id 查找元素Document.getElementByName 根据元素 name 查找元素Document.getElementTagName 根据指定的元素名查找元素

# 241. #

\[问答题\]

JavaScript 原型，原型链 ? 有什么特点？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 242. #

\[问答题\]

eval 是做什么的？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

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

# 243. #

\[问答题\]

null，undefined 的区别？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 244. #

\[问答题\]

Node.js 的适用场景？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题提示：

高并发、聊天、实时消息推送

# 245. #

\[问答题\]

介绍 js 的基本数据类型

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题提示：

number,string,boolean,object,undefined

# 246. #

\[问答题\]

Javascript 如何实现继承？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题提示：

通过原型和构造器

# 247. #

\[问答题\]

\[“1″, “2”, “3”\].map(parseInt) 答案是多少？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

\[1, NaN, NaN\]

因为 parseInt  需要两个参数 (val, radix)，其中 radix  表示解析时用的基数。map  传了 3

个(element, index, array)，对应的 radix 不合法导致解析失败。

# 248. #

\[问答题\]

如何创建一个对象? （画出此对象的内存图）

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

function Person(name, age) \{ this.name = name; this.age = age;

this.sing = function() \{ alert(this.name) \}

# 249. #

\[问答题\]

谈谈 this 对象的理解。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。但是有一个总原则，那就是 this 指的是调用函数的那个对象。

this 一般情况下：是全局对象Global。 作为方法调用，那么 this 就是指这个对象

# 250. #

\[问答题\]

什么是闭包（closure），为什么要用它？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

执行 say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得 Javascript 的垃圾回收机制 GC 不会收回 say667()所占用的资源，因为 say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.

function say667() \{

// Local variable that ends up within closure var num = 666;

var sayAlert = function() \{ alert(num); \} num++;

return sayAlert;

var sayAlert = say667();

sayAlert()//执行结果应该弹出的 667

# 251. #

\[问答题\]

“use strict”;是什么意思 ? 使用它的好处和坏处分别是什么？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 252. #

\[问答题\]

如何判断一个对象是否属于某个类？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

使用 instanceof （待完善）

if(a instanceof Person)\{ alert('yes');

# 253. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

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

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

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

var obj     = \{\};

obj.    proto      = Base.prototype; Base.call(obj);

# 254. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

hasOwnProperty

# 255. #

\[问答题\]

JSON 的了解？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小

\{'age':'12', 'name':'back'\}

# 256. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

defer 和 async、动态创建 DOM 方式（用得最多）、按需异步载入 js

# 257. #

\[问答题\]

模块化怎么做？立即执行函数,不暴露私有成员

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

var module1 = (function()\{

var \_count = 0;

var m1 = function()\{

//...

\};

var m2 = function()\{

//...

\};

return \{

m1 : m1, m2 : m2

\};

\})();

# 258. #

\[问答题\]

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 259. #

\[问答题\]

异步加载的方式有哪些？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

1.  defer，只支持 IE
2.  async：
3.  创建 script，插入到 DOM 中，加载完毕后 callBack

# 260. #

\[问答题\]

documen.write 和 innerHTML 的区别。

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

# 261. #

\[问答题\]

.call() 和 .apply() 的区别？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

function add(a,b)

alert(a+b);

function sub(a,b)

alert(a-b);

add.call(sub,3,1);

# 262. #

\[问答题\]

Jquery 与 jQuery UI 有啥区别？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

\*jQuery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。

\*jQuery UI 则是在 jQuery 的基础上，利用 jQuery 的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

# 263. #

\[问答题\]

JQuery 的源码看过吗？能不能简单说一下它的实现原理？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

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

jQuery 中没有提供这个功能，所以你需要先编写两个 jQuery 的扩展：

$.fn.stringifyArray = function(array) \{ return JSON.stringify(array)

$.fn.parseArray = function(array) \{ return JSON.parse(array)

然后调用：

$("").stringifyArray(array)

# 264. #

\[问答题\]

针对 jQuery 的优化方法？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

\*基于 Class 的选择性的性能相对于 Id 选择器开销很大，因为需遍历所有 DOM 元素。

\*频繁操作的 DOM，先缓存起来再操作。用 Jquery 的链式调用更好。如：var str=$("a").attr("href"); \*for (var i = size; i < arr.length; i++) \{\}

for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for (var i = size, length = arr.length; i < length; i++) \{\}

# 265. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 266. #

\[问答题\]

如何编写高性能的 Javascript？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 267. #

\[问答题\]

那些操作会造成内存泄漏？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

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

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

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

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

# 268. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：无

# 269. #

\[问答题\]

如何判断当前脚本运行在浏览器还是 node 环境中？

\----------------------------------------------------------------------------------------------------------------------------

来自：阿里前端开发工程师面试题参考：

通过判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器

中

# 270. #

\[问答题\]

对 Node 的优点和缺点提出了自己的看法？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

\*（优点）因为 Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求， 因此构建在 Node 上的代理服务器相比其他技术实现（如 Ruby）的服务器表现要好得多。 此外， 与 Node 代理服务器交互的客户端代码是由 javascript 语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

\*（缺点）Node 是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails 当年的样子。

# 271. #

\[问答题\]

你有哪些性能优化的方法？（看雅虎 14 条性能优化原则）

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

1.  减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip， CDN 托管，data 缓存 ，图片服务器。
2.  前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX

请求结果，每次操作本地变量，不用请求，减少请求次数

1.  用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化javascript 性能。
2.  当需要设置的样式很多时设置 className 而不是直接操作style。
3.  少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
4.  避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
5.  图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
6.  避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。

# 272. #

\[问答题\]

http 状态码有那些？分别代表是什么意思？

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。

1.  1、语义有误，当前请求无法被服务器理解。
2.  当前请求需要用户验证

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

500-599 用于支持服务器错误。 503 – 服务不可用

# 273. #

\[问答题\]

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

\----------------------------------------------------------------------------------------------------------------------------

来自：前端开发工程师练习题参考：

查找浏览器缓存

DNS 解析、查找该域名对应的 IP 地址、重定向（301）、发出第二个 GET 请求进行 HTTP 协议会话

客户端发送报头(请求报头) 服务器回馈报头(响应报头) html 文档开始下载

文档树建立，根据标记请求所需指定 MIME 类型的文件文件显示

\{浏览器这边做的工作大致分为以下几步：

加载：根据请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

解析：对加载到的资源（HTML、JS、CSS 等）进行语法解析，建议相应的内部数据结构

（比如 HTML 的 DOM 树，JS 的（对象）属性表，CSS 的样式规则等等）\}

# 274. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考： 没有标准答案。

# 275. #

\[问答题\]

JavaScript 的数据类型都有什么？如何判断某变量是否为数组数据类型？

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集

参考：

基本数据类型：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\]"

\};

# 276. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

document.getElementById(“ID”).value

# 277. #

\[问答题\]

希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

var domList = document.getElementsByTagName(‘input’) var checkBoxList = \[\];

var len = domList.length;         //缓存到局部变量

while (len--) \{          //使用 while 的效率会比 for 循环更高

if (domList\[len\].type == ‘checkbox’) \{ checkBoxList.push(domList\[len\]);

# 278. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

var dom = document.getElementById(“ID”); dom.innerHTML = “xxxx”

dom.style.color = “\#000”

# 279. #

\[问答题\]

当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？Javascript 的事件流模型都有什么？

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

*  直接在 DOM 里绑定事件：<div οnclick=”test()”></div>
 *  在 JS 里通过 onclick 绑定：xxx.onclick = test
 *  通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) Javascript 的事件流模型：

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

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

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

# 280. #

\[问答题\]

什么是 Ajax 和 JSON，它们的优缺点。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

Ajax 是异步 JavaScript 和 XML，用于在Web 页面中实现异步数据交互。优点：

*  可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
 *  避免用户不断刷新或者跳转页面，提高用户体验缺点：

*  对搜索引擎不友好（
 *  要实现 ajax 下的前后退功能成本较大
 *  可能造成请求数的增加
 *  跨域问题限制

JSON 是一种轻量级的数据交换格式，ECMA 的一个子集。

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型

（数组、对象、字符串、数字）

# 281. #

\[问答题\]

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

var a;

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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

# 282. #

\[问答题\]

看下列代码,输出什么？解释原因。

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

null 是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof

检测会返回”object”。

# 283. #

\[问答题\]

看下列代码,输出什么？解释原因。

var undefined;

undefined == null; // true

1 == true;       // true 2 == true;               // false 0 == false;        // true 0 == '';    // true

NaN == NaN;     // false \[\] == false; // true

\[\] == !\[\];       // true

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

*  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。

# 284. #

\[问答题\]

看代码给答案。 var a = new Object(); a.value = 1;

b = a; b.value = 2;

alert(a.value);

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集答案：2（考察引用数据类型细节）

# 285. #

\[问答题\]

已知数组var stringArray = \[“This”, “is”, “Baidu”, “Campus”\]，Alert 出”This is Baidu Campus”。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集答案：alert(stringArray.join(“”))

# 286. #

\[问答题\]

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

getElementById”。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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;

(考察基础 API)

# 287. #

\[问答题\]

var numberArray = \[3,6,2,4,1,5\]; （考察基础API） 1) 实现对该数组的倒排，输出\[5,1,4,2,6,3\]

2) 实现对该数组的降序排列，输出\[6,5,4,3,2,1\]

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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;

# 288. #

\[问答题\]

输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，则输出

2014-09-26

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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

# 289. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集

答 案 ： ” <tr><td>\{$id\}</td><td>\{$id\}\_\{$name\}</td></tr>  ” .replace(/\{\\$id\}/g,    ’

10′).replace(/\{\\$name\}/g, ‘Tony’);

# 290. #

\[问答题\]

为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数

escapeHtml，将<, >, &, “进行转义

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

function escapeHtml(str) \{

return str.replace(/\*<>”&+/g, function(match) \{ switch (match) \{

# 291. #

\});

case “<”:

return “<”;

case “>”:

return “>”;

case “&”:

return “&”; case “\\””:

return “"”;

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集

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

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

# 292. #

\[问答题\]

看下列代码，将会输出什么?(变量声明提升) var foo = 1;

function()\{

console.log(foo); var foo = 2; console.log(foo);

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

输出 undefined 和 2。上面代码相当于： var foo = 1;

function()\{

var foo;

console.log(foo); //undefined foo = 2;

console.log(foo); // 2;

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

# 293. #

\[问答题\]

用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

var iArray = \[\];

funtion getRandom(istart, iend)\{

var iChoice = istart - iend +1;

return Math.floor(Math.random() \* iChoice + istart;

for(var i=0; i<10; i++)\{

iArray.push(getRandom(10,100));

iArray.sort();

# 294. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

var array1 = \['a','b','c'\];

var bArray = \['d','e','f'\];

var cArray = array1.concat(bArray); cArray.splice(1,1);

# 295. #

\[问答题\]

怎样添加、移除、移动、复制、创建和查找节点（原生 JS）

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

1.  创建新节点

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

1.  添加、移除、替换、插入appendChild()       //添加

removeChild()              //移除

replaceChild()              //替换

insertBefore()              //插入3）查找

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

# 296. #

\[问答题\]

有这样一个 URL：[http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e][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\}。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

function serilizeUrl(url) \{ var result = \{\};

url = url.split("?")\[1\]; var map = url.split("&");

for(var i = 0, len = map.length; i < len; i++) \{

result<script>jQuery(function($)                        \{$("\#google-maps-1").gMap(\{controls: false,scrollwheel:                                                    false,markers:                   \[\{address:                   "",icon:                   \{image: "[http://blog.jobbole.com/wp-content/themes/jobboleblogv3/\_assets/img/\_colors/red/pin.png][http_blog.jobbole.com_wp-content_themes_jobboleblogv3_assets_img_colors_red_pin.png]",i consize: \[32, 32\],iconanchor: \[16,27\],infowindowanchor: \[16, 27\]\}\}\],address: "",zoom: 15,icon:

\{image:

"[http://blog.jobbole.com/wp-content/themes/jobboleblogv3/\_assets/img/\_colors/red/pin.png][http_blog.jobbole.com_wp-content_themes_jobboleblogv3_assets_img_colors_red_pin.png]",i consize: \[32, 32\],iconanchor: \[16,27\],infowindowanchor: \[16, 27\]\}\});\});</script><div class="google-maps"   id="google-maps-1"                                                      style="width:                           100%;                            height: 200px;"></div>.split("=")\[0\]\] = map\[i\].split("=")\[1\];

return result;

# 297. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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

邮箱的正则匹配：

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

# 298. #

\[问答题\]

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

for(var i=1;i<=3;i++)\{ setTimeout(function()\{

console.log(i);

\},0);

\};

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集答案：4 4 4。

原因：Javascript 事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出 1 2

3？

for(var i=1;i<=3;i++)\{

setTimeout((function(a)\{     //改成立即执行函数console.log(a);

\})(i),0);

\};

1                          //输出

# 299. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

使用自带接口 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"

# 300. #

\[问答题\]

avascript 中 callee 和 caller 的作用？

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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

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

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第 n 个月能繁殖成多少对兔子？（使用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\];

# 301. #

\[问答题\]

实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括 Number、String、 Object、Array、Boolean）进行值复制。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

•考察点 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\];

return o;

//方法二：

/\*\*

*  克隆一个对象
 *  @param Obj
 *  @returns

\*/

function clone(Obj) \{ var buf;

if (Obj instanceof Array) \{

buf = \[\];                                               //创建一个空的数组var i = Obj.length;

while (i--) \{

buf\[i\] = clone(Obj\[i\]);

return buf;

\}else if (Obj instanceof Object)\{

buf = \{\};                                             //创建一个空对象

for (var k in Obj) \{                           //为这个对象添加新的属性

buf\[k\] = clone(Obj\[k\]);

return buf;

\}else\{                                                          //普通变量直接赋值

return Obj;

# 302. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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.length;

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

return newArr;

var newArr2=deRepeat(arr); alert(newArr2); //输出 1,2,3,4,5,6,9,25

# 303. #

\[问答题\]

小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

function Dog() \{

this.wow = function() \{

alert(’Wow’);

this.yelp = function() \{

this.wow();

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）

答案：

function MadDog() \{ this.yelp = function() \{

var self = this; setInterval(function() \{

self.wow();

\}, 500);

MadDog.prototype = new Dog();

//for test

var dog = new Dog(); dog.yelp();

var madDog = new MadDog(); madDog.yelp();

# 304. #

\[问答题\]

下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包）

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

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

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

</ul>

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

// 方法一：

var lis=document.getElementById('2223').getElementsByTagName('li');

for(var i=0;i<3;i++)

lis\[i\].index=i; lis\[i\].οnclick=function()\{

alert(this.index);

\};

//方法二：

var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++)

lis\[i\].index=i; lis\[i\].οnclick=(function(a)\{

return function() \{ alert(a);

# 305. #

\})(i);

\[问答题\]

编写一个 JavaScript 函数，输入指定类型的选择器(仅需支持 id，class，tagName 三种简单 CSS 选择器，无需兼容组合选择器)可以返回匹配的 DOM 节点，需考虑浏览器兼容性和性能。

/\*\*\* @param selector \{String\} 传入的 CSS 选择器。\* @return \{Array\}\*/

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

var query = function(selector) \{

var reg = /^(\#)?(\\.)?(\\w+)$/img; 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\]));

else \{

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

RegExp(regResult\[2\])) > -1) \{

//如果不支持 getElementsByClassName 函数

else \{

var allDoms = document.getElementsByTagName("\*") ; for(var i = 0, len = allDoms.length; i < len; i++) \{

if(allDoms\[i\].className.search(new

result.push(allDoms\[i\]);

//如果是标签选择器else if(regResult\[3\]) \{

var                                                       doms                                                       = document.getElementsByTagName(regResult\[3\].toLowerCase());

if(doms) \{

result = converToArray(doms);

return result;

function converToArray(nodes)\{ var array = null;

try\{

array = Array.prototype.slice.call(nodes,0);//针对非 IE 浏览器

\}catch(ex)\{

array = new Array();

for( var i = 0 ,len = nodes.length; i < len ; i++ ) \{ array.push(nodes\[i\])

return array;

# 306. #

\[问答题\]

请评价以下代码并给出改进意见。

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

\});

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

*  不应该在 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\] = handler; elem\[type + handler\] = function()\{ elem\['temp' + type + handler\].apply(elem);

\};

elem.attachEvent('on' + type, elem\[type + handler\]);

\}else\{

elem\['on' + type\] = handler;

# 307. #

\[问答题\]

给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字符间价格空格返回，例如：

addSpace(“hello world”) // -> ‘h e l l o       w o r l d’

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

String.prototype.spacify = function()\{ return this.split('').join(' ');

\};

接着上述问题答案提问，1）直接在对象的原型上添加方法是否安全？尤其是在 Object

对象上。(这个我没能答出？希望知道的说一下。) 2）函数声明与函数表达式的区别？ 答案：

在 js 中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

# 308. #

\[问答题\]

定义一个 log 方法，让它可以代理 console.log 的方法。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

可行的方法一：

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\]) 。

# 309. #

\[问答题\]

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

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

伪数组（类数组）：无法直接调用数组方法或期望 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);

\};

# 310. #

\[问答题\]

对作用域上下文和 this 的理解，看下列代码：

var User = \{ count: 1,

getCount: function() \{ return this.count;

\};

console.log(User.getCount());    // what? var func = User.getCount; console.log(func());     // what?

问两处 console 输出什么？为什么？

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

1 和 undefined。

func 是在 winodw 的上下文中被执行的，所以会访问不到 count 属性。

继续追问，那么如何确保 Uesr 总是能访问到 func 的上下文，即正确返回 1。正确的方法是使用 Function.prototype.bind。兼容各个浏览器完整代码如下：

Function.prototype.bind = Function.prototype.bind || function(context)\{ var self = this;

return function()\{

return self.apply(context, arguments);

\};

var func = User.getCount.bind(User); console.log(func());

# 311. #

\[问答题\]

原生 JS 的 window.onload 与 Jquery 的$(document).ready(function()\{\})有什么不同？如何用原生 JS 实现 Jq 的 ready 方法？

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

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

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

/\*

*  传递函数给whenReady()
 *  当文档解析完毕且为操作准备就绪时，函数作为 document 的方法调用

\*/

var whenReady = (function() \{                                    //这个函数返回 whenReady()函数var funcs = \[\];   //当获得事件时，要运行的函数

var ready = false;                       //当触发事件处理程序时,切换为 true

//当文档就绪时,调用事件处理程序function handler(e) \{

if(ready) return;                 //确保事件处理程序只完整运行一次

//如果发生 onreadystatechange 事件，但其状态不是 complete 的话,那么文档

尚未准备好

if(e.type === 'onreadystatechange' && document.readyState !== 'complete') \{ return;

//运行所有注册函数

//注意每次都要计算 funcs.length

//以防这些函数的调用可能会导致注册更多的函数for(var i=0; i<funcs.length; i++) \{

funcs\[i\].call(document);

//事件处理函数完整执行,切换ready 状态, 并移除所有函数

ready = true; funcs = null;

//IE9+

//为接收到的任何事件注册处理程序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);

fn();                            //执行函数

\}, false);

\}else if(document.attachEvent) \{                   //IE document.attachEvent('onreadystatechange', function() \{

if(document.readyState == 'complete') \{ document.detachEvent('onreadystatechange', arguments.callee); fn();                   //函数执行

\};

# 312. #

\});

\[问答题\]

（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生 JS）

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

回答出概念即可，下面是几个要点

1.  给需要拖拽的节点绑定mousedown, mousemove, mouseup 事件
2.  mousedown 事件触发后，开始拖拽
3.  mousemove 时，需要通过event.clientX 和 clientY 获取拖拽位置，并实时更新位置
4.  mouseup 时，拖拽结束
5.  需要注意浏览器边界的情况

# 313. #

\[问答题\]

说出以下函数的作用是？空白区域应该填写什么？

//define (function(window)\{

function fn(str)\{

this.str=str;

fn.prototype.format = function()\{ var arg =           ;

return this.str.replace(         ,function(a,b)\{ return arg\[b\]||"";

\});

window.fn = fn;

\})(window);

//use (function()\{

var t = new fn('<p><a href="\{0\}">\{1\}</a><span>\{2\}</span></p>'); console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));

\})();

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：

访函数的作用是使用 format 函数将函数的参数替换掉\{0\}这样的内容，返回一个格式化后的结果：

第一个空是：arguments 第二个空是：/\\\{(\\d+)\\\}/ig

# 314. #

\[问答题\]

用面向对象的 Javascript 来介绍一下自己。

\----------------------------------------------------------------------------------------------------------------------------

来自：BAT 及各大互联网公司 2014 前端笔试面试题集参考：无

# 315. #

\[问答题\]

实现输出 document 对象中所有成员的名称和类型。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 316. #

\[问答题\]

如何获得一个 DOM 元素的绝对位置？（获得元素位置，不依赖框架）

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 317. #

\[问答题\]

如何利用 JS 生成一个 table？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 318. #

\[问答题\]

实现预加载一张图片，加载完成后显示在网页中并设定其高度为 50px，宽度为 50px；

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 319. #

\[问答题\]

假设有一个 4 行 td 的 table，将 table 里面 td 顺序颠倒。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 320. #

\[问答题\]

模拟一个 HashTable 类，包含有 add、remove、contains、length 方法。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 321. #

\[问答题\]

Ajax 读取一个 XML 文档并进行解析的实例。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 322. #

\[问答题\]

JS 如何实现面向对象和继承机制？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 323. #

\[问答题\]

JS 模块的封装方法，比如怎样实现私有变量，不能直接赋值，只能通过公有方法。

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 324. #

\[问答题\]

对闭包的理解，闭包的好处和坏处？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 325. #

\[问答题\]

对 this 指针的理解，可以列举几种使用情况？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 326. #

\[问答题\]

对 JS 中函数绑定的理解？函数绑定可以使用哪两个函数？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 327. #

\[问答题\]

jQuery 的特点？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 328. #

\[问答题\]

简述 Ajax 的异步机制。Ajax 有哪些好处和弊端？

\----------------------------------------------------------------------------------------------------------------------------

来自：百度流程信息管理部 Web 前端实习研发工程师笔试题参考：无

# 329. #

\[问答题\]

阅读下面代码，判断输出结果？ 考察知识点： this。

var length = 10; function fn() \{

console.log(this.length);

var obj = \{ length: 5,

method: function(fn) \{ fn(); arguments\[0\]();

\};

obj.method(fn, 1);

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题输出：10 2

第一次输出 10 应该没有问题。我们知道取对象属于除了点操作符还可以用中括号，所以第二次执行时相当于 arguments 调用方法，this 指向 arguments，而这里传了两个参数， 故输出 arguments 长度为 2。

# 330. #

\[问答题\]

阅读下面代码，判断输出结果？

考察知识点：var 和函数的提前声明

function fn(a) \{ console.log(a); var a = 2; function a() \{\} console.log(a);

fn(1);

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题输出：function a() \{\} 2

我们知道var 和 function 是会提前声明的，而且 function 是优先于var 声明的(如果同时存在的话)，所以提前声明后输出的 a 是个 function，然后代码往下执行 a 进行重新赋值了， 故第二次输出是 2。

# 331. #

\[问答题\]

阅读下面代码，判断输出结果？ 考察知识点：局部变量和全局变量var f = true;

if (f === true) \{ var a = 10;

function fn() \{ var b = 20; c = 30;

fn(); console.log(a); console.log(b); console.log(c);

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题

输出：10 报错 30

这是个我犯了很久的错误，很长一段时间我都以为\{...\}内的新声明的变量是局部变量， 后来我才发现 function 内的新声明的变量才是局部变量，而没有用 var 声明的变量在哪里都是全局变量。再次提醒切记只有 function()\{\}内新声明的才能是局部变量，while\{...\}、if\{...\}、for(..) 之内的都是全局变量(除非本身包含在 function 内)。

# 332. #

\[问答题\]

阅读下面代码，判断输出结果？ 考察知识点：变量隐式声明

var f = true;

if (f === true) \{ var a = 10;

function fn() \{ var b = 20; c = 30;

fn(); console.log(a); console.log(b); console.log(c);

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题答案：10

前面说过 function 和 var 会提前声明，而其实\{...\}内的变量也会提前声明。于是代码还没执行前，a 变量已经被声明，于是 'a' in window 返回 true，a 被赋值。

# 333. #

\[问答题\]

阅读下面代码，判断输出结果？

考察知识点：给基本类型数据添加属性，不报错，但取值时是 undefined var a = 10;

a.pro = 10; console.log(a.pro + a);

var s = 'hello'; s.pro = 'world';

console.log(s.pro + s);

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题答案：NaN undefinedhello

给基本类型数据加属性不报错，但是引用的话返回 undefined，10+undefined 返回 NaN， 而 undefined 和 string 相加时转变成了字符串。

# 334. #

\[问答题\]

阅读下面代码，判断输出结果？

考察知识点：函数声明优于变量声明

console.log(typeof fn); function fn() \{\};

var fn;

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题答案：function

因为函数声明优于变量声明。我们知道在代码逐行执行前，函数声明和变量声明会提前进行，而函数声明又会优于变量声明，这里的优于可以理解为晚于变量声明后，如果函数名和变量名相同，函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样结果。

# 335. #

\[问答题\]

判断一个字符串中出现次数最多的字符，并统计次数。

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题参考：

hash table 方式：

var s = 'aaabbbcccaaabbbaaa'; var obj = \{\};

var maxn = -1; var letter;

for(var i = 0; i < s.length; i++) \{ if(obj\[s\[i\]\]) \{

obj\[s\[i\]\]++;

if(obj\[s\[i\]\] > maxn) \{

maxn = obj\[s\[i\]\];

letter = s\[i\];

\} else \{

obj\[s\[i\]\] = 1;

if(obj\[s\[i\]\] > maxn) \{

maxn = obj\[s\[i\]\]; letter = s\[i\];

alert(letter + ': ' + maxn);

正则方式：

var s = 'aaabbbcccaaabbbaaabbbbbbbbbb'; var a = s.split('');

a.sort();

s = a.join('');

var pattern = /(\\w)\\1\*/g; var ans = s.match(pattern); ans.sort(function(a, b) \{

return a.length < b.length;

\});;

console.log(ans\[0\]\[0\] + ': ' + ans\[0\].length);

# 336. #

\[问答题\]

设计经典闭包。

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题参考：

<body>

<a href='\#'>  第一个链接 </a> </br>

<a href='\#'>  第二个链接 </a> </br>

<a href='\#'>  第三个链接 </a> </br>

<a href='\#'>  第四个链接 </a> </br>

</body>

dom 污染法：

<body>

<a href='\#'>  第一个链接 </a> </br>

<a href='\#'>  第二个链接 </a> </br>

<a href='\#'>  第三个链接 </a> </br>

<a href='\#'>  第四个链接 </a> </br>

for(var i = 0, length = lis.length; i < length; i++) \{ lis\[i\].index = i;

lis\[i\].onclick = function() \{ alert(this.index);

\};

</script>

</body>

闭包：

<body>

<a href='\#'>  第一个链接 </a> </br>

<a href='\#'>  第二个链接 </a> </br>

<a href='\#'>  第三个链接 </a> </br>

<a href='\#'>  第四个链接 </a> </br>

for(var i = 0, length = lis.length; i < length; i++) \{ (function(i) \{

lis\[i\].onclick = function() \{ alert(i + 1);

\};

\})(i);

</script>

</body>

# 337. #

\[问答题\]

阅读下面代码，判断输出结果？ 考察知识点：this

function JSClass() \{

this.m\_Text = 'division element';

this.m\_Element = document.createElement('div'); this.m\_Element.innerHTML = this.m\_Text; this.m\_Element.addEventListener('click', this.func);

// this.m\_Element.onclick = this.func;

JSClass.prototype.Render = function() \{ document.body.appendChild(this.m\_Element);

JSClass.prototype.func = function() \{ alert(this.m\_Text);

\};

var jc = new JSClass(); jc.Render();        // add div

jc.func();     // 输出 division element

//click 添加的 div 元素 division element 会输出 underfined，为什么？

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题答案：division element undefined

第一次输出很好理解，第二次的话仔细看，this 其实已经指向了 this.m\_Element，因为是 this.m\_Element 调用的 addEventListener 函数，所以内部的 this 全指向它了。可以试着加上一行代码this.m\_Element.m\_Text = 'hello world'，就会 alert 出 hello world 了。

# 338. #

\[问答题\]

请编写一个JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如： var url = “[http://witmax.cn/index.php?key0=0&key1=1&key2=2][http_witmax.cn_index.php_key0_0_key1_1_key2_2]″

\----------------------------------------------------------------------------------------------------------------------------

来自：2015 年十大热点 Javascript 笔试题参考：

function parseQueryString(url) \{ var obj = \{\};

var a = url.split('?'); if(a === 1) return obj; var b = a\[1\].split('&');

for(var i = 0, length = b.length; i < length; i++) \{ var c = b\[i\].split('=');

obj\[c\[0\]\] = c\[1\];

return obj;

var url = '[http://witmax.cn/index.php?key0=0&key1=1&key2=2';][http_witmax.cn_index.php_key0_0_key1_1_key2_2 1]

var obj = parseQueryString(url); console.log(obj.key0, obj.key1, obj.key2); // 0 1 2

# 339. #

\[问答题\]

找出数字数组中最大的元素(使用 Math.max 函数)。

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

var a = \[1, 2, 3, 6, 5, 4\];

var ans = Math.max.apply(null, a); console.log(ans);   // 6

这题很巧妙地用了 apply，如果不是数组，是很多数字求最大值，我们知道可以这样： var ans = Math.max(1, 2, 3, 4, 5, 6);

console.log(ans); // 6

而 apply 的第二个参数正是一个数组，都不用进行转换了。

var a = \[1, 2, 3, 6, 5, 4\];

var ans = eval( 'Math.max(' + a.toString() + ')'); console.log(ans); // 6

还有一种用 eval+toString 的实现：

# 340. #

\[问答题\]

转化一个数字数组为 function 数组(每个 function 都弹出相应的数字)。

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

var a = \[1, 2, 3, 4, 5, 6\];

var len = a.length; for(var i = 0; i < len; i++) \{

var num = a\[i\]; (function(num) \{

var f = function() \{ console.log(num);

\};

a\[i\] = f;

\})(num);

for(var i = 0; i < len; i++) a\[i\]();

// 1

// 2

// 3

// 4

// 5

// 6

这跟给 n 个a 标签，弹出相应标签对应的编号是一个类型的题，用闭包保存变量到内存即可。

# 341. #

\[问答题\]

给 object 数组进行排序(排序条件是每个元素对象的属性个数)。

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

var a = \{

\};

var b = \{

\};

var c = \{

\};

Object.prototype.getLength =     function() \{ var num = 0;

for(var key in this) \{ if(this.hasOwnProperty(key))

num++;

return num;

\};

var arr = \[a, b, c\];

arr.sort(function(a, b) \{

return a.getLength() > b.getLength();

\});

console.log(arr);

这题不难，数组排序，当然是 sort，排序条件是对象的属性个数，可以写个函数计算， 注意可能要用 hasOwnProperty 判断下。

# 342. #

\[问答题\]

利用 JavaScript 打印出 Fibonacci 数(不使用全局变量)。

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

(function(a, b) \{ var c = a + b; console.log(c);

if(c > 100) return; arguments.callee(b, c);

\})(-1, 1);

这题没看明白，是打出斐波那契数列的前 n 项么?还是第 n 项... function fn(n) \{

var a = \[\];

a\[0\] = 0, a\[1\] = 1;

for(var i = 2; i < n; i++) a\[i\] = a\[i - 1\] + a\[i - 2\];

for(var i = 0; i < n; i++) console.log(a\[i\]);

fn(5); // 10 表示需要的斐波那契数列个数

// 0

// 1

// 2

// 3

不使用全局变量，把它们写在函数里了应该算是局部变量，难道这样就好了?

# 343. #

\[问答题\]

实现如下语法的功能：var a = (5).plus(3).minus(6); //2

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

Number.prototype.plus = function(a) \{ return this + a;

\};

Number.prototype.minus = function(a) \{ return this - a;

\};

var a = (5).plus(3).minus(6); console.log(a); // 2

直接在 Number 对象上加扩展方法即可，传说中这样很不好，but 我也想不到更好的办法了...

# 344. #

\[问答题\]

实现如下语法的功能：var a = add(2)(3)(4); //9

\----------------------------------------------------------------------------------------------------------------------------

来自：外国 Javascript 编程题精选参考：

function add(a) \{

var temp = function(b) \{ return add(a + b);

temp.valueOf = temp.toString = function() \{ return a;

\};

return temp;

var ans = add(2)(3)(4); console.log(ans); // 9

对 valueOf 和 toString 的考察，具体可以参考《valueOf 和 toString》另看到一种很飘逸的写法(来自Gaubee)：

function add(num)\{ num += ~~add; add.num = num; return add;

add.valueOf = add.toString = function()\{return add.num\}; var ans = add(3)(4)(5)(6);                                                    // 18

alert(ans);

# 345. #

\[问答题\]

原生 JavaScript 实现字符串长度截取

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function cutstr(str, len) \{ var temp;

var icount = 0;

var patrn = /\[^\\x00-\\xff\]/; var strre = "";

for (var i = 0; i < str.length; i++) \{ if (icount < len - 1) \{

temp = str.substr(i, 1);

if (patrn.exec(temp) == null) \{ icount = icount + 1

\} else \{

icount = icount + 2

strre += temp

\} else \{

break

return strre + "..."

# 346. #

\[问答题\]

原生 JavaScript 获取域名主机

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function getHost(url) \{ var host = "null";

if(typeof url == "undefined"|| null == url) \{ url = window.location.href;

var regex = /^\\w+\\:\\/\\/(\[^\\/\]\*).\*/; var match = url.match(regex);

if(typeof match != "undefined" && null != match) \{ host = match\[1\];

# 347. #

return host;

\[问答题\]

原生 JavaScript 清除空格

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

String.prototype.trim = function() \{ var reExtraSpace = /^\\s\*(.\*?)\\s+$/;

return this.replace(reExtraSpace, "$1")

# 348. #

\[问答题\]

原生 JavaScript 替换全部

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

String.prototype.replaceAll = function(s1, s2) \{ return this.replace(new RegExp(s1, "gm"), s2)

# 349. #

\[问答题\]

原生 JavaScript 转义 html 标签

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function HtmlEncode(text) \{

return text.replace(/&/g, '&').replace(/\\"/g, '"').replace(/</g, '<').replace(/>/g, '>')

# 350. #

\[问答题\]

原生 JavaScript 时间日期格式转换

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

Date.prototype.Format = function(formatStr) \{ var str = formatStr;

var Week = \['日', '一', '二', '三', '四', '五', '六'\]; str = str.replace(/yyyy|YYYY/, this.getFullYear());

str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));

str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (th is.getMonth() + 1));

str = str.replace(/M/g, (this.getMonth() + 1)); str = str.replace(/w|W/g, Week\[this.getDay()\]);

str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate())

;

rs());

str = str.replace(/d|D/g, this.getDate());

str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHou

str = str.replace(/h|H/g, this.getHours());

str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMi

nutes());

str = str.replace(/m/g, this.getMinutes());

str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getS econds());

str = str.replace(/s|S/g, this.getSeconds()); return str

# 351. #

\[问答题\]

原生 JavaScript 判断是否为数字类型

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function isDigit(value) \{ var patrn = /^\[0-9\]\*$/;

if (patrn.exec(value) == null || value == "") \{ return false

\} else \{

return true

# 352. #

\[问答题\]

原生 JavaScript 设置 cookie 值

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function setCookie(name, value, Hours) \{ var d = new Date();

var offset = 8;

var utc = d.getTime() + (d.getTimezoneOffset() \* 60000); var nd = utc + (3600000 \* offset);

var exp = new Date(nd);

exp.setTime(exp.getTime() + Hours \* 60 \* 60 \* 1000);

document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"

# 353. #

\[问答题\]

原生 JavaScript 获取 cookie 值

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function getCookie(name) \{

var arr = document.cookie.match(new RegExp("(^| )" + name + "=(\[^;\]\*)(;|$)")); if (arr != null) return unescape(arr\[2\]);

return null

# 354. #

\[问答题\]

原生 JavaScript 加入收藏夹

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function AddFavorite(sURL, sTitle) \{ try \{

window.external.addFavorite(sURL, sTitle)

\} catch(e) \{ try \{

window.sidebar.addPanel(sTitle, sURL, "")

\} catch(e) \{

alert("加入收藏失败，请使用 Ctrl+D 进行添加")

# 355. #

\[问答题\]

原生 JavaScript 设为首页

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function setHomepage() \{ if (document.all) \{

document.body.style.behavior = 'url(\#default\#homepage)'; document.body.setHomePage('http://www.jq-school.com')

\} else if (window.sidebar) \{ if (window.netscape) \{

try \{

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

\} catch(e) \{

alert(" 该操作被浏览器拒绝， 如果想启用该功能， 请在地址栏内输入 about:config,然后将项 signed.applets.codebase\_principal\_support 值该为 true")

var prefs = Components.classes\['@mozilla.org/preferences-service;1'\].getService(Comp onents.interfaces.nsIPrefBranch);

prefs.setCharPref('browser.startup.homepage', 'http://www.jq-school.com')

# 356. #

\[问答题\]

原生 JavaScript 判断 IE6

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

var ua = navigator.userAgent.toLowerCase(); var isIE6 = ua.indexOf("msie 6") > -1;

if (isIE6) \{ try \{

document.execCommand("BackgroundImageCache", false, true)

\} catch(e) \{\}

# 357. #

\[问答题\]

原生 JavaScript 加载样式文件

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function LoadStyle(url) \{ try \{

document.createStyleSheet(url)

\} catch(e) \{

var cssLink = document.createElement('link'); cssLink.rel = 'stylesheet';

cssLink.type = 'text/css'; cssLink.href = url;

var head = document.getElementsByTagName('head')\[0\]; head.appendChild(cssLink)

# 358. #

\[问答题\]

原生 JavaScript 返回脚本内容

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function evalscript(s) \{ if(s.indexOf('<script') == -1) return s;

var p = /<script\[^\\>\]\*?>(\[^\\x00\]\*?)<\\/script>/ig; var arr = \[\];

while(arr = p.exec(s)) \{

var p1 = /<script\[^\\>\]\*?src=\\"(\[^\\>\]\*?)\\"\[^\\>\]\*?(reload=\\"1\\")?(?:charset=\\"(\[\\w\\-\]

\+?)\\")?><\\/script>/i;

var arr1 = \[\];

arr1 = p1.exec(arr\[0\]); if(arr1) \{

appendscript(arr1\[1\], '', arr1\[2\], arr1\[3\]);

\} else \{

p1 = /<script(.\*?)>(\[^\\x00\]+?)<\\/script>/i; arr1 = p1.exec(arr\[0\]);

appendscript('', arr1\[2\], arr1\[1\].indexOf('reload=') != -1);

return s;

# 359. #

\[问答题\]

原生 JavaScript 清除脚本内容

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function stripscript(s) \{

return s.replace(/<script.\*?>.\*?<\\/script>/ig, '');

# 360. #

\[问答题\]

原生 JavaScript 动态加载脚本文件

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function appendscript(src, text, reload, charset) \{ var id = hash(src + text);

if(!reload && in\_array(id, evalscripts)) return; if(reload && $(id)) \{

$(id).parentNode.removeChild($(id));

evalscripts.push(id);

var scriptNode = document.createElement("script"); scriptNode.type = "text/javascript";

scriptNode.id = id;

scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : do cument.charset);

try \{

if(src) \{

scriptNode.src = src; scriptNode.onloadDone = false; scriptNode.onload = function () \{

scriptNode.onloadDone = true; JSLOADED\[src\] = 1;

\};

scriptNode.onreadystatechange = function () \{

if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complet e') && !scriptNode.onloadDone) \{

scriptNode.onloadDone = true; JSLOADED\[src\] = 1;

\};

\} else if(text)\{

scriptNode.text = text;

document.getElementsByTagName('head')\[0\].appendChild(scriptNode);

\} catch(e) \{\}

# 361.   361 #

\[问答题\]

原生 JavaScript 返回按 ID 检索的元素对象

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function $(id) \{

return !id ? null : document.getElementById(id);

# 362. #

\[问答题\]

原生 JavaScript 返回浏览器版本内容

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function browserVersion(types) \{ var other = 1;

for(i in types) \{

var v = types<i> ? types<i> : i; if(USERAGENT.indexOf(v) != -1) \{

var re = new RegExp(v + '(\\\\/|\\\\s)(\[\\\\d\\\\.\]+)', 'ig'); var matches = re.exec(USERAGENT);

var ver = matches != null ? matches\[2\] : 0; other = ver !== 0 && v != 'mozilla' ? 0 : other;

\}else \{

var ver = 0;

eval('BROWSER.' + i + '= ver');

BROWSER.other = other;

# 363. #

\[问答题\]

原生 JavaScript 元素显示的通用方法

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function $(id) \{

return !id ? null : document.getElementById(id);

function display(id) \{ var obj = $(id);

if(obj.style.visibility) \{

obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';

\} else \{

obj.style.display = obj.style.display == '' ? 'none' : '';

# 364. #

\[问答题\]

原生 JavaScript 中有 insertBefore 方法,可惜却没有 insertAfter 方法?用如下函数实现

\----------------------------------------------------------------------------------------------------------------------------

来自：原生 Javascript 编程练习题参考：

function insertAfter(newChild,refChild)\{ var parElem=refChild.parentNode; if(parElem.lastChild==refChild)\{

refChild.appendChild(newChild);

\}else\{

parElem.insertBefore(newChild,refChild.nextSibling);

[h]: http://www.bairuiw.com/tag/javascript
[http_www.w3.org_TR_html4_loose.dtd]: http://www.w3.org/TR/html4/loose.dtd
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[h 1]: http://www.w3.org/1999/xhtml
[http_witmax.cn_index.php_key0_0_key1_1_key2_2]: http://witmax.cn/index.php?key0=0&amp;key1=1&amp;key2=2
[http_whatwg.org_specs_web-apps_current-work]: http://whatwg.org/specs/web-apps/current-work/
[http_www.abc.com_m_s_page_2_type_latest_videos_page_size_20]: http://www.abc.com/m/s/%23page/2/?type=latest_videos&amp;page_size=20
[http_www.abc.com_m_s_type_latest_videos_page_size_20]: http://www.abc.com/m/s/#type%3Dlatest_videos%26page_size%3D20
[http_www.abc.com_m_s_page_type_latest_videos_page_size_20]: http://www.abc.com/m/s/%23page?type=latest_videos&amp;page_size=20
[javascript]: http://www.aseoe.com/javascript/
[Link 1]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&amp;app_id=0&amp;c=news&amp;cf=1001&amp;ch=0&amp;di=128&amp;fv=0&amp;is_app=0&amp;jk=233a3ef782efdd61&amp;k=%B9%D8%BC%FC%D7%D6&amp;k0=%B9%D8%BC%FC%D7%D6&amp;kdi0=0&amp;luki=1&amp;n=10&amp;p=baidu&amp;q=37039099_cpr&amp;rb=0&amp;rs=1&amp;seller_id=1&amp;sid=61ddef82f73e3a23&amp;ssp2=1&amp;stid=0&amp;t=tpclicked3_hc&amp;td=1834475&amp;tu=u1834475&amp;u=http%3A%2F%2Fwww.aseoe.com%2Fshow-66-370-1.html&amp;urlid=0
[http_item.taobao.com_item.htm_a_1_b_2_c_d_xxx_e]: http://item.taobao.com/item.htm?a=1&amp;b=2&amp;c&amp;d=xxx&amp;e
[http_blog.jobbole.com_wp-content_themes_jobboleblogv3_assets_img_colors_red_pin.png]: http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/_colors/red/pin.png
[http_witmax.cn_index.php_key0_0_key1_1_key2_2 1]: http://witmax.cn/index.php?key0=0&amp;key1=1&amp;key2=2%27%3B