Web前端面试题笔记_JavaScript篇

1.判断字符串是否这样组成的，第一个必须是字母，后面的可以是字母、数字、下划线，总长度为5-20。

var regStr=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
regStr.test("a_a33_2222_aa");

2.截取字符串abcdefg中的efg。

if(/efg/.test(str)){
      var efg = str.substr(str.indexOf("efg"),3);
      alert(efg);
}

/*

substring() 方法用于提取字符串中介于两个指定下标之间的字符

stringObject.substr(start,length)

*/

3.判断一个字符串中出现次数最多的字符，并统计这个字符的数量。

var str="abcdefgaaabbccd";
		var obj={};
		//通过遍历将字符以key:value形式存储在obj中
		for(var i=0;imaxValue){
				maxValue=obj[key];
				maxKey=key;
			}
		}
		alert("maxKey:"+maxKey+" maxValue:"+maxValue);

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

生成String类型有两种方式：

//字符串字面量
var str1="Hello World";

//通过String()函数
var str2 = new String("Hello World");

//判断函数
function isString(str){

if(typeof str=="string"|| str.constructor==String){ //constructor属性保存用于创建当前对象的构造函数，即String()
 return true;
}else{return false;}
}
var str ="";
alert(isString(1));
alert(isString(str));
alert(isString(new String(str)));

5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL的参数解析为一个对象。

function parseQueryString(url){
			var obj={};
			var arr=url.split('?');
			if(arr.length<=1){
				return obj;
			}
			arr=arr[1].split('&');
			for(var i=0;i




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

此题需要判断在UTF-8下存储的String的字节数，需参考Unicode字符编码数值对应的存储长度：

UCS-2编码(16进制) UTF-8 字节流(二进制) 
0000 - 007F 0xxxxxxx （1字节）
0080 - 07FF 110xxxxx 10xxxxxx （2字节）
0800 - FFFF 1110xxxx 10xxxxxx 10xxxxxx （3字节）

参考：谈谈Unicode编码：http://www.lihuasoft.net/article/show.php?id=2778

function getBytes(str){
			var byteNums=0; //字节数
			var charCode;
			var i;
			for(i=0;i




7.编写一个方法，去掉数组中重复的元素。

/*去掉重复数组:*/
		Array.prototype.strip = function() {
		    var arr = [], hash = {};
		    for(var i=0, elem; (elem = this[i]) != undefined; i++)  {
		        if (!hash[elem])
		        {
		            arr.push(elem);
		            hash[elem] = true;
		        }
		    }
		    return arr;
		}
		
		var arr=[2,2,1,3,2,2,2];
		alert(arr.strip());

8.看以下代码，按要求作答：

if(window.addEventListener){
       var fn = function (type,fn,useCapture){
       el.addEventListener(type,fn,useCapture);
        }
}
else if(window.attachEvent){ //ie?
        fn = function (type,fn){
        el.attachEvent('on'+type,);
        }
}

a)以上代码的作用
b)以上代码的优点
c)以上代码中的问题，如果你有更好的，请把它编写出来
-->
my answer:
a)以上代码主要是为HTML元素绑定一个事件，并且兼容IE和DOM标准下的浏览器
b)以上代码的优点是做到的了事件绑定的兼容性
c)以上代码中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方法来改变函数的作用域。

9.JavaScript的装载与执行（参考coolshell）
浏览器对于JavaScript的运行有两大特性：（1）装载后立即执行   （2）执行的过程中会阻塞后面的内容（包括页面渲染、其他资源的下载），如果有多个js文件被引入，那么对于浏览器来说，这些js文件会被串行地载入，并依次执行。所以很多网站将Javascript放在最后面来执行，或者使用window.onload 或者document ready 来预加载js。

10.Javascript的延迟和异步加载
defer：（IE4~IE7）延迟脚本
在

async：异步脚本：
async属性支持大多数现代浏览器，只要出现这个属性就开始异步加载js文件。多个有async属性的js文件并不按顺序下载，加载后会立即执行js文件。
异步加载js文件比较标准的方式：
示例代码：

function loadJs(script_filename){
	var script = document.createElement('script');
	script.setAttribute('type','text/javascript');
	script.setAttribute('src',script_filename);
	script.setAttribute('	id','script_id');
	
	var script_id = document.getElementById('script_id');
	if(script_id){ //已经执行过则把head中的js标签删掉
	document.getElementsTagName('head')[0].removeChild(script_id);
	}
	document.getElementsTagName('head')[0].appendChild(script);
}

另外，按需异步载入js
比如：绑定在window.onload事件上：window.οnlοad=loadJs("xxx") -->?与上面的方式有什么区别（疑惑中）
         或者特定的事件上，οnclick="loadJs(xxx)"

11.写一个方法，要求创建script元素，将其插入DOM中，加载完后callback

function loadScript(url, callback)  {
    var script = document.createElement("script")
    script.setAtttribute("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.setAttribute('src',url);
     　document.getElementsByTagName('head')[0].appendChild(script);
}

12.如何理解javascript面向对象
面向对象的语言都有一个标志，那就是他们都有类的概念。而通过类可以创建任意多个具有相同属性和方法的对象。但Javascript中没有类的概念。每个对象都是基于一个引用类型创建的，或者是自定义的类型。

13.如何理解Javascript中的this

14.写一个闭包的例子，并说说你的理解

function test(a){

 return function(x){
               return x+a;
    }
}      var b=test(10); alert(b(10)); //20