前端筆試基礎面試題第一套

1.下面代碼都會輸出什麼？

    function a(){
        console.log(i)//undefined
        for(var i = 0; i<10; i++){
        console.log(i)//0-9
        }
        console.log(i)//10
    }
    var i = 1;
    a();
    //答案：undefined 0-9 10 若是把var改爲let結果變成1 0-9 1
        
    function b () {
        console.log(1)//1
        const p = new Promise((r, j) => {
            console.log(2)
            r(3)
            j(4)
            console.log(5)
        })
        p.then(r=>console.log(r)).catch(r=>console.log(r))
        console.log(6)//6
    }
        b();
//答案：1 2 5 6 3

2.如何使用promise封裝ajax操做

function  PromiseAjax (methods,url,parms) {
    return new Promise((resolve,reject)=>{
    var xhr = XMLHttpRequest();
    xhr.open(methods,url,true);
    xhr.onreadystatechange=function(){
    If(xhr.readyState==4&&xhr.status==200){
        resolve(xhr.responseText)
    }
    }
    If(methods===’get’||methods===’GET’){
    xhr.send(null)
    }else{
    xhr.send(parms)
    }
    })
}    

3.簡單介紹下lterator接口和Generator函數

Iterator 的中文意思是迭代器，Generator的中文意思生成器。

Iterator 是爲了實現對java容器(collection)進行遍歷功能的1個接口。

傳統的編程語言，早有異步編程的解決方案（實際上是多任務的解決方案）。

其中有一種叫作"協程"（coroutine），意思是多個線程互相協做，完成異步任務

Generator 函數是協程在 ES6 的實現，最大特色就是能夠交出函數的執行權（即暫停執行）。

function*gen(x){
         var  y=yield x+2;
         return   y;
}

上面代碼就是一個 Generator 函數。它不一樣於普通函數，是能夠暫停執行的，因此函數名以前要加星號，以示區別。

4.對象拷貝怎麼作，若是要作到深拷貝，如何實現，寫出相關僞代碼。

淺拷貝只是對對象的引用地址進行了拷貝，並無開闢新的堆棧，拷貝後，

兩個對象指向的是同一個引用地址，因此修改其中一個對象的屬性，則另外一個對象的屬性也會改變。

var obj = { age: '12' };
var newObj = obj;//此時將obj中的age屬性值改變，會發現newObj中的age屬性值跟着改變
obj.age = '13';  //obj: { age: '13' }  newObj: { age: '13'}

簡而言之，淺拷貝是拷貝對象屬性，深拷貝拷貝對象以及其全部子對象的屬性

const oldObj = {
a: 1,
b: [ 'e', 'f', 'g' ],
c: { h: { i: 2 } }
};

const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // false
newObj.c.h.i = 'change';
console.log(newObj.c.h, oldObj.c.h); // { i: 'change' } { i: 2 }

5.對象繼承有幾種方式，實現一種基於原型鏈的繼承。

1.原型鏈基礎 2.構造函數繼承 3.組合式繼承

// 原型鏈繼承
        function Show(){
            this.name="run";
        }
        function Run(){
            this.age="20"; //Run繼承了Show,經過原型，造成鏈條
        }
        Run.prototype=new Show();
        var show=new Run();
        console.log(show.name,show.age)//結果：run

6.描述下flex佈局模型，六個div分爲兩行，垂直居中顯示，如何寫出相關樣式

Bigdiv{
Display:flex;
Flex-wrap:wrap;
Align-items:center;
Width:100%;
Height:100%;
}
Samlldiv{
Width:30%;
Height:40%;
Display:inline-block;
Margin:0 auto;
}

7.介紹vuex，redux其中一種的概念及實現原理

vuex是單向數據流插件，依賴vue，是vue的資源管理器

調用了一下applyMixin方法，該方法主要做用就是在全部組件的beforeCreate生命週期注入了設置this.$store這樣一個對象