2020（春）前端面試筆試題及答案

時間 2020-06-11

原文原文鏈接

PDD

筆試題型：單選12道、填空四、問答4css

1.數組

var arraynew = new Array(5)
arraynew[1]=1
arraynew[5]=2
console.log(arraynew.length)//6

2.flex-flow由哪兩個屬性組成

flex-flow是flex-direction和flex-wrap的簡寫

3.requestAnimationFrame

MDN 說明html

4.proxy和reflect

學習連接前端

5.readyState狀態碼

readyState，是指運行Ajax所經歷過的幾種狀態，不管訪問是否成功都將響應的步驟，能夠理解成爲Ajax運行步驟，使用「ajax.readyState」得到。
readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處於什麼狀態。
readyState總共有5個狀態值，分別爲0~4，每一個值表明了不一樣的含義。ajax

0：未初始化，還沒有調用open()方法
1：啓動，已經調用open()方法，還沒有調用send()方法
2：發送，已經調用send()方法，但還沒有收到響應
3：接受，已經接收到部分響應數據
4：完成，已經接收到所有響應數據，並且已經能夠在客戶端使用了

只要readyState屬性的值由一個值變成另外一個值，都會觸發一次readystatechange事件。能夠利用這個事件來檢測每次狀態變化後readyState的值。一般，咱們只對readyState值爲4的階段感興趣，由於這時全部數據都已經就緒。不過，必需在調用open()前指定onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。以下示例：編程

var xhr= new XMLHttpRequest()
xhr.onreadystatechange=function () {
    if (xhr.readyState==4){
        if ((xhr.status>=200 && xhr.status<300) || xhr.status==304){
            console.log(xhr.responseText)
        }else {
            console.log("request was unsuccessful:"+xhr.status)
        }
    }
}
xhr.open("get」,」example.txt」,true)
xhr.send(null);

以上代碼利用DOM 0級方法爲XHR對象添加了事件處理程序，緣由是並不是全部瀏覽器都支持DOM 2級方法。與其餘事件處理程序不一樣，這裏沒有像onreadystatechange事件處理程序中傳遞event對象；必須經過XHR對象自己來肯定下一步該怎麼作，由於若是使用了this對象（onreadystatechange事件處理做用域的問題），在有的瀏覽器中會致使函數執行失敗或者致使錯誤發生。所以使用實際的XHR對象實例變量是較爲可靠的一種方式。

6.html預加載link中的rel屬性是什麼值？

link元素規定了外部資源與當前文檔的關係。經常使用於連接樣式表，建立網站圖標，預加載資源等。
用於前端界面性能優化，rel 的屬性值能夠爲preload、prefetch、dns-prefetch。segmentfault

preload

控制當前界面的資源下載優先級，瀏覽器必須下載資源。
舉個例子：網站的一個界面 A的 css 樣式文件中使用了外部字體文件，正常狀況下該字體的下載是在 css 解析的時候完成的。想一想字體文件好像在 css 樣式文件解析以前下載到本地比較好。那麼咱們就能夠在head標籤設置字體的 preload。數組

<link rel="preload" href="https://example.com/fonts/font.woff" as="font">

prefetch 預獲取

用戶在使用當前界面時，瀏覽器空閒時先把下個界面要使用的資源下載到本地緩存。瀏覽器下不下載不可知。
舉個例子：網站有A，B 兩個界面。當用戶訪問界面 A 時有很大的機率會訪問 B 界面（好比登陸跳轉）那麼咱們能夠在用戶訪問界面 A 的時候，提早將 B 界面須要的某些資源下載到本地，性能會獲得很大的提高。那麼咱們只須要在界面 A.html 文件中設置以下代碼：瀏覽器

<link rel="prefetch" href="/uploads/images/pic.png">

dns-prefetch

先把要跳轉的域名解析，減小時間。緩存

7.至少寫三種清除浮動的方式

//使用僞元素清除浮動
.clearfix:after{
    content:"";/*設置內容爲空*/
    clear:both;/*清除浮動*/
     display:block;/*將文本轉爲塊級元素*/
    height:0;/*高度爲0*/
    visibility:hidden;/*將元素隱藏*/
}
.clearfix{
    zoom:1;/*爲了兼容IE*/
}

開啓BFC——overflow：hidden
開啓BFC——float：left安全

8.讀代碼

var num1=1
var num2=2
function cal(){
    var num1=10,num2=20;
    console.log(this.num1+this.num2)
}
new cal()//NaN
cal()//3
var calbind=cal.bind({num1=100,num2=200})
//Uncaught SyntaxError: Invalid shorthand property initializer

9.http和https的區別

（1）https協議須要到ca申請證書，通常免費證書不多，須要交費。
（2）http是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的ssl加密傳輸協議。
（3）http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
（4）http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

10.垂直水平居中

畫一個圓垂直水平居中，圓中顯示當前電腦的時間（XXXX-YY-ZZxx-yy-zz格式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrap{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height:100px;

        }
        #inner{
            display:flex;
            width:100%;
            height:100%;
            align-items:center;
            background:pink;
            border-radius: 50%;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="wrap"><div id="inner"></div></div>
<script src="pdd.js"></script>
</body>
</html>

var circle=document.getElementById('inner')
var date=new Date()
var year=date.getFullYear(); //獲取當前年份
var mon=date.getMonth()+1; //獲取當前月份
var da=date.getDate(); //獲取當前日
var day=date.getDay(); //獲取當前星期幾
var h=date.getHours(); //獲取小時
var m=date.getMinutes(); //獲取分鐘
var s=date.getSeconds(); //獲取秒

circle.innerHTML=year+'-'+mon+'-'+da+'\n'+h+'-'+m+'-'+s

攜程

選擇題20道、編程題3道（沒有js選擇），總體題型偏數據結構、操做系統

1.進程間的通訊方式

進程之間有直接通訊和間接通訊兩種方式。

管道

一個進程向存儲空間的一端寫入信息，另外一個進程存儲空間的另一端讀取信息，這個就是管道。

信號

信號是在軟件層次上對中斷機制的一種模擬，是一種異步通訊方式。
信號能夠直接進行用戶空間進程和內核進程之間的交互，內核進程也能夠利用它來通知用戶空間進程發生了哪些系統事件。它能夠在任什麼時候候發給某一進程，而無需知道該進程的狀態。
在計算機中，信號就是一個內核對象或者是一個內核數據結構。發送方將該數據結構的內容填好，並指明該信號的目標進程後，發出特定的軟件中斷（這就是一個發電報的操做）。OS接收到特定的中斷請求後，知道是有進程要發送信號，因而到特定的內核數據結構裏查找信號接收方，並進行通知。接到通知的進程則對信號進行相應處理。

信號量

信號量（semaphore）：主要做爲進程間以及同一進程不一樣線程之間的同步手段。
在計算機中，信號量實際上就是一個簡單整數。一個進程在信號變爲0或1的狀況下推動，並將信號變爲1或0來防止別的進程同時推動。當該進程完成任務後，則將信號再改成0或1，從而容許其餘進程執行。從而咱們也能夠看出，信號量已經不僅是一種通訊機制，更是一種同步機制。

共享內存

共享內存（shared memory）能夠說是最有用的進程間通訊方式，也是最快的IPC形式。兩個不一樣進程A、B共享內存的意思是，同一塊物理內存被映射到進程A、B各自的進程地址空間。進程A能夠即時看到進程B對共享內存中數據的更新，反之亦然。因爲多個進程共享同一塊內存區域，必然須要某種同步機制，互斥鎖和信號量均可以。

套接口

套接口（socket）：更爲通常的進程間通訊機制，可用於不一樣機器之間的進程間通訊。

消息隊列

消息隊列是一列具備頭和尾的消息排列，新來的消息放在隊列尾部，而讀取消息則從隊列頭部開始。這樣看來，它和管道十分相似，一頭讀，一頭寫？的確，看起來很像管道，但又不是管道：
　　（1）消息隊列無固定的讀寫進程，任何進程均可以讀寫；而管道須要指定誰讀和誰寫；
　　（2）消息隊列能夠同時支持多個進程，多個進程能夠讀寫消息隊列；即所謂的多對多，而管道是點對點；
　　（3）消息隊列只在內存中實現，而管道還能夠在磁盤上實現；

2.二叉樹遍歷

二叉樹的重要性質

性質一:在二叉樹的第 i 層上最多有2^(i-1)個結點（i≥1）。

性質二:深度爲 k 的二叉樹最多有2^k-1個結點（k≥1）。

性質三:對任一二叉樹，葉子結點數爲X，度爲2的結點數爲Y，則X=Y+1。

衍生（分類）

滿二叉樹（full binary tree）：一棵深度爲 k 且有 2^k-1個結點的二叉樹稱爲滿二叉樹。
徹底二叉樹（complete binary tree）：一棵深度爲 k 的滿二叉樹的第 k 層的右邊幾個結點不存在則爲徹底二叉樹。
平衡二叉樹：它的左右兩個子樹的高度差的絕對值不超過 1，而且左右兩個子樹都是一棵平衡二叉樹。
二叉搜索樹（也叫二叉查找樹或者二叉排序樹）：若它的左子樹不爲空，則左子樹上全部節點的值均小於它的根節點的值；若它的右子樹不爲空，則右子樹上全部節點的值均大於它的根節點的值；它的左、右子樹也分別是二叉排序樹。說明它是一顆有順序的樹，左子樹節點的值小於根節點的值，右子樹節點的值大於根節點的值。

二叉樹存儲

順序存儲
二叉樹的順序存儲結構就是用一維數組存儲二叉樹中的節點，而且節點的存儲位置，也就是數組的下標要能體現節點之間的邏輯關係。若是某個節點的索引爲 i，（假設根節點的索引爲 0）則在它左子節點的索引會是 2i+1，以及右子節點會是 2i+2。
鏈式存儲
由於在二叉樹中，一個父節點最多隻容許 2 個子節點，因此咱們只須要一個存儲數據和左右子節點的指針，這樣的結構就是鏈式存儲，也叫二叉鏈表。

徹底二叉樹

徹底二叉樹除了具備普通二叉樹的性質，它自身也具備一些獨特的性質:

性質四:n 個結點的徹底二叉樹的深度爲 ⌊log2 n⌋+1。

性質五:對於任意一個徹底二叉樹來講，若是將含有的結點按照層次從左到右依次標號（如圖 3a)），對於任意一個結點 i ，徹底二叉樹還有如下3個結論成立：

當 i>1 時，父親結點爲結點 [i/2] 。（i=1 時，表示的是根結點，無父親結點）
若是 2×i>n（總結點的個數），則結點 i 確定沒有左孩子（爲葉子結點）；不然其左孩子是結點 2×i 。
若是 2×i+1>n ，則結點 i 確定沒有右孩子；不然右孩子是結點 2×i+1

二叉樹遍歷

前序遍歷

根左右
先訪問根節點，而後前序遍歷左子樹，再前序遍歷右子樹。根據上面的二叉樹前序遍歷結果是 ECBADGFH。

中序遍歷

左根右
從根節點開始（注意並非先訪問根節點），中序遍歷根節點的左子樹，而後是訪問根節點，最後中序遍歷右子樹。根據上面的二叉樹中序遍歷結果是 ABCDEFGH。

後序遍歷

左右根
從左到右先葉子節點後父節點的方式遍歷訪問左右子樹，最後是訪問根節點。根據上面的二叉樹後序遍歷結果是 ABDCFHGE。

層序遍歷

從樹的第一層，也就是根節點開始訪問，從上而下逐層遍歷，在同一層中，按從左到右的順序對節點逐個訪問。根據上面的二叉樹層序遍歷結果是 ECGBDFHA。

3.哈夫曼編碼

查看

4.快速排序

//思想：挖坑填數+分治
// 分治，將原始數組分爲較小的數組
//選擇中間值做爲主元
//建立兩個指針，左指針指向數組第一個元素，右指針指向數組最後一個元素
//移動左指針找到一個比主元大的值，移動右指針找到一個比主元小的值，而後交換，重複，直到左指針超過右指針
//接着，對劃分的小數組重複上述操做
var arr = [49, 38, 65, 97, 76, 13, 27, 49];
console.log('arr:' + arr);    //打印排序前的數組
quickSort(arr, 0, arr.length-1);
console.log('sortArr:' + arr);    //打印排序後的數組

function quickSort(arr,low,high){    //數組  排序部分的初始索引  排序部分的結尾索引
    var key = arr[low];    //設置起始索引值爲基準值
    var start = low;
    var end = high;
    while(end > start) {
        while (end > start && arr[end] >= key) end--;    //從右側開始搜索
        if (arr[end] < key) {        //須要判斷，由於可能右側沒有比基準值小的
            var temp = arr[end];
            arr[end] = arr[start];
            arr[start] = temp;
        }
        while (end > start && arr[start] <= key) start++;
        if (arr[start] > key) {    //可能左側沒有比基準值大的
            var temp = arr[start];
            arr[start] = arr[end];
            arr[end] = temp;
        }
    }
    console.log('newArr:' + arr);    //每次排完打印一次，顯示幾條就說明排了幾回
    //排完後start等於end，即基準值在這次排序中的最終位置
    if (start > low+1) quickSort(arr, low, start - 1);
    //若是start小等於low+1，說明左側只有0或者1個數字，不須要再進行排序
    if (end < high-1) quickSort(arr, end + 1, high);
    //同理可得
}