前端面试题

今天看到一份某大厂的前端面试题，自己看了看挺简单的，由于我是即将要面临找工作实习的大学生，所以想分享给大家。

1. 给String定义一个doRepate方法，该方法接受一个整数作为参数，作为字符串重复的次数，最后返回重复指定次数的字符串。 例如

console.log("g".doRepate(3)) // ggg

我的答案：

String.prototype.doRepate = function doRepate(num) {
    let str = '';
    for (var i = 0; i < num; i++) {
        str += this;
    }
    return str;
}
console.log('a'.doRepate(5)); // aaaaa

上面没有容错什么的还不够详细，只是提供一个简单的实现，具体的可以自己查找资料。

2. 请写出下面的代码运行的结果，并解释原理。

ar fullName = 'John';
var obj = {
    fullName: 'Colin',
    prop: {
        fullName: 'Adr',
        getFullName: function(){
            return this.fullName;
        }
    }
};
console.log(obj.prop.getFullName());
var test = obj.prop.getFullName;
console.log(test());

答案：

console.log(obj.prop.getFullName()); //Adr  
console.log(test()); //John

原理：作用域。

obj.prop.getFullName() //this是prop
test() //this是window

3. 修复前一个问题，让最后一个输出Adr. 答案：

console.log(test.call(obj.prop));
console.log(test.apply(obj.prop));  //改变this指向

4. 考虑如下代码

var nodes = document.getElementsByTagName('li');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', function click() {
        console.log('li' + i);
    }, false);
}

假设有10个li， 如果用户点击第一个和第四个会输出什么。 答案：10 10 5. 修复前一个问题，点击第一个输出0， 第二个输出1

// ES6
for (let i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', function click() {
        console.log('li' + i);
    }, false);
}

// IIFE
for (var i = 0; i < nodes.length; i++) {
    (function (j) {
         nodes[j].addEventListener('click', function click() {
                console.log('li' + j);
        }, false);
    })(i);
}

// IIFE
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', (function click(j) {
        return ()=>{
            console.log('li' + j);
        };
    }(i)), false);
}

6. 写出下面代码的输出结果

function printing() {
    console.log(1);
    setTimeout(function () {
        console.log(2);
    },1000);
    setTimeout(function () {
        console.log(3);
    },0);
    setTimeout(function () {
        console.log(4);
    },0);
    console.log(5);
    new Promise((resolve, reject) => {
        console.log(6);
        resolve();
    }).then(function(){
        console.log(7);
    });
}
printing();

答案： 1 5 6 7 3 4 2

7.写出一个算法，判断一个输入值是否为质数。

function isPrime(num) {
    for (var i = 2; i < num; i ++ ) {
        if(num % i === 0){
            return false;
        }
    }
    return true;
}

let num = 0;
for (var i = 2; i < 100; i++) {
    if(isPrime(i)){
        num ++;
    }
}
console.log(num); //25

改进版

 function isPrime(num) {
   // 下一句不一样，数学知识。
    for (var i = 2; i <= Math.sqrt(num); i ++ ) {
        if(num % i === 0){
            return false;
        }
    }
    return true;
}

增强版

function isPrime(num) {
    if(num  === 2){
       return true;
    }else if(num % 2 === 0){ //偶数(除了2)不是素数
       return false;
    }
    for (var i = 3; i <= Math.sqrt(num); i += 2 ) {
        if(num % i === 0){
            return false;
        }
    }
    return true;
}

8. 用css + html 实现一个气泡框

<div id="bubble"></div>
#bubble {
    position: relative;
    height: 50px;
    width: 100px;
    margin: 200px auto;
    border: 1px solid black;
}
#bubble:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 15px;
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(45deg);
    background-color: #fff;
}

• 这只是我个人的答案，并不完善，如有错误或不好的地方，请您指出来。