前端面試題啊

隨着前端的發展，愈來愈多的人加入前端這個行業。今年的前端面試比以前更加嚴格了（大部分也由於本身太菜...）因爲上家公司外包，待了兩個多月就走了。

cookie和session區別

• 1.cookie大小有限制 4k  2.cookie存放客戶端，session存放服務器端複製代碼

HTML5提供的webStorage

• sessionStorage: 不是一種持久化的本地存儲，僅僅是會話級別的存儲。localStorage: 將數據保存到本地硬件設備中，瀏覽器關閉數據任然存在。複製代碼

css3的flex佈局屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}複製代碼

row（默認值）：主軸爲水平方向，起點在左端。row-reverse：主軸爲水平方向，起點在右端。column：主軸爲垂直方向，起點在上沿。column-reverse：主軸爲垂直方向，起點在下沿。

 flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}複製代碼

nowrap（默認）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}複製代碼

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}複製代碼

flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}複製代碼

flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}複製代碼

flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線佔滿整個交叉軸。

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}複製代碼

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}複製代碼

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小，負值對該屬性無效。

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}複製代碼

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}複製代碼

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}複製代碼

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

筆試題

              

try {
                  console.log("A");
                  setTimeout(function () {
                    console.log("B");
                   }, 1000);
                  setTimeout(function() {
                    throw new Error("C");
                    console.log("D");
               } catch(e) {
                    console.log(e);
                }
輸出： A  Uncaught Error: C   B


reduce實現累加
         var numbers = [65, 44, 12, 4];
         function getSum(total, num) {
            console.log(total, num)
            return total + num;
         }
         function myFunction(item) {
            document.getElementById("demo").innerHTML = numbers.reduce(getSum); 
         } 
                 

[1,2,3].map(parseInt)

輸出：1,NaN,NaN

原理： [1,2,3].map((item, index) => {
         return parseInt(item, index);
        };複製代碼

基本算法

數組去重  第一種：
function uniq(array){
    var temp = []; //一個新的臨時數組
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}
第二種：
const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));複製代碼

數組隨機排序
ar arr = [1,3,4,5,6];var length = arr.length;var temp = [];for(var i=0;i<arr.length;i++) {    var radom = parseInt((Math.random()*(length-0))+0);    if (temp.indexOf(arr[radom]) == -1) {      temp.push(arr[radom]);    } else {        i--;    }}複製代碼

http和https的區別？

協議： http運行在TCP之上，明文傳輸。客戶端和服務器都沒法驗證對方的身份。https是運行在 SSL( Secure Socket Layer）外殼的HTTP,運行於SSL上，是添加了加密和認證機制的HTTP。複製代碼

端口： http是80， https是443。複製代碼

資源消耗： http消耗較少，HTTPS會消耗更多的CPU和內存資源。複製代碼

開銷： http無需證書，HTTPS須要證書，而證書通常須要向認證機構購買。複製代碼

加密機制： http沒有，HTTPS功效密鑰和公開密鑰加密並用的混合加密機制。複製代碼

安全性：http弱，HTTPS因爲加密機制，安全性搶。複製代碼

2、javascript數組和字符的方法？

Array： concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), toSource(), toString(), toLocaleString(), unshift(), valueOf()。String:   charAt(),  charCodeAt(), concat(), fixed(), indexOf(), lastIndexOf(), link(), match(), replace(), search(), slice(), small(), substr(), substirng(), toLowerCase(), toUpperCase(), toString(), valueOf()。複製代碼

3、url的加載的過程

用戶從UI發送請求，JavaScript中調用XMLHttpRequest對象。
HTTP請求由XMLHttpRequest對象發送到服務器。
服務器使用JSP，PHP，Servlet，ASP.net等與數據庫交互。
檢索數據。
服務器將XML數據或JSON數據發送到XMLHttpRequest回調函數。
HTML和CSS數據顯示在瀏覽器上。複製代碼

vue的 computed 和watch的區別

1. 從屬性上，computed是計算屬性，它依賴其餘的屬性計算所得出最後的值。 watch是去監聽一個值得變化。2. 從實現上，computed具備緩存。根據項目需求，若是是一個值依賴多個屬性，那用computed比較方便。若是一個值變化後會引發一系列操做，或者一個值變化會引發一系列值得變化，用watch更方便。3. watch的回調傳入監聽屬性的新舊值，經過這兩個值能夠作特定的操做，computed是簡單的計數。

前端移動端抓包工具：fiddle、vConsole、spy-debugger（HybridApp）、charles複製代碼