1、實現陣列扁平化

陣列扁平化是指將一個多維陣列變為一維陣列

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

（1）toString & split或者jion & split

呼叫陣列的toString方法，將陣列變為字串然後再用split分割還原為陣列

   function flatten(Ary){
        var midAry=Ary.toString();
        // var midAry=Ary.join(",");
        var result=midAry.split(",");
        return result;
    }
 

（2）遞迴

遞迴的遍歷每一項，若為陣列則繼續遍歷，否則concat

2、實現三欄佈局，中間自適應，左右兩邊固定

自己的實現：

 .container{
        position:relative;
        width:100%;
        }
        .left{
        width:100px;
        background:red;
        float:left;
        }
        .main{
         width:100%;
         padding:0 100px;
         background:green;
        }
        .right{
         width:100px;
         background:red;
        position:absolute;
        right:0;
        top:0;
        }
 

html程式碼段

<div class="container">
    <div class="left">left </div>
    <div class="main">main </div>
    <div class="right"> right</div>
</div>

3、說一說var 、let、const 的區別

4、css實現圓，梯形

圓：

 #circle{
        width:100px;
        height:100px;
        border-radius:50px;
        background:#ccc;
        }

橢圓：border-radius可以單獨指定水平和垂直半徑，只要用一個(/)分隔這兩個值就行。還一個特性是，它可以接受長度值，還可以接受百分比，兩種特性結合，就可以自適應了。

.ellipse{
width: 200px;
height: 100px;
background-color: red;
border-radius:50%;
}

梯形：

 .tx1{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
   border-color:   transparent  blue  blue transparent;
    }
     .tx2{
    width:100px;
    height:100px;
    background:#ccc;
    float:left;

    }
     .tx3{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
border-color: transparent transparent blue blue;
    }

  html程式碼

<div class="tx1"></div>
<div class="tx2"></div>
<div class="tx3"></div>

5、清除子元素的內容，還要清除其事件，一般用什麼

如果僅僅刪除父元素下面的子元素，使用removeChild。但是可能為子元素綁定了事件，所以不能只刪除元素，而讓繫結的時間繼續佔用記憶體

btn1.onclick = function(){}
btn1.onclick =null;

這樣就是在解除事件繫結。

如果是用addEventListener給元素繫結的事件，那麼可以用removeEventListener來解除事件繫結。

6、一般怎麼實現響應式佈局

(1)先介紹幾種其他佈局的概念

靜態佈局：設計固定樣式，如果要適配移動端，則單獨再設計一套樣式

彈性佈局：css3引入的一種佈局方式（用來替代之前的float浮動佈局）

flex-flow: 應用到需要佈局的元素的父元素上，先指定元素為flex佈局，display:flex;

fllex-flow是 flex-direction和 flex-wrap的簡寫形式

.top ul{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}

自適應佈局：分別為不同的螢幕解析度定義佈局

流式佈局：對頁面元素的寬度進行適配調整

響應式佈局：運用各種樣式技巧，實現隨著螢幕的變化以及PC端移動端的變化，頁面佈局做出相應調整。

（2）響應式佈局的步驟實現

須加一句頭部程式碼

<meta name="viewport" content="width=device-width",initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

通過媒體查詢來設定樣式，媒體查詢@media不僅可以設定字型，也可以對圖片進行設定。

@media screen and ( min-width:750px){}

寬度不用固定值，用百分比。

浮動佈局使用flex;

圖片處理：height：auto；為了保證圖片的原始寬高比例，以至於圖片不失真。

.m-home img{
max-width:100%;
height:auto;
}

7、說一下jsonp的原理，你遇到過跨域嘛，如何解決，除了jsonp還有其他什麼方法。                                                                                                                                                                                                                                                                                  （1）jsonp的原理

 ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的連結卻可以訪問跨域的js指令碼，利用這個特性，服務端不再返回JSON格式的資料，而是返回一段呼叫某個函式的js程式碼，在src中進行了呼叫，這樣實現了跨域。                                    （2）jsonp的具體實現

比如訪問不同源的域www.practice-zhao.com

直接新增script標籤，標籤的src指向了另一個域www.practice-zhao.com下的remote.js指令碼

<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>

這裡呼叫了跨域的remote.js指令碼，remote.js程式碼如下：

jsonhandle({
    "age" : 15,
    "name": "John",
})

 動態的添加了一個script標籤，src指向跨域的一個指令碼，並且將js函式名作為callback引數傳入

<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>

   這裡動態的添加了一個script標籤，src指向跨域的一個php指令碼，並且將上面的js函式名作為callback引數傳入

JSONP將訪問跨域請求變成了執行遠端JS程式碼，服務端不再返回JSON格式的資料，而是返回了一段將JSON資料作為傳入引數的函式執行程式碼。

jQuery提供了方便使用JSONP的方式

$(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //請求php的引數名
            jsonpCallback: "jsonhandle",//要執行的回撥函式
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });

    只要設定dataType為jsonp即可。

總結：JSONP是一種非正式傳輸協議，該協議的一個要點就是允許使用者傳遞一個callback或者開始就定義一個回撥方法，引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。
　　JSONP只支援GET請求而不支援POST等其它型別的HTTP請求,它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題，JSONP的優勢在於支援老式瀏覽器，弊端也比較明顯：需要客戶端和服務端定製進行開發，服務端返回的資料不能是標準的Json資料，而是callback包裹的資料。

（3）跨域的其他解決辦法

    CORS 前後端協作設定請求頭，Access-Control-Allow-Origin等頭部資訊

普通跨域請求：只服務端設定Access-Control-Allow-Origin即可，前端無須設定，若要帶cookie請求：前後端都需要設定。

CORS是現代瀏覽器支援跨域資源請求的一種方式，全稱是"跨域資源共享"（Cross-origin resource sharing），當使用XMLHttpRequest傳送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，後臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin;瀏覽器判斷該響應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到響應資料，如果不包含瀏覽器直接駁回，這時我們無法拿到響應資料。
CORS與JSONP的使用目的相同，但是比JSONP更強大，CORS支援所有的瀏覽器請求型別，承載的請求資料量更大，開放更簡潔，服務端只需要將處理後的資料直接返回，不需要再特殊處理。

伺服器端對於CORS的支援，主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問。

使用HTML5中新引進的window.postMessage方法來跨域傳送資料

window.postMessage(message,targetOrigin)  方法是html5新引進的特性，可以使用它來向其它的window物件傳送訊息，無論這個window物件是屬於同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支援window.postMessage方法。

接收2個引數

呼叫postMessage方法的window物件是指要接收訊息的那一個window物件，

該方法的第一個引數message為要傳送的訊息，型別只能為字串；

第二個引數targetOrigin用來限定接收訊息的那個window物件所在的域，如果不想限定域，可以使用萬用字元 *  。