很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益。
而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正。
前面几题是会很基础,越下越有深度。
没有标准答案。
基本数据类型:String,boolean,Number,Undefined, Null
引用数据类型:Object(Array,Date,RegExp,Function)
那么问题来了,如何判断某变量是否为数组数据类型?
1 if(typeof Array.isArray==="undefined") 2 { 3 Array.isArray = function(arg){ 4 return Object.prototype.toString.call(arg)==="[object Array]" 5 }; 6 }
1 document.getElementById(“ID”).value
1 var domList = document.getElementsByTagName(‘input’) 2 var checkBoxList = []; 3 var len = domList.length; //缓存到局部变量 4 while (len--) { //使用while的效率会比for循环更高 5 if (domList[len].type == ‘checkbox’) { 6 checkBoxList.push(domList[len]); 7 } 8 }
1 var dom = document.getElementById(“ID”); 2 dom.innerHTML = “xxxx” 3 dom.style.color = “#000”
那么问题来了,Javascript的事件流模型都有什么?
Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。
优点:
缺点:
JSON是一种轻量级的数据交换格式,ECMA的一个子集
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)
1 var a; 2 alert(typeof a); // undefined 3 alert(b); // 报错
解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
1 var a = null; 2 alert(typeof a); //object
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。
1 var undefined; 2 undefined == null; // true 3 1 == true; // true 4 2 == true; // false 5 0 == false; // true 6 0 == ''; // true 7 NaN == NaN; // false 8 [] == false; // true 9 [] == ![]; // true
那么问题来了,看下面的代码,输出什么,foo的类型为什么?
1 var foo = "11"+2-"1"; 2 console.log(foo); 3 console.log(typeof foo);
执行完后foo的值为111,foo的类型为Number。
1 var foo = "11"+2+"1"; //体会加一个字符串'1' 和 减去一个字符串'1'的不同 2 console.log(foo); 3 console.log(typeof foo);
执行完后foo的值为113,foo的类型为String。
1 var a = new Object(); 2 a.value = 1; 3 b = a; 4 b.value = 2; 5 alert(a.value);
答案:2(考察引用数据类型细节)
答案:alert(stringArray.join(“”))
已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
1 function combo(msg){ 2 var arr=msg.split("-"); 3 for(var i=1;i<arr.length;i++){ 4 arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); 5 } 6 msg=arr.join(""); 7 return msg; 8 }
(考察基础API)
1) 实现对该数组的倒排,输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]
1 var numberArray = [3,6,2,4,1,5]; 2 3 numberArray.reverse(); // 5,1,4,2,6,3 4 5 numberArray.sort(function(a,b){ //6,5,4,3,2,1 6 return b-a; 7 })
1 var d = new Date(); 2 // 获取年,getFullYear()返回4位的数字 3 var year = d.getFullYear(); 4 // 获取月,月份比较特殊,0是1月,11是12月 5 var month = d.getMonth() + 1; 6 // 变成两位 7 month = month < 10 ? '0' + month : month; 8 // 获取日 9 var day = d.getDate(); 10 day = day < 10 ? '0' + day : day; 11 alert(year + '-' + month + '-' + day);
答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{/$id}/g, ’10′).replace(/{/$name}/g, ‘Tony’);
1 function escapeHtml(str) { 2 return str.replace(/[<>”&]/g, function(match) { 3 switch (match) { 4 case “<”: 5 return “<”; 6 case “>”: 7 return “>”; 8 case “&”: 9 return “&”; 10 case “/””: 11 return “"”; 12 } 13 }); 14 }
答案:if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
1 var foo = 1; 2 function(){ 3 console.log(foo); 4 var foo = 2; 5 console.log(foo); 6 }
答案:输出undefined 和 2。上面代码相当于:
1 var foo = 1; 2 function(){ 3 var foo; 4 console.log(foo); //undefined 5 foo = 2; 6 console.log(foo); // 2; 7 }
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分。
1 var iArray = []; 2 funtion getRandom(istart, iend){ 3 var iChoice = istart - iend +1; 4 return Math.floor(Math.random() * iChoice + istart; 5 } 6 for(var i=0; i<10; i++){ 7 iArray.push(getRandom(10,100)); 8 } 9 iArray.sort();
1 var array1 = ['a','b','c']; 2 var bArray = ['d','e','f']; 3 var cArray = array1.concat(bArray); 4 cArray.splice(1,1);
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
答案:
1 function serilizeUrl(url) { 2 var result = {}; 3 url = url.split("?")[1]; 4 var map = url.split("&"); 5 for(var i = 0, len = map.length; i < len; i++) { 6 result[map[i].split("=")[0]] = map[i].split("=")[1]; 7 } 8 return result; 9 }
答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即/”表示”),并且还需要双反斜杠(即//表示一个/)。 使用正则表达字面量的效率更高。
邮箱的正则匹配:
1 var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
1 for(var i=1;i<=3;i++){ 2 setTimeout(function(){ 3 console.log(i); 4 },0); 5 };
答案:4 4 4。
原因:Javascript事件处理器在线程空闲之前不会运行。那么问题来了, 如何让上述代码输出1 2 3?
1 for(var i=1;i<=3;i++){ 2 setTimeout((function(a){ //改成立即执行函数 3 console.log(a); 4 })(i),0); 5 }; 6 7 1 //输出 8 2 9 3
使用自带接口trim(),考虑兼容性:
1 if (!String.prototype.trim) { 2 String.prototype.trim = function() { 3 return this.replace(/^/s+/, "").replace(//s+$/,""); 4 } 5 } 6 7 // test the function 8 var str = " /t/n test string ".trim(); 9 alert(str == "test string"); // alerts "true"
答案:
caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。
那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)
1 var result=[]; 2 function fn(n){ //典型的斐波那契数列 3 if(n==1){ 4 return 1; 5 }else if(n==2){ 6 return 1; 7 }else{ 8 if(result[n]){ 9 return result[n]; 10 }else{ 11 //argument.callee()表示fn() 12 result[n]=arguments.callee(n-1)+arguments.callee(n-2); 13 return result[n]; 14 } 15 } 16 }
1 // 方法一: 2 Object.prototype.clone = function(){ 3 var o = this.constructor === Array ? [] : {}; 4 for(var e in this){ 5 o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; 6 } 7 return o; 8 } 9 10 //方法二: 11 /** 12 * 克隆一个对象 13 * @param Obj 14 * @returns 15 */ 16 function clone(Obj) { 17 var buf; 18 if (Obj instanceof Array) { 19 buf = []; //创建一个空的数组 20 var i = Obj.length; 21 while (i--) { 22 buf[i] = clone(Obj[i]); 23 } 24 return buf; 25 }else if (Obj instanceof Object){ 26 buf = {}; //创建一个空对象 27 for (var k in Obj) { //为这个对象添加新的属性 28 buf[k] = clone(Obj[k]); 29 } 30 return buf; 31 }else{ //普通变量直接赋值 32 return Obj; 33 } 34 }
1 var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; 2 function deRepeat(){ 3 var newArr=[]; 4 var obj={}; 5 var index=0; 6 var l=arr.length; 7 for(var i=0;i<l;i++){ 8 if(obj[arr[i]]==undefined) 9 { 10 obj[arr[i]]=1; 11 newArr[index++]=arr[i]; 12 } 13 else if(obj[arr[i]]==1) 14 continue; 15 } 16 return newArr; 17 18 } 19 var newArr2=deRepeat(arr); 20 alert(newArr2); //输出1,2,3,4,5,6,9,25
1 function Dog() { 2 this.wow = function() { 3 alert(’Wow’); 4 } 5 this.yelp = function() { 6 this.wow(); 7 } 8 }
小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp) 。请根据描述,按示例的形式用代码来实。 (继承,原型,setInterval)
答案:
1 function MadDog() { 2 this.yelp = function() { 3 var self = this; 4 setInterval(function() { 5 self.wow(); 6 }, 500); 7 } 8 } 9 MadDog.prototype = new Dog(); 10 11 //for test 12 var dog = new Dog(); 13 dog.yelp(); 14 var madDog = new MadDog(); 15 madDog.yelp();
1 <ul id=”test”> 2 <li>这是第一条</li> 3 <li>这是第二条</li> 4 <li>这是第三条</li> 5 </ul>
答案:
1 // 方法一: 2 var lis=document.getElementById('2223').getElementsByTagName('li'); 3 for(var i=0;i<3;i++) 4 { 5 lis[i].index=i; 6 lis[i].onclick=function(){ 7 alert(this.index); 8 }; 9 } 10 11 //方法二: 12 var lis=document.getElementById('2223').getElementsByTagName('li'); 13 for(var i=0;i<3;i++) 14 { 15 lis[i].index=i; 16 lis[i].onclick=(function(a){ 17 return function() { 18 alert(a); 19 } 20 })(i); 21 }
答案:(过长,点击打开)
1 if(window.addEventListener){ 2 var addListener = function(el,type,listener,useCapture){ 3 el.addEventListener(type,listener,useCapture); 4 }; 5 } 6 else if(document.all){ 7 addListener = function(el,type,listener){ 8 el.attachEvent("on"+type,function(){ 9 listener.apply(el); 10 }); 11 } 12 }
评价:
改进如下:
1 function addEvent(elem, type, handler){ 2 if(elem.addEventListener){ 3 elem.addEventListener(type, handler, false); 4 }else if(elem.attachEvent){ 5 elem['temp' + type + handler] = handler; 6 elem[type + handler] = function(){ 7 elem['temp' + type + handler].apply(elem); 8 }; 9 elem.attachEvent('on' + type, elem[type + handler]); 10 }else{ 11 elem['on' + type] = handler; 12 } 13 }
1 String.prototype.spacify = function(){ 2 return this.split('').join(' '); 3 };
接着上述答题,那么问题来了
1) 直接在对象的原型上添加方法是否安全?尤其是在Object对象上。 (这个我没能答出?希望知道的说一下。)
答案:在Javscript中,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非是一视同仁的,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问),至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解析执行。(函数声明提升)
可行的方法一:
1 function log(msg) { 2 console.log(msg); 3 } 4 5 log("hello world!") // hello world! 6
如果要传入多个参数呢?显然上面的方法不能满足要求,所以更好的方法是:
1 function log(){ 2 console.log.apply(console, arguments); 3 };
那么问题来了, apply和call方法的异同 ?
答案:
对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。
答案:
伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
假设接第八题题干,我们要给每个log方法添加一个”(app)”前缀,比如’hello world!’ ->’(app)hello world!’。方法如下:
1 function log(){ 2 var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法,将argument转化为真正的数组 3 args.unshift('(app)'); 4 5 console.log.apply(console, args); 6 };
1 var User = { 2 count: 1, 3 4 getCount: function() { 5 return this.count; 6 } 7 }; 8 9 console.log(User.getCount()); // what? 10 11 var func = User.getCount; 12 console.log(func()); // what?
问两处console输出什么?为什么?
答案是1和undefined。
func是在winodw的上下文中被执行的,所以会访问不到count属性。
那么问题来了, 如何确保Uesr总是能访问到func的上下文,即正确返回1 。
答案:正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下:
1 Function.prototype.bind = Function.prototype.bind || function(context){ 2 var self = this; 3 4 return function(){ 5 return self.apply(context, arguments); 6 }; 7 } 8 9 var func = User.getCount.bind(User); 10 console.log(func());
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
1 /* 2 * 传递函数给whenReady() 3 * 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用 4 */ 5 var whenReady = (function() { //这个函数返回whenReady()函数 6 var funcs = []; //当获得事件时,要运行的函数 7 var ready = false; //当触发事件处理程序时,切换为true 8 9 //当文档就绪时,调用事件处理程序 10 function handler(e) { 11 if(ready) return; //确保事件处理程序只完整运行一次 12 13 //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好 14 if(e.type === 'onreadystatechange' && document.readyState !== 'complete') { 15 return; 16 } 17 18 //运行所有注册函数 19 //注意每次都要计算funcs.length 20 //以防这些函数的调用可能会导致注册更多的函数 21 for(var i=0; i<funcs.length; i++) { 22 funcs[i].call(document); 23 } 24 //事件处理函数完整执行,切换ready状态, 并移除所有函数 25 ready = true; 26 funcs = null; 27 } 28 //为接收到的任何事件注册处理程序 29 if(document.addEventListener) { 30 document.addEventListener('DOMContentLoaded', handler, false); 31 document.addEventListener('readystatechange', handler, false); //IE9+ 32 window.addEventListener('load', handler, false); 33 }else if(document.attachEvent) { 34 document.attachEvent('onreadystatechange', handler); 35 window.attachEvent('onload', handler); 36 } 37 //返回whenReady()函数 38 return function whenReady(fn) { 39 if(ready) { fn.call(document); } 40 else { funcs.push(fn); } 41 } 42 })();
如果上述代码十分难懂,下面这个简化版:
1 function ready(fn){ 2 if(document.addEventListener) { //标准浏览器 3 document.addEventListener('DOMContentLoaded', function() { 4 //注销事件, 避免反复触发 5 document.removeEventListener('DOMContentLoaded',arguments.callee, false); 6 fn(); //执行函数 7 }, false); 8 }else if(document.attachEvent) { //IE 9 document.attachEvent('onreadystatechange', function() { 10 if(document.readyState == 'complete') { 11 document.detachEvent('onreadystatechange', arguments.callee); 12 fn(); //函数执行 13 } 14 }); 15 } 16 };
回答出概念即可,下面是几个要点
1 function setcookie(name,value,days){ //给cookie增加一个时间变量 2 var exp = new Date(); 3 exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天 4 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 5 } 6 function getCookie(name){ 7 var result = ""; 8 var myCookie = ""+document.cookie+";"; 9 var searchName = "+name+"="; 10 var startOfCookie = myCookie.indexOf(searchName); 11 var endOfCookie; 12 if(satrtOfCookie != -1){ 13 startOfcookie += searchName.length; 14 endOfCookie = myCookie.indexOf(";",startOfCookie); 15 result = (myCookie.substring(startOfCookie,endOfCookie)); 16 } 17 return result; 18 } 19 (function(){ 20 var oTips = document.getElementById('tips');//假设tips的id为tips 21 var page = { 22 check: function(){//检查tips的cookie是否存在并且允许显示 23 var tips = getCookie('tips'); 24 if(!tips || tips == 'show') return true;//tips的cookie不存在 25 if(tips == "never_show_again") return false; 26 }, 27 hideTip: function(bNever){ 28 if(bNever) setcookie('tips', 'never_show_again', 365); 29 oTips.style.display = "none";//隐藏 30 }, 31 showTip: function(){ 32 oTips.style.display = "inline";//显示,假设tips为行级元素 33 }, 34 init: function(){ 35 var _this = this; 36 if(this.check()){ 37 _this.showTip(); 38 setcookie('tips', 'show', 1); 39 } 40 oTips.onclick = function(){ 41 _this.hideTip(true); 42 }; 43 } 44 }; 45 page.init(); 46 })();
1 //define 2 (function(window){ 3 function fn(str){ 4 this.str=str; 5 } 6 7 fn.prototype.format = function(){ 8 var arg = ______; 9 return this.str.replace(_____,function(a,b){ 10 return arg[b]||""; 11 }); 12 } 13 window.fn = fn; 14 })(window); 15 16 //use 17 (function(){ 18 var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>'); 19 console.log(t.format('http://www.alibaba.com','Alibaba','Welcome')); 20 })();
答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果:
第一个空是:arguments第二个空是://{(/d+)/}/ig
答案: 对象或者Json都是不错的选择哦