web前端面试题整理后篇（程序篇）

需要web前端课程工具和电子书，可以加: 33群105601600;  22群120342833

1. var obj ={a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗？

var obj = {a : 1};

(function (obj) {

    obj = {a : 2};

})(obj);

//问obj的值会改变吗？

外部的obj不变.
因为匿名函数中obj传入参数等于是创建了一个局部变量obj, 里面的obj指向了一个新的对象 . 如果改成(function() { obj = {a : 2}; })(obj);  就会改变了


2. var obj = { a:1,  func: function() { (function() { a=2; }(); }} ; obj.func()       //obj中a的值会改变吗?匿名函数里的this指向的是什么?

var obj = {

    a:1, 

    func: function() {

        (function () {

            a=2;

        }();

    }

} ;

obj.func();

//obj中a的值会改变吗?匿名函数里的this指向的是什么?

obj里的a不会变.匿名函数里的this指向全局对象window.  这等于是给window加了一个名为a的属性
要改变obj中a的值 , 应当:

(function() {

    this.a = 2

}).call(this);

或者obj中定义 

func: function() {

    var self = this;

    (function(){

        self.a=2;

})();}

3. 要实现函数内每隔5秒调用自己这个函数，100次以后停止，怎么办?

(function(){

var index = 0;

function fn(){

     if(index < 100){

         index++;

         setTimeout(function(){

         fn();

         },5000);     

      }

}

fn();

})();

4. 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？
方法1 :

var oLi = document.getElementsByTagName('li');

for(var i=0; i<oLis.length; i++){

    oLis[i].onclick =(function(j){

        returnfunction(){

            alert(j);

        }

    })(i);

}

方法2:

var oLi = document.getElementsByTagName('li');

for(var i=0; i<oLi.length; i++){

    (function(j){

        oLi[j].onclick= function(){

            alert(j);

        };

    })(i);

}

方法3:

var oLi = document.getElementsByTagName('li');

for(var i=0; i<oLi.length; i++){

    oLi[i].index = i;

    oLi[i].onclick =function(){

       alert(this.index);

    }

}

5. js实现数组去重怎么实现?
方法1. 创建一个新的临时数组来保存数组中已有的元素

var a = new Array(1,2,2,2,2,5,3,2,9,5,6,3);

Array.prototype.unique1 = function(){

    var n = [];     //一个新的临时数组

    for(var i=0;i<this.length; i++){

        //如果把当前数组的第i已经保存进了临时数组,那么跳过

       if(n.indexOf(this[i]) == -1){

           n.push(this[i]);

        }

    }

    return n;

}

console.log(a.unique1());

方法2. 使用哈希表存储已有的元素

Array.prototype.unique2 = function(){

    var hash = {},

        n = [];     //hash 作为哈希表, n为临时数组

    for(var i=0;i<this.length; i++){

       if(!hash[this[i]]){         //如果hash表中没有当前项

           hash[this[i]] = true;   //存入hash表

           n.push(this[i]);        //当前元素push到临时数组中

        }

    }

    return n;

}

方法3. 使用indexOf判断数组元素第一次出现的位置是否为当前位置

Array.prototype.unique3 = function(){

    var n = [this[0]];

    for(var i=1;i<this.length; i++)    //从第二项开始遍历

    {

        //如果当前数组元素在数组中出现的第一次的位置不是i

        //说明是重复元素

       if(this.indexOf(this[i]) == i){

           n.push(this[i]);

        }

    }

    return n;

}

方法4. 先排序再去重

Array.prototype.unique4 = function(){

   this.sort(function(a, b){ return a - b;});

    var n = [this[0]];

    for(var i=1;i<this.length; i++){

        if(this[i] !=this[i-1]){

           n.push(this[i]);

        }

    }

    return n;

}

第一种方法和第三种方法都使用了indexOf(),这个函数的执行机制也会遍历数组
第二种方法使用了一个哈希表, 是最快的. 
第三种方法也有一个排序的复杂度的计算.
然后做了个测试, 随机生成100万个0-1000的数组结果如下:

第三种方法总是第二种方法的将近两倍,而第四种方法与数组的范围有关,
如果是0-100的数组

而如果是0-10000,方法四看着就效果还不错了

而第二种方法永远是最好的,但是是以空间换时间
全部代码如下

var a = [];

for(var i=0; i<1000000; i++){

   a.push(Math.ceil(Math.random()*10000));

}

 

Array.prototype.unique1 = function(){

    var n = [];     //一个新的临时数组

    for(var i=0;i<this.length; i++){

        //如果把当前数组的第i已经保存进了临时数组,那么跳过

       if(n.indexOf(this[i]) == -1){

           n.push(this[i]);

        }

    }

    return n;

}

 

Array.prototype.unique2 = function(){

    var hash = {},

        n = [];     //hash 作为哈希表, n为临时数组

    for(var i=0;i<this.length; i++){

       if(!hash[this[i]]){         //如果hash表中没有当前项

           hash[this[i]] = true;   //存入hash表

           n.push(this[i]);        //当前元素push到临时数组中

        }

    }

    return n;

}

 

Array.prototype.unique3 = function(){

    var n = [this[0]];

    for(var i=1;i<this.length; i++)    //从第二项开始遍历

    {

        //如果当前数组元素在数组中出现的第一次的位置不是i

        //说明是重复元素

       if(this.indexOf(this[i]) == i){

           n.push(this[i]);

        }

    }

    return n;

}

 

Array.prototype.unique4 = function(){

   this.sort(function(a, b){ return a - b;});

    var n = [this[0]];

    for(var i=1;i<this.length; i++){

        if(this[i] !=this[i-1]){

           n.push(this[i]);

        }

    }

    return n;

}

var begin1 = new Date();

a.unique1();

var end1 = new Date();

 

var begin2 = new Date();

a.unique2();

var end2 = new Date();

 

var begin3 = new Date();

a.unique3();

var end3 = new Date();

 

var begin4 = new Date();

a.unique4();

var end4 = new Date();

 

console.log("方法一执行时间:" + (end1 - begin1));

console.log("方法二执行时间:" + (end2 - begin2));

console.log("方法三执行时间:" + (end3 - begin3));

console.log("方法四执行时间:" + (end4 - begin4));

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】