前端面试题
1、Javascript包括哪些数据类型，请分别编写3种以上类型的判断函数，如：isString()?
字符串、数字、布尔、数组、对象、null、undefined
isNumber()? isArray()? isObject()?
2、编写一个JavaScript函数，实时显示当前时间，格式”年—月—日 时：分：秒 ？
<html>
<head>
<script>
function getTime() {
var now_Date = new Date();
var nowYear;
var nowMonth;
var nowDay;
var nowdate;
var nowHourse;
var nowMinutes;
var nowSeconds;
nowYear = now_Date.getFullYear();
nowMonth = now_Date.getMonth() + 1;
nowDay = now_Date.getDay();
nowdate= now_Date.getDate();
nowHourse = now_Date.getHours();
if(nowHourse == 0){
nowHourse = 12;
}
nowMinutes = now_Date.getMinutes();
nowSeconds = now_Date.getSeconds();
var timeDetails = nowYear+'-'+nowMonth+'-'+nowdate+' '+nowHourse+':'+nowMinutes+':'+nowSeconds;
alert(timeDetails);
document.getElementById("input").value = str;
}
window.setInterval("getTime()", 1000);
</script>
</body>
</html>
3、如何显示/隐藏一个DOM元素？
答案：显示：object.style.display="";
隐藏：object.style.display="none";
4、如何添加html元素的事件处理，有几种方法？
答案：html的元素的事件就只用控件自带的的那么几个，如onclick,onmouserdown ,..等等都是调用脚本执行
方法：1、在空间上写直接激发事件
2、在页面加载的时候就调用脚本激发控件的某个事件
3、在后台利用后台代码强行执行控件的事件。
或：
（1） 为HTML元素的事件属性赋值
（2） 在JS中使用ele.on*** = function() {…}
（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent
5、如何控制alert中的换行？
答案：\n alert("text\ntext");
alert("再打个招呼。这里演示了" + "\n" + "如何在消息框中添加折行。")
6、判断一个字符串中出现次数最多的字符，统计这个次数
代码：
<html>
<body>
<script>
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
var key = str[i];
if (typeof obj[key] == 'undefined') {
obj[key] = 1;
} else {
obj[key]++;
}
}
var max = -1;
var max_key = "";
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert("字符:"+max_key+" 出现次数:"+max);
</script>
</body>
</html>
7、判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20.
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
8、请编写一个Javascript函数parseQueryString，它的用途是把URL参数解析为一个对象，如 var url = "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";var ps = parseQueryString(url);alert(ps["key1"]);
9、在页面中有如下html : <div id="firld">
<input type="text" value="User Name"/>
</div>
<span class="red"></span>
需求用闭包方式写一个JS,从文本框中取出值，并在标签 span中显示出来。
10、在 IE 6.0下面是不支持position:fixed 的，请写一个JS使用<div id="box"></div>固定在页面的右下角。
11、请实现，鼠标移到页面中的任意标签，展示出这个标签的基本矩形轮廓。
12、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,write,writeln
属性：cookie,doctype,domain,documentElement,readyState,URL,
13、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;};
14、js 中如何定义class ,如何扩展prototype ?
Ele.className = “***”; //***在css中定义，形式如下：.*** {…}
A.prototype.B = C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
15、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/）
AJAX交互模型
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复
跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：
PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1) document.domain+iframe
(2) 动态创建script标签
16、请给出异步加载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.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script);}
17、多浏览器检测通过什么？
（1） navigator.userAgent
（2） 不同浏览器的特性，如addEventListener
18、讲述一下你所了解的前端开发的优化方式