2020我的面試經曆,一套很考察js基礎能力的前端面試題（原題直出，附答案解析）

魔幻的2020，注定是大家人生中難忘的一年。之前聽說工作難找，但沒想到如此艱難。職位變少了，要求變高了，招聘周期變長了，每個環節的改變都是對自己面試心态的一個挑戰，扛下來可能會找到一份過得去的工作，看不住也就隻能将就了。

以下是我衆多面試公司中比較有代表性的一家，試題整體很考察js基礎能力，我把題目記錄下來，部分題目做了答案解析，希望對大家找工作有所幫助。

//題目一：考察setTimeout在for中的執行順序
let i;
for(i=0;i<3;i++){
    let log = ()=>{console.log(i)}
    setTimeout(log,0);
}

function demo(){
    let x = b = 0;
    return x
}

demo()
console.log(typeof x)
console.log(typeof b)
           

//題目二：考察with的使用，與with相關的變量提升問題
let sender = {
    a:1,
    c:undefined
}
function demo1(){
    with(sender){
        a = 2
        b = 3
        c = 4
    }
}
demo1()
console.log(sender)
function demo2(str){
    eval(str)
    console.log(x)
}

var x = 1

demo2("var x = 3")
console.log(x)
           

//題目三：考察數組類型轉換
var a = {}
var b = {key:'b'}
var c = {key:'c'}
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);
console.log(a[c]);
console.log(a[d]);
解析：
a[b] => a['Object object']
a[c] => a['Object object']
a[d] => a['3,5,6']
           

//題目四：
new Promise(res=>{ 
    setTimeout(()=>{console.log(0)},0) //宏1
    res() //微1
}).then(()=>{setTimeout(()=>{console.log(1)},0)})  //宏6

setTimeout(()=>{console.log(2)},0) //宏2

new Promise(res => setTimeout(res,0)).then(()=>{ // 宏3
    console.log(3)
    setTimeout(()=>{console.log(4)},0) //宏7
    new Promise(r => r()).then(()=>{console.log(5)}) //微3
})

setTimeout(()=>{console.log(6)},0) //宏4
new Promise(res=>res()).then(()=>{ //微2
    console.log(7)
})

for(var i=8;i<11;i++){
    setTimeout(()=>{console.log(i)},0)  //宏5
    console.log(i)
}

結果：
8
9
10
7
0
2
3
5
6
11 11 11
1
4

解析：
promise中遇到res(),resolve()就為微任務，放到事件隊列裡頭去，待主線程全部執行完再開始任務隊列處理（事件隊列按照微任務，宏任務的順序執行）
           

//題目五：
function Foo(){
    getName = function(){alert(1);};
    return this
}
getName()  //==> 輸出5
Foo.getName = function(){alert(2);};
Foo.prototype.getName = function(){alert(3);};
var getName = function(){alert(4);};
function getName(){alert(5);};

biz();  //==> 輸出8
function biz(){alert(8);}
if([]==false){
    function biz(){alert(6);}
}else{
    function biz(){alert(7);}
}

請寫出輸出結果：
biz();
Foo.getName();
getName();
Foo().getName();
getName();
Foo.getName();
new Foo.getName();

結果：
6
2
4
1
1
2
2

解析：
biz() 第二次運作是走if的；
getName()執行的是window.getName()
           

//題目六：
現在有随機位随機整數數組，例如[2,11,20,160,3,1,-89,......]請挑選出數組内三個随機整數和為100的所有資料。請寫出實作。

解析：leetcode的15題，求三數之和。https://leetcode-cn.com/problems/3sum/
大概的思路就是第一層用哈希表的形式記錄每個數map[key]（當成key），其對應的值為100-map[key]。
第二層再用for去比較剩餘兩個數的和與map[key]是否相等。相等則記錄下來目前三個數（一組或多組）
           

//題目七：
調用數組方法和Math.random()在一條語句的情況下，實作生成給定位數的随機數組，例如生成10位随機數組[1,1,102,1,2,3,8,4,90,8,123,11,123]數組内數字随機生成
解析：
方案一：new Array(10).fill('').map((item)=>Math.random())
方案二：Array.from('0123456789').map((item)=>Math.random())
......
           

//題目八：
實作一個bind方法，例如
let n = function (a,b,c,d) {
    console.log(this.x,a,b,c,d)
}
let  m = {x:3}
let fn = n.bind(m,1,3)
fn(5,8)  //列印 3 1 3 5 8
           

//題目九：
實作一個setter方法，例如
let setter = function (content,key,value) {
    
}
let n = {
    a:{
        b:{
            c:{d:1},
            bx:{y:1}
        }
    }
} //修改值setter(n,'a.b.c.d',3)

console.log(n.a.b.c.d) //列印3
setter(n,'a.b.bx',1)
console.log(n.a.b.bx) //列印1

解析：遞歸方式實作，注意遞歸的條件和最後結束類型的判斷等。
           

如果有寫的不好的歡迎指正和給出建議。

後續還會更新關于其他面試方面的文章，敬請期待…