美文网首页面试题
web前端面试题整理后篇(程序篇)

web前端面试题整理后篇(程序篇)

作者: 横冲直撞666 | 来源:发表于2017-03-29 18:56 被阅读95次

    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){

            return function(){

                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));

    相关文章

      网友评论

        本文标题:web前端面试题整理后篇(程序篇)

        本文链接:https://www.haomeiwen.com/subject/lqjyottx.html