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

//obja的值会改变吗? 匿名函数里的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));

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

 

时间: 2024-10-25 20:41:31

web前端面试题整理后篇(程序篇)的相关文章

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

【web前端面试题整理02】前端面试题第二弹袭来,接招!(转)

前言 今天本来准备先了解下node.js的,但是, 看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端 面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 JavaScript编程题1.实现输出document对象中所有成员的名称和类型:2.如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)3.如何利用JS生成一个table?4.实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px:5.假设有一个4行td的tabl

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

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}

【web前端面试题整理08】说说最近几次面试(水)

为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在的团队获得,在短期内也看不到希望,加之公司职级晋升不合理等考虑,也就自然而然想到了离职. 其实在鞋厂这两年,真的收获了很多东西,也负责了很重要的业务,这些财富可能是其它大公司不一定能给予的,虽然一直级别低点也就没太多在意,直到最近职级福利缩水...... 最初我面试的职级为X,HR给了一套智力题做,

2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined 引用数据类型:Object(Array,Date,RegExp,Function,Null) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方法,故有时会失效 方法二.obj instanceof Array

WEB前端面试题整理列表

1.列举你工作中遇到的IE6 BUG,谈谈解决方案. 3.如何用CSS分别单独定义IE6.7.8的width属性. 所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7.FF 共用height: 100px !important; 4.CSS中哪些属性可以同父元素继承. 继承:(X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性 Color

【web前端面试题整理07】我不理解表现与数据分离。。。(转)

拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. http://www.cnblogs.com/aaronjs/ 前言 上周回到了成都,这周就准备找工作了,对成都的聚美优品其实比较有好感的,所以昨天就先去 面试了,感觉技术面试的还不错啦,结果最后HR说经理不在,让我等经理反馈. 我当时相信了,但是回来想想感觉可能失败了,但是我不知道哪里出了问题.

WEB前端面试题整理

1.列举你工作中遇到的IE6 BUG,谈谈解决方案. 1.双倍边距bug: 例如:给元素添加属性float:left的时候,设置margin-left,margin属性会加倍,此时需要添加属性display:inline. 这样能避免双倍边距 2.发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的 3px的bug.只有采用“暴力破解法”,人为地调整3px. 3.当子元素浮动未知高度时,使父容器适应子元素的高度bug overflow:auto;-------让父容器自适应子元素的高

web前端面试题系列:(一)

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你