很有意思的前端面试题（持续更新中）

芹泽_多摩雄
442 阅读14分钟
原文链接： www.qdfuns.com
1.

 var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
console.log(foo);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


2. 

var foo = {n:1};
var bar = foo;
foo.x = foo = {n:2};
console.log(foo.x);
console.log(bar.x);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


3.

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};
console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


4

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


5.求一个正则表达式，要求 数字，大写字母，小写字母，特殊字符（_）至少两种或两种以上组合的正则表达式。

/(?=.*\d)(?=.*[a-zA-Z])|(?=.*\_)(?=.*[a-zA-Z])|(?=.*\_)(?=.*\d)|(?=.*\_)(?=.*\d)(?=.*[a-zA-Z])^[\w]{6,20}$/
/^(?!\d+$)(?![A-Z]+$)(?![a-z]+$)(?![_]+$)([0-9a-zA-Z_]{6,20})$/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


6.

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


7.如何让第六题的代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){
       console.log(a);    
   })(i),0);  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


8.下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>

// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=function(){
        alert(this.index);
    };
}
 
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].onclick=(function(a){
        return function() {
            alert(a);
        }
    })(i);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


9.数组去重

var arr = [1,3,1,2,3,4,55,23,4,23,2];
        function uniquueArr(arr) {
            var obj = {},
                arr1 = [];
            for(var i=0,len = arr.length; i<len; i++) {
                if( !obj[arr[i]] ) {
                    obj[arr[i]] = true;
                    arr1.push(arr[i]);
                }
            }
            return arr1;
        }
        console.log(uniquueArr(arr));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


10.找出一个字符串里面出现最多个数的字符

 var str='dasdasdadsssssaaaaaaaaaaaaa';
        function maxCode(str) {
            var obj = {},
                index = 0,
                max = 0;
            for(var i=0,len = str.length; i<len; i++) {
                if( !obj[str.charAt(i)] ) {
                    obj[str.charAt(i)] = 1;
                } else {
                    obj[str.charAt(i)] ++;
                }
            }
            for(var i in obj){
                if(obj[i] > max) {
                    index = i;
                    max = obj[index];
                }
            }
            return {
                index :index,
                max : max
            }
        }
        console.log(maxCode(str));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


11.

function Foo() {
            getName = function () { console.log(1); };
            return this;
        }
        Foo.getName = function () { console.log(2);};
        Foo.prototype.getName = function () { console.log(3);};
        var getName = function () { console.log(4);};
        function getName() { console.log(5);}
        //请写出以下输出结果：
        Foo.getName();//
        getName();//
        Foo().getName();//
        getName();//
        new Foo.getName();//
        new Foo().getName();//
        new new Foo().getName();//
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


12.

function A() {
            this.name = 'lvdaofeng';
            return 'wangdaming';
        };
        var a = new A();
        console.log(a.name);
        function B() {
            this.name = 'chengli';
            return {
                name : 'dapang'
            }
        }
        var b = new B();
        console.log(b.name);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

13.

var test = ( function(a) {
    this.a = a;
    return function(b) {
        return this.a+ b;
    }
})( (function(a, b){
    return a
})(1,2) );
console.log(test(4));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


14.
很有意思的前端面试题（持续更新中）
说一说这样的模块要怎么写，从切图说起


<!-- 商品排序 -->
    <div class="goods_sort clearfix">
        <div class="page_turning">
            <span>共<span class="page_turning_num">10074</span>个商品</span>
        </div>
        <ul class="sort_content clearfix">
            <li>排序：</li>
            <li class="selling_price"><a href="###" class="two active">售价</a></li>
            <li class="sales_volume"><a href="###" class="two">销量</a></li>
            <li class="stock_balance"><a href="###" class="three">库存量</a></li>
            <li class="time_shelves"><a href="###" class="four">上架时间</a></li>
        </ul>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


/*内容-商品排序*/
.goods_sort {
    height: 32px;
    line-height: 32px;
    padding: 0 33px 0 18px;
    background-color: #fff;
    border:1px solid #e6e6e6;
    margin-top: 20px;  
}
.sort_content {
    height: 100%;
}
.sort_content li {
    float: left;
    height: 100%;
    min-width: 42px;
    border-right:1px solid #e6e6e6;
    font-weight: 700;
}
.sort_content a {
    display: block;
    padding:0 20px 0 10px;
    height: 100%;
    text-align: center;
    color: #333;
    background:#fff url(../images/icon.png) no-repeat;
}
.sort_content .two {
    background-position: 38px -3072px;
}
.sort_content .three {
    background-position: 51px -3072px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


// 二级页以及搜索页的点击排序
$('.sort_content a').click(function() {
    $('.sort_content a').removeClass('active');
    $(this).addClass('active');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


15.写一js运动框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript">
    function moveFrame(obj, attr, iTarget) {
        this.cur = 0;
        this.speed = 0;
        this.move(obj, attr, iTarget);
    } 
    moveFrame.prototype = {
        move : function(obj, attr, iTarget) {
            var oThis = this;
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



16.

for(var i=1;i<=3; i++) {
        console.log(i);
    }
    for(var i=1;i<=3; i++) {
        setTimeout(function() {
            console.log(i);
        },0)
    }
    for(var i=1;i<=3; i++) {
        setTimeout((function(a) {
            console.log(a);
        })(i),0)
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


17.

var a = 1;
        console.log(a.__proto__);//Number
        console.log(a.__proto__.__proto__);//Object
        console.log(a.__proto__.__proto__.__proto__);//null
        console.log(a.prototype);
        var a = {
            x:1
        };
        console.log(a.__proto__);//Object
        console.log(a.__proto__.__proto__);//null
        console.log(a.prototype);
        function a() {
            this.y = 2;
        }
        console.log(a.__proto__);//Object
        console.log(a.__proto__.__proto__);//null
        console.log(a);
        var Person = function() {};
        var p = new Person();
        console.log(p.__proto__ );
        console.log(Person.prototype);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


18. 

var obj = {
            name:1
        };
        var aa = obj;
        aa.name = 2;
        var bb = obj ;
        bb.name = 3;
        console.log(aa.name);
        function Obj() {
            this.name = 1;
        }
        var aa = new Obj();
        aa.name = 2;
        var bb = new Obj();
        bb.name = 3;
        console.log(aa.name);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


19.

var scope = 'top';
var f1 = function() {
    console.log(scope);
};
var f2 = function() {
    var scope = 'f2';
    f1();
};
f2();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


20.

function A() {
    this.add1 = function() {
        return ++this.num;
    }
}
A.prototype.num = 1;
var a1 = new A();
var a2 = new A();
console.log(a1.add1());
console.log(a2.add1());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


21.

function A() {
    this.add1 = function() {
        return ++this.num.x;
    }
}
A.prototype.num = {
    x:1
};
var a1 = new A();
var a2 = new A();
console.log(a1.add1());
console.log(a2.add1());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


22.

let person = {
        name : '大胖',
        say : function() {
            console.log(this.name);
        },
        say1 : ()=>{
            console.log(this.name);
        }
    };
    let name = '二胖';
    setTimeout(function() {
        console.log(this);
        person.say();//大胖
    }, 100);
    setTimeout( person.say, 100 );//二胖
    person.say1();//二胖
    setTimeout(function() {
        console.log(this);
        person.say1();//二胖
    }, 100);
    setTimeout( person.say1, 100 );//二胖
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


23.判断一个对象是不是数组的办法：

let arr1 = [];
console.log(arr1 instanceof Array);
console.log( arr1.length === 'number' );
console.log(arr1.splice != 'undefined' );
console.log(Object.prototype.toString.call(arr1)==='[object Array]');
console.log(Array.isArray(arr1));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


24.2017.2.18新增

setTimeout(function() {
    console.log(1);
},100);
for(var i=0; i<10000; i++) {
    console.log(2);
}
setTimeout(function() {
    console.log(3);
},50);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


25.js事件循环机制

setTimeout(function() {
    console.log('timeout1');
}, 100)
setTimeout(function() {
    console.log('timeout2');
})
new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})
console.log('global1');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


26.如何在设置一个对象的属性的时候同时改成这个对象的其他属性（已存在的）（2017年7月31日）

var man = {
    aa : 2008,
    age : 15
};
Object.defineProperty( man, 'year', {
    set : function( newValue ) {
        if ( newValue > 2004 ) {
            this.aa = newValue;
            this.age += 1;
        }
    }
});
man.year = 2012;
console.log( man.aa );
console.log( man.age );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


27.闭包 下面五段代码分别输出什么？并且什么时候输出什么？（2017年9月1号）

for(var i = 0; i < 5; i++) {
    console.log(i);
}
for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}
for(var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
for(var i = 0; i < 5; i++) {
    (function() {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
for(var i = 0; i < 5; i++) {
    setTimeout((function(i) {
        console.log(i);
    })(i), i * 1000);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


28.语法题 有一个合法的 JSON 对象（即不包含函数等值的对象），设计一个函数，取出该对象内所有 key 为 "id" 并且其值不为对象、数组的值，装入一个数组并返回。
function extractIds(data) {
    // implement
}
样例数据：
var data = {
    id: 1,
    items: [
        { id: 2 },
        { item: 3, id: [
            { id: 4 },
            { id: 5 }
        ]}
    ]};

extractIds(data); // should return [ 1, 2, 4, 5 ] 

function filter (items) {
    const arr = [];
    for (let key in items) {
      if (key === 'id' && typeof items[key] !== 'object') {
        arr.push(items[key])
      }
      if (typeof items[key] === 'object') {
        arr.push(...filter(items[key]))
      }
    }
    return arr
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
avatar
文章
阅读
粉丝