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;i<str.length;i++){var key = str[i];if(!obj[key]){obj[key]=1;}else{obj[key]++;}}//遍历obj，比较valuevar maxValue=-1;var maxKey="";var key;for(key in obj){if(obj[key]>maxValue){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<arr.length;i++){var a = arr[i].split('=');obj[a[0]] = a[1];}return obj;}var url="http://www.baidu.com/index.jsp?key0=0&key1=1&key2=2";var obj=parseQueryString(url);alert(obj['key0']);

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<str.length;i++){charCode=str.charCodeAt(i);if(charCode<0x007f){byteNums+=1;}else if((0x0080<=charCode)&&(charCode<=0x07ff)){byteNums+=2;}else if((0x0080<=charCode)&&(charCode<=0xffff)){byteNums+=3;}}return byteNums;}alert(getBytes("hahha你好"));//14

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）延迟脚本
在<script>标签中加上defer属性就会让浏览器并行地下载js文件，脚本会延迟到整个页面解析完毕后再运行，不会阻塞后续页面的渲染，如果多个<script>标签添加了defer属性，则按照出现顺序执行。例：
<script defer type="text/javascript" src="../alert.js"></script>

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.onload=loadJs("xxx") -->?与上面的方式有什么区别（疑惑中）
         或者特定的事件上，onclick="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