字節跳動面試（一面）

1、背景

　　2019.9.16參加了個人第一個前端面試，投遞的公司是字節跳動（上海），簡歷投出一週後被通知參加視頻面試，如下爲部分面試題。

2、簡答題

1.flex佈局怎樣實現頁面固定？

容器屬性

• • flex-wrap：nowrap | wrap | wrap-reverse
  • flex-direction：row | row-reverse | column | column-reverse
  • flex-flow：flex-wrap和flex-direction的簡寫屬性
  • justify-content：flex-start | flex-end| center | space-between | space-around
  • align-items： flex-start |  flex-end | center | baseline | stretch
  • align-content：flex-start | flex-end | center | space-between | space-around | stretch

元素屬性

 

1. • order：數值越小，排列越靠前，默認爲0
   • flex-grow：屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。
   • flex-shrink：屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
   • flex-basis：屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。
   • flex：flex-grow、flex-shrink和flex-basis的簡寫屬性，默認值爲 0 1 auto。
   • align-self：auto | flex-start | flex-end | center | baseline | stretch

 

Ajax是Asynchronous JavaScript and XML的縮寫，意思就是用JavaScript執行異步網絡請求。

參考連接：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

1. 1. new一個xhr對象。

      1 var xml=new XMLHttpRequest();

   2. 調用xhr對象的open方法。

      1 xml.open("Get/Post", "url", true/false);//true爲異步，false爲同步

       

   3. 調用xhr對象的send方法。

      1 xml.send(null);//GET請求
      2 xml.send(string);//POST請求

   4. 對服務器的響應過程進行監聽，來知道服務器是否正確得作出了響應，接着就能夠作一些事情。好比獲取服務器響應的內容，在頁面上進行呈現。
   • • responseText:得到字符串形式的相應數據
     • responsXML:得到XML形式的相應數據
     • status和statusText：以數字和文本形式返回http狀態碼
     • getAllResponseHeader()：獲取全部的響應報頭
     • getResponseHeader()：查詢響應中的某個字段的值
     • readyState屬性：響應返回成功的時候獲得通知
       • 0：請求未初始化，open尚未調用
       • 1：服務器鏈接已創建，open已經調用了
       • 2：請求已經接收，也就是接收到頭信息了
       • 3：請求處理中，也就是接收到響應主體了
       • 4：請求已完成，且響應已就緒，也就是響應完成了。

 1 var xml=new XMLHttpRequest(); // 新建XMLHttpRequest對象  2  3 xml.onreadystatechange = function () { // 狀態發生變化時，函數被回調  4 if (xml.readyState === 4) { // 成功完成  5 // 判斷響應結果:  6 if (xml.status === 200) {  7 // 成功，經過responseText拿到響應的文本:  8 return success(xml.responseText);  9 } else { 10 // 失敗，根據響應碼判斷失敗緣由: 11 return fail(xml.status); 12  } 13 } else { 14 // HTTP請求還在繼續... 15  } 16 } 17 18 // 發送請求: 19 xml.open('GET', '/api/categories'); 20 xml.send(); 21 22 alert('請求已發送，請等待響應...');

　　追問：GET和POST的區別

　　　　參考連接：http://www.javashuo.com/article/p-yvklfivs-mw.html

 

1. 1. GET請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給WEB服務器。固然在Ajax請求中，這種區別對用戶是不可見的。
   2. 首先是"GET方式提交的數據最多隻能是1024字節"，由於GET是經過URL提交數據，那麼GET可提交的數據量就跟URL的長度有直接關係了。而實際上，URL不存在參數上限的問題，HTTP協議規範沒有對URL長度進行限制。這個限制是特定的瀏覽器及服務器對它的限制。IE對URL長度的限制是2083字節(2K+35)。對於其餘瀏覽器，如Netscape、FireFox等，理論上沒有長度限制，其限制取決於操做系統的支持。注意這是限制是整個URL長度，而不只僅是你的參數值數據長度。
   3. GET方式請求的數據會被瀏覽器緩存起來，所以其餘人就能夠從瀏覽器的歷史記錄中讀取到這些數據，例如帳號和密碼等。在某種狀況下，GET方式會帶來嚴重的安全問題。而POST方式相對來講就能夠避免這些問題。get請求和post請求在服務器端的區別。
   4. 在客戶端使用get請求時,服務器端使用Request.QueryString來獲取參數,而客戶端使用post請求時,服務器端使用Request.Form來獲取參數.HTTP標準包含這兩種方法是爲了達到不一樣的目的。POST用於建立資源，資源的內容會被編入HTTP請示的內容中。例如，處理定貨表單、在數據庫中加入新數據行等。當請求無反作用時（如進行搜索），即可使用GET方法；當請求有反作用時（如添加數據行），則用POST方法。一個比較實際的問題是：GET方法可能會產生很長的URL，或許會超過某些瀏覽器與服務器對URL長度的限制。然而，在如下狀況中，請使用 POST 請求：沒法使用緩存文件（更新服務器上的文件或數據庫）向服務器發送大量數據（POST 沒有數據量限制）發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠 。

 

3.JS經常使用事件有哪些？

參考連接：https://www.w3school.com.cn/jsref/jsref_events.asp

屬性	當如下狀況發生時，出現此事件
onabort	圖像加載被中斷
onblur	元素失去焦點
onchange	用戶改變域的內容
onclick	鼠標點擊某個對象
ondblclick	鼠標雙擊某個對象
onerror	當加載文檔或圖像時發生某個錯誤
onfocus	元素得到焦點
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或按住
onkeyup	某個鍵盤的鍵被鬆開
onload	某個頁面或圖像被完成加載
onmousedown	某個鼠標按鍵被按下
onmousemove	鼠標被移動
onmouseout	鼠標從某元素移開
onmouseover	鼠標被移到某元素之上
onmouseup	某個鼠標按鍵被鬆開
onreset	重置按鈕被點擊
onresize	窗口或框架被調整尺寸
onselect	文本被選定
onsubmit	提交按鈕被點擊
onunload	用戶退出頁面

 

4.怎樣綁定和解綁事件？

　　　　參考連接：http://www.javashuo.com/article/p-riknxqwx-bv.html

 

1. 1. 綁定事件：
      • 在DOM元素中直接綁定

        1 <input  onclick="myAlert()"  type="button"  value="點擊我，彈出警告框" />
        2 function myAlert(){ 3  alert("DOM元素中直接綁定"); 4 }

      • 在JavaScript代碼中綁定

        1 <input  id="btn"  type="button"  value="點擊我，彈出警告框" />
        2 document.getElementById("btn").onclick=function(){ 3     alert("JavaScript代碼中綁定");   4 }

      • 綁定事件監聽函數：elementObject.addEventListener(eventName,handle,useCapture)

        1 <input  id="btn"  type="button"  value="點擊我，彈出警告框" />
        2 document.getElementById("btn").addEventListener("click",fun);
        3 function fun(){
        4     alert("綁定事件監聽函數");  
        5 }

   2. 解除綁定：
      • onclick解綁：elementObject.onclick=false/null

        1 document.getElementById("btn").onclick=false/null;
        

      • 解除監聽事件：elementObject.removeEventListener(eventName,handle,useCapture)

        1 document.getElementById("btn").removeEventListener("click",fun);

5.z-index的值能夠取0或負數嗎？

參考連接：https://blog.csdn.net/lhjuejiang/article/details/80945334

能夠取0或負值。z-index負值能夠隱藏元素，只須要層疊上下文內的某一個父元素加個背景色就能夠。它與clip隱藏想必的一個優點是：元素無須絕對定位，設置position:relative就能夠隱藏，另外一個優點是它對原來的佈局以及元素的行爲沒有任何影響。而clip隱藏會致使空間focus的焦點發生細微的變化，在特定條件下是有體驗問題的。它的不足之處就是不具備廣泛適用性，須要其餘元素配合進行隱藏。

 

6.px、em和rem的區別，rem怎樣使用？

　　　　參考連接：https://blog.csdn.net/qq_36150631/article/details/80500770

1. 共同點：px、em和rem都是計量單位，都能表示尺寸。
2. 區別：
   • px表示「絕對尺寸」（並不是真正的絕對），實際上就是css中定義的像素，利用px設置字體大小及元素寬高等比較穩定和精確。px的缺點是其不能適應瀏覽器縮放時產生的變化，所以通常不用於響應式網站。
   • em是一種相對長度單位，相對於自身元素的字號大小，若是沒有設置即參照父容器的字號大小或瀏覽器默認字號大小。舉例：

     1  #box{ 2 font-size:14px; 3  width:10em; 4  } 5 <div id="box">div的寬度爲140px</div> 

   • rem是css3的新標準也是一種相對長度單位，其相對於HTML根標籤的字號大小。舉例：

     1  html{ 2 font-size:14px; 3  #box{ 4  width:10rem; 5  } 6 <div id="box">div的寬度爲140px</div> 

3. rem的使用：

• • 移動端的UI設計稿的寬度分爲不少種,可是要想使用一份代碼就適配全部屏幕，就必須使用相對單位，這時候使用rem是最好的選擇。使用方法：咱們將UI設計稿人爲均分紅幾等份，使用媒體查詢判斷屏幕的大小，針對判斷出的每一種屏幕大小，給其html根元素的字號大小設置爲爲均分後的每一等份的大小。如：UI設計稿寬度爲640px,咱們將UI設計稿均分爲20等份,那麼咱們就能夠經過媒體查詢，給320px的屏幕設置HTML根元素的字號大小爲16px（320/20）,給640px大小的屏幕設置html根元素字號大小爲32px(640/20),則咱們在後續書寫代碼的時候，ui設計稿上的一個div的盒子寬度爲160px,咱們使用rem單位將其表示爲width：5rem,則此盒子不管在320px的屏幕下仍是在640px的屏幕下都將顯示爲屏幕的四1/4的寬度。
  • 簡便方法：咱們在使用rem時，每個元素的大小都將從設計稿的px轉換爲rem相對單位，很是麻煩。遇到不能整除的數值還會致使最後頁面數值的不精確，在這種狀況下咱們，可使用淘寶開發的flexible.js插件，配合開發工具vs code的cssrem插件，可避免作媒體查詢與數值的轉換。（前者避免媒體查詢，後者避免作數值轉換）。

 

3、筆試題

假定一個數組arr的元素從左到右依次是負數、零和正數。請打印出最後一個負數和第一個正數出現的位置。如arr=[-2,-1,0,0,0,0,1,2] 最後一個負數的位置是2，第一個正數的位置是7。如下是個人代碼：

 1 var arr=[-2,-1,0,0,0,0,1,2];
 2 var a,b;
 3 for(var i=0;i<arr.length;i++){
 4   if(arr[i]<0){
 5       a=arr.indexOf(arr[i])+1;
 6   }else if(arr[i]>0){
 7       b=arr.indexOf(arr[i])+1;
 8       break;
 9   }
10 }
11 console.log('最後一位負數位置'+a+'第一位正數位置'+b);

面試官建議用二分法從中間開始查找，以減小for循環的次數

4、總結

多是我運氣好，也多是面試官看我是零基礎轉行，因此出的題比較基本並不難。我回答錯誤的地方面試官很耐心地糾正，在這表示感謝。