面试程序题，总结

1. 对于下面这段代码：<a href=”somewhere.html” onclick=”dosomething()”> 问题一：请列举其优缺点，说说你的看法。 问题二：请编写一个通用的事件注册函数（请看下面的

参考答案：
问题 一：
优点：简单易懂
缺点：按照表现与业务分离的原则，不应该将onclick事件写在html代码中，应该提取出来。

问题二：
function addEvent(elem,type,fn){
        if(elem.addEventListener){
            elem.addEventListener(type,fn,false);
        }else if(elem.attachEvent){
            elem.attachEvent('on'+type,fn);
        }else{
            elem['on'+type]=fn;
        }
}

 

 参考答案：

var otest = document.getElementById('test');
addEvent(otest,'focus',fn);
addEvent(otest,'blur',fb);
function addEvent(elem,type,fn){
    if(elem.addEventListener){
        elem.addEventListener(type,fn)
    }else if(elem.attachEvent){
        elem.attachEvent('on'+type,fn);
    }else{
        elem['on'+type]=fn;
    }
}
function fn(){
    if(this.value=='请输入内容'||this.value==null){
        this.className='';
        this.value='';
    }
}
function fb(){
    if(this.value==''||this.value==null){
        this.value='请输入内容';
        this.className='tip';
    }
}

考点：
合格：HTML和CSS代码正确，JS功能正确
良好：事件注册采用addEventListener或attachEvent；样式和行为分离，JS代码中通过class改变样式
优秀：事件注册兼容主流浏览器；根据clN而不是value值来判断切换；封装成通用util
阅卷说明：

11. 请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求：（淘宝）
alert(" taobao".trim()); // 输出 "taobao"
alert(" taobao ".trim()); // 输出 "taobao"

参考答案：

String.prototype.trim = function() {
    return this.replace(/^s+|s+$/g, "");
};

 

12. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0

参考答案：

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....";
    var obj =  parseQueryString(url);
    alert(obj.key0)
    function parseQueryString(str){
        var params ={};
        var arr = str.split('?');
        var arr1= arr[1].split('&');
        //console.log(arr1);// ["key0=0", "key1=1", "key2=2....."]
        for(var i=0;i<arr1.length;i++){
            var a = arr1[i].split('=');// ["key0=0"]["key1=1"]["key2=2....."]
             params[a[0]]=a[1];
        }
        return params;
    }

 13. 请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。

　 参考答案：
   Array.prototype.distinct=function(){
        //this是数组[1, 2, 3, 4, 2, 3, 5, 1, 6, 7];
        var ret = [];
        for(var i=0;i<this.length;i++){
            for(var j=i+1;j<this.length;j++){
                if(this[i]===this[j]){
                    ret.push(this.splice(j, 1)[0]);//两个相同数第二个删除，第一个放新数组中
                }
            }
        }
        return ret;
    }
   console.log([1,2,3,1,2,3,4,4].distinct());// [1, 2, 3, 4]
   //或
   Array.prototype.distinct=function(){
       //this是数组[1, 2, 3, 4, 2, 3, 5, 1, 6, 7];、
       for(var i=0;i<this.length;i++){
           for(var j=i+1;j<this.length;j++){
                if(this[i]==this[j]){
                   this.splice(j, 1);//splice返回被删除的项目。
                }
           }
       }
      return this;
   }
   console.log([1,2,3,1,2,3,4,4].distinct());// [1, 2, 3, 4]

 

 14. 请根据下面的描述，用JSON语法编写一个对象:

“小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名
小学老师。”
var person = ?

var person={
        "name":"小明",
        "age":22,
        "city":'杭州',
        "interest":["电影","旅游"],
        "sisters":[
            {
                "name": "小芬",
                "age":25,
                "job": "护士"
            },{
                "name":"小芳",
                "age": 23,
                "job": "小学老师"
            }]
    }

 

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

<ul id='test'>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

参考答案：
什么是：即重用变量，又保护变量不被污染的一种机制
为什么：
全局变量：可反复使用，随处可用 -----全局污染
局部变量：仅函数内可用，不可重用
何时：如果希望即重用变量，又保护变量不被污染
如何：3步
      1. 定义外层函数，封装被保护的局部变量
      2. 定义内层函数，执行对外层函数局部变量的操作（ 这里操作了外层的n）
      3. 外层函数返回内层函数的对象
闭包如何形成：外层函数作用域（AO）无法释放，看有几个受保护的变量
缺点: 1、占内存，函数内函数，牵连，被内层函数引用着，不被释放可以忽略
  　　2、无法释放
（常用）外层函数返回内层函数对象3种方法：
1、return function(){...}
2、直接给全局变量赋值一个内部function
3、将内部函数保存在一个对象的属性或数组元素中

　　

 var oLis = document.querySelectorAll('#test li');
 for(var i=0;i<oLis.length;i++){
     (function(index){
         oLis[index].onclick=function(){
           console.log(index)
         }
     })(i)
 }

注：闭包很重要！

 

 

 

 

 

---恢复内容结束---