前端，面試常見問題總結

一、CSS頁面佈局，基本會被問到的我都寫在下面了，固然一種佈局的實現方式有n多種，瞭解的越多越好，flex、BFC什麼的都是要掌握而且會用的。

<style type="text/css">
    body{      
        margin:0;/*上右下左*/
        padding:0;  
        width:100%;  
        height:100%;  
    }
    /*上下左右居中，ok*/
    .box{ 
        width: 100px;
        height: 100px;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto; 
        background-color: #3FAD72;
    }
    /*上下居中*/
    .box1{
        position: absolute;
        top: 50%;
        height: 200px;
        transform: translateY(-50%);
        /*margin-top: -100px;  negative half of the height */
        background-color: #3FAD72;

    }
    /*左右居中*/
    .box2{
        position: absolute;
        left: 50%;
        width: 200px;
        margin-left: -100px; /* negative half of the height */
        background-color: #3FAD72;

    }
    .box3{/*文字垂直居中*/
        height:40px;   
        line-height:40px;   
        overflow:hidden; 
        background-color: #3FAD72;  
    }
    /*左邊固定寬度，右邊自適應*/
    .left{
        width:100px;
        display:block;
        float: left;
        text-align: right;
        background-color: #3FAD72;
    }
    .right{
        list-style: none;
        margin-left: 120px;/*兩列之間留有20px*/
        -webkit-user-select: none;
        background-color: #3FAD00;
    }
    /*http://jo2.org/css-auto-adapt-width/*/
    /*右邊固定寬度，左邊自適應*/
    #wrap {
        overflow: hidden; *zoom: 1;
        position: relative;
      }
      #content ,#sidebar {
        background-color: #eee; 
      }
      #sidebar {
         width: 300px; position: absolute; right: 0; top: 0;
      }
      #content {
        margin-right: 310px;display: inline-block;
      }
      #footer {background-color: #f00;color:#fff; margin-top: 1em;}
</style>

二、px、em、rem、%、vw、vh、ex、<meta> 標籤、@media、viewport 這幾個前端像素單位怎麼用？怎麼實現 webapp 移動端自適應？

webapp移動端自適應是一個常見問題，不少公司用的是rem/em/%這種方式（好比快手）。阿里以前出過一個flexible佈局方案：https://github.com/amfe/lib-flexible ，專門解決移動端頁面佈局適配的，可是隻有他們也放棄了這個庫，並在github上介紹了另一種基於 viewport 的適配方案：https://www.w3cplus.com/mobile/vw-layout-in-vue.html。阿里以前出的混合開發框架 weex 貌似也是用的這種方法，指定移動端頁面大小爲750*1134，而後根據設備不一樣自動計算頁面的像素比例。

三、事件監聽方法，好比發佈訂閱：

function Pubsub(){
//存放事件和對應的處理方法
this.handles = {};
 }
Pubsub.prototype={
  //傳入事件類型type和事件處理handle
 on: function (type, handle) {
    if(!this.handles[type]){
        this.handles[type] = [];
   }
   this.handles[type].push(handle);
  },

  emit: function () {
   //經過傳入參數獲取事件類型
  var type = Array.prototype.shift.call(arguments);
   if(!this.handles[type]){
    return false;
   }
 for (var i = 0; i < this.handles[type].length; i++) {
    var handle = this.handles[type][i];
    //執行事件
   handle.apply(this, arguments);
   }
  },
  
  off: function (type, handle) {
   handles = this.handles[type];
   if(handles){
    if(!handle){
     handles.length = 0;//清空數組
   }else{
 for (var i = 0; i < handles.length; i++) {
      var _handle = handles[i];
      if(_handle === handle){
       handles.splice(i,1);
      }
     }
    }
   }
  }
}

四、call/bind/apply的不一樣點？如何實現call/apply/bind？下面寫一個bind：

 //解決IE10如下不支持Function.bind
if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        if (typeof this !== "function") {
            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
        }
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function() {},
            fBound = function() {
                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
        return fBound;
    };
}
//或者
/*******************************
*bind函數在IE8中沒有，兼容性代碼：js權威指南(6th)P191
********************************/
if (!Function.prototype.bind) {
Function.prototype.bind = function (o/*, args*/) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function 
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); 
}

var self=this, boundArgs=arguments;
return function(){
var args=[],i;
for(i=1; i<boundArgs.length; i++) args.push(boundArgs[i]);
for(i=0; i<arguments.length; i++) args.push(arguments[i]);

return self.apply(o, args);
};
}; 
}

注意：上面倆arguments是不一樣函數的參數，並非同一個arguments。

五、js實現二分查找

//二分查找法
    var indexOfSorted = function f(arr,n){  
          //assume : arr has been sorted    
        var low = 0;   
        var high = arr.length - 1;   
        var mid = 0;   
          
         while(high - low >=0){  
            mid = (low + high) / 2;
            if(n == arr[low]){return low;}  
            if (n == arr[high]){return high;}  

            if(arr[mid] ==n ){return mid;}   
            else if(arr[mid] < n){ low = mid+1;  }   
            else { high = mid-1;  }   
        }    
            return -1;    
    }    

六、js判斷兩個字符串是否相互包含

//判斷兩個字符串是否互相包含的算法
        var str ="dawn";
        console.log(str.search("da")) //1,包含 
        console.log(str.search("dawnfly")) //-1，不包含

        var str ="dawn";
        console.log(str.indexOf("da")) //1,包含,indexOf() 方法對大小寫敏感！
        console.log(str.indexOf("dawnfly")) //-1，不包含

        var str ="dawnfly.cn";
        var ret1 = new RegExp('dawn').test(str);//true
        var ret2 = new RegExp('dawnflyingnow').test(str);//false

七、變量初始化方法之一

console.log(null||1)//1
console.log(undefined||1)//1
console.log("str"||1)//str

八、js的深拷貝和淺拷貝，怎麼實現深拷貝？

//深拷貝方法
function deepClone(o) {
    var obj = {};
    for (var i in o) {
        if (typeof o[i] === 'object') {
            obj[i] = (o[i].constructor === Array) ? [] : {};
            arguments.callee(o[i], obj[i]);
        } else {
            obj[i] = o[i];
        }
    }
    return obj;
}

九、script 標籤的 async 和 defer有什麼做用和區別？如何本身實現異步加載js？

async 和 defer 都是異步加載，可是 defer 是等到 dom 結構生成，其餘腳本執行完畢再加載，也就是渲染完再執行，意味着改 js 對 dom 結構沒什麼大的改變。而 async 一旦下載完成就執行。

//異步加載js  
function getScript(url,callback){  
    var script = document.createElement("script");  
    script.type="text/javascript";  
    if(script.readyState){  
        script.onreadystatechange = function(){  
            if(script.readyState=="loaded"||script.readyState=="complete"){  
                script.onreadystatechange=null;  
                callback();  
            }  
        }  
    }else{  
        script.onload = function(){  
        callback();  
    }  
    }  
    script.src = url;  
    document.getElementsByTagName("head")[0].appendChild(script);  
} 

十、實現倒計時

function countTime() {  
    //獲取當前時間  
    var date = new Date();  
    var now = date.getTime();  
    //設置截止時間  
    var str="2018/5/17 00:00:00";
    var endDate = new Date(str); 
    var end = endDate.getTime();  
    
    //時間差  
    var leftTime = end-now; 
    //定義變量 d,h,m,s保存倒計時的時間  
    var d,h,m,s;  
    if (leftTime>=0) {  
        d = Math.floor(leftTime/1000/60/60/24);  
        h = Math.floor(leftTime/1000/60/60%24);  
        m = Math.floor(leftTime/1000/60%60);  
        s = Math.floor(leftTime/1000%60);                     
    }  
    console.log("距離畢業還有"+d+"天"+h+"小時"+m+"分"+s+"秒")
    //遞歸每秒調用countTime方法，顯示動態時間效果  
    setTimeout(countTime,1000);  
}

十一、用css畫各類三角形

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;float: left;
    }
    #triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;float: left;
    }
    #triangle-left {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;margin-right: 1px;
        border-bottom: 50px solid transparent;float: left;
    }
    #triangle-right {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;float: left;
    }
    #triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;float: left;
    }
    #triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;margin-right: 1px;
        border-left: 100px solid transparent; float: left;
    }
    #triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;float: left;
    }
    #triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;float: left;
    }
</style>
</head>
<body>
    <div id="triangle-up"></div>
    <div id="triangle-down"></div>
    <div id="triangle-left"></div>
    <div id="triangle-right"></div>
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
    <div id="triangle-bottomleft"></div>
    <div id="triangle-bottomright"></div>
</body>
</html>

十二、用css畫圓

border-radius的應用

1三、用css製做動畫

學習css3 的transform、transition、keyframe、animation的用法。

1四、js實現深度優先遍歷和廣度優先遍歷

//深度優先遍歷
function deepTraversal(node){
    let nodes=[];
    if(node!=null){
        let stack=[];//同來存放未來要訪問的節點
        stack.push(node);
        while(stack.length!=0){
            let item=stack.pop();//正在訪問的節點
            nodes.push(item);
            let childrens=item.children;
            for(let i=childrens.length-1;i>=0;i--)//將如今訪問點的節點的子節點存入stack，供未來訪問
                stack.push(childrens[i]);
        }
    }
    return nodes;
}
//廣度優先遍歷的非遞歸寫法
function wideTraversal(node){
    let nodes=[],i=0;
    while(node!=null){
        nodes.push(node);
        node=nodes[i++];
        let childrens=node.children;
        for(let i=0;i<childrens.length;i++){
            nodes.push(childrens[i]);
        }
    }
    return nodes;
}

1五、js實現快速排序（還有堆排序、歸併排序……）

function QuickSort(arr){
    if(arr.length<=1){    return arr;  }
    var self = arguments.callee;
    var left = [],right = [],middle=[];
    var mid = arr[Math.floor(arr.length/2)];
    for(var i=0;i<arr.length;i++){    
        if(arr[i]<mid){
            left.push(arr[i])
        }else if(arr[i]>mid){
            right.push(arr[i]);
        }else{
            middle.push(arr[i]);
        }
    }
  return [].concat(self(left),middle,self(right));
}

1六、隨機生成n個不重複的數字

1七、js的基本數據類型、es6的變量聲明方式

var isString = function( obj ){
  return Object.prototype.toString.call( obj ) === '[object String]';
};
var isArray = function( obj ){
  return Object.prototype.toString.call( obj ) === '[object Array]';
};
var isNumber = function( obj ){
  return Object.prototype.toString.call( obj ) === '[object Number]';
};

1八、promise的實現

1九、vue如何實現雙向綁定的？

20、變量提高和函數提高

//這段代碼的執行結果是什麼？
var b=1
    function a(){
        b++;
        console.log(b)
        var b=3;
        b++;
        console.log(b);
    }
    a();

//求下面的運行結果？
var x = 1, y = 0, z = 0;
var add = function (x) {
     return x = x+1;
}

y = add(x);
function add (x) {
     return x = x + 3;
}
z = add(x);

let 和const 的做用域問題：

2一、下面兩段代碼的執行結果是什麼？區別？爲何？閉包？

for(var i = 0; i < 3; i++) {
document.body.addEventListener('click', fn);

}
function fn(i) {console.log(i)}

for(var i = 0; i < 3; i++) {
document.body.addEventListener('click', function(){console.log(i)});
}

2一、函數節流和函數去抖

2二、下面代碼執行結果？爲何？

[] === []
[]==[]

2三、時間複雜度和空間複雜度

2四、時間複雜度和空間複雜度的理解

2五、如何實現跨域，至少六種方法

2六、如何實現異步，有哪些方法（至少四種），原理是什麼？

2七、如何實現數據存儲

2八、http1.0、http1.一、http2.0、https各自的特色、不一樣點、響應碼？

2九、cache-control、empire、e-tag、last-modified、if-matched等的用法和區別？

30、html頁面解析過程，dom樹、css樹、render樹、迴流和重繪。

31.數據判斷方式

32.class的繼承，原型鏈

33.瞭解SEO麼？

34.Object.defineProperty()，變量的屬性。

35.ES6的裝飾器屬性

36.get何post的區別

https://sunshinevvv.coding.me/blog/2017/02/09/HttpGETv.s.POST/

37.什麼是跨域，方法？

http://www.javashuo.com/article/p-gjnaksry-em.html