記亞信的一次筆試題

九月初參加亞信筆試，在這裏記錄一下，之後也在掘金記錄本身做爲小菜鳥的成長過程。

---

對Markdown還不是很熟悉，因此排版會差一點，抱歉了;

一、列舉經常使用的行內標籤塊級標籤和空標籤

• 行內元素：和其它元素在同一行上，元素寬/高及頂部/底部邊距不可設置，元素寬度爲包含內容寬度不可改變
  • 例如：a、big、br、code、em、i、img、input small、span、strong、label、q
• 塊級元素：每一個塊級元素都重新一行開始，元素寬/高及頂部/底部邊距可自定義，元素默認狀況下和它父元素寬度一致
  • 例如： div、dl、form、h系列、menu、p、pre、ul、ol
• 空元素：指的是在HTML中，沒有內容
  • 例如：br、hr、input、img、link

---

二、display有哪些經常使用值說明它們的做用

* display:none;//此元素不會被顯示
 * display:block;//此元素以塊級元素展現，先後有換行符
 * display:inline;//默認值，之內聯元素顯示，無先後換行符
 * display:inline-block;//行內塊級元素
 * display:table;//此元素以塊級表格來顯示 
複製代碼

---

三、談談position的幾種定位

* positipon:static;//默認值，沒有定位;
 * position:relative;//相對定位，相對於其原先所佔的位置爲基準進行偏移；
 * position:absolute;//絕對定位，相對於第一個非默認定位之外的父元素進行定位；
 * position:fixed;//固定定位，相對於瀏覽器窗口進行定位，且不會隨屏幕滾動；
複製代碼

---

四、簡單說一下盒子模型

• 盒子模型有兩種：
  • W3C標準盒子模型
  • IE的怪異盒子模型
• W3C定義的標準盒模型包括：

* margin border padding content
複製代碼

• 標準盒模型中元素的width=content；
• IE怪異盒模型大體與標準盒模型相同，區別在於：
  • 怪異盒模型中元素的width=content+padding+border
• 在CSS3中：

* box-sizing:content-box
  * box-sizing:border-box
  * box-sizing:inherit
  * box-sizing: inherit;//規定應從父元素繼承 box-sizing屬性的值。
複製代碼

• 即box-sizing指定盒子模型種類
  • content-box指定盒子模型爲W3C（標準盒模型)
  • border-box爲IE盒子模型（怪異盒模型）

---

五、H5和CSS3的新特性

• 語義化標籤： header、footer、nav、section、aside、article
• 音頻視頻：audio，video
• 繪製：canvas
• 拖拽：draggable 設置爲true 能夠被拖拽
• 本地存儲：
• localStorage - 沒有時間限制的數據存儲；
• sessionStorage - 針對一個session的數據存儲，
• 當用戶關閉瀏覽器窗口後，數據會被刪除；
• 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

CSS3中新特性

• 選擇器：

* :last/first-child選擇元素首/尾子代
   * :nth-child(num/even/odd)選擇指定/偶數/奇數
   * :checked選擇每一個被選中的元素
   * ::selection選擇被用戶選取的元素部分
複製代碼

• 僞類

* a:link{color:skyblue}選擇未訪問的連接
  * a:hover{color:skyblue}鼠標移動到連接上
  * a:avtive{color:skyblue}選中的連接
複製代碼

• 背景和邊框

* background-size:規定背景圖尺寸
   * background-origin:規定背景圖片的定位區域
   * 背景圖片能夠放置於 content-box、padding-box 或 border-box 區域
   * border-radius:圓角
   * box-shadow/text-shadow:陰影
   * border-image:邊框圖片
   * translate():元素從當前位置移動，根據給定的left(x座標)和top(y座標)參數
複製代碼

---

六、談談浮動和如何清除浮動

• 清除浮動：爲解決高度坍塌
• 由於子元素浮動，使父元素高度沒法被撐起，形成高度坍塌
• 這是需在父元素身上設置overflow:auto/hidden就能夠了
• 另外一種清除浮動的方法是在需清除浮動元素的前面增長空div
• 設置樣式clear：both;

---

七、談談ajax中的get和post並手寫一個ajax

get和post都是ajax中最經常使用的兩種請求方式其中：

• get方法
  • get中傳參請求是在URL的尾部利用 「？」表明URL地址結尾與數據參數的開端，後邊以名稱=值的形式且以&進行鏈接
  • get請求參數客戶端可見，所以不安全
  • 由於是在地址符上拼接參數因此傳送數據量小（2KB左右）
• post方法
  • post中傳參是放在http主體中，
  • 參數隱藏所以更安全，且傳輸數據量大
• 手寫ajax

function hxp_ajax(obj){
   if(obj.type.toLowerCase()=='get'){
       var arr=[];
       for(var jian in obj.data){
           let str=`${jian}=${obj.data[jian]}`;
           arr.push(str);
       }
       var ps=arr.join('&');
       data.url+=ps;
   }else{
       var formdata=new FormData();
       for(let jian in obj.data){
           formdata.append(jian,obj.data[jian]);
       }
   }
var xhr=new XMLHttpRequest();
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
           if(xhr.status==200){
               console.log(xhr.responseText)
               console.log(JSON.parse(xhr.responseText))
           }
       }
   }
   xhr.timeout=3000;
   xhr.timeout=function(){
       console.log('請求超時')；
   }
   xhr.open(obj.type,obj.url,true);
   obj.type.toLowerCase()=='get'?xhr.send(null:xhr.send(formdata);
}
複製代碼

---

八、談談cookie、sessionStorage、localStorage

• cookie
  • cookie數據始終在同源http請求中攜帶，在瀏覽器和服務器之間來回傳遞
  • 大小：cookie傳輸數據很小不超過4KB，
  • 做用：http請求都會攜帶cookie，只適合攜帶小數據如：會話標識
  • 過時時間：僅在設置的cookie過時時間以前
• sessionStorage和localStorage
  • 兩者通常僅在本地保存
  • 大小：兩者都很大可達5M以上
  • 過時時間：
    • sessionStorage僅在當前瀏覽器頁面關閉以前有效
    • localStorage始終有效，即便瀏覽器頁面/窗口關閉也會一直保存
  • 做用：用做持久數據的保存

---

九、談談JavaScript中的原型鏈和繼承

這裏涉及了不少,我我的也作了不少筆記,這裏只大體說下

• JavaScript能經過原型鏈實現方法的繼承複用,這大大的減小了重複的代碼編寫，也讓代碼更加的整潔規範
• 原型鏈實現繼承（其實就是子類繼承父類屬性和方法）
• 實現繼承的關鍵之處在於

Son.prototype = new Father();
  var sonObj_2 = new Son();
複製代碼

• 這裏很好理解經過new Son()生成的實例對象

sonObj_2中的proto指向Son.prototype
  而Son.prototype又指向Father的實例對象
  Father的實例對象的proto指向Father.prototype
  所以Son實例化出的對象經過原型鏈的查找
  都具備構造函數Father身上的屬性和方法了
複製代碼

十、給定一個字符串，輸出字符串中出現頻率最高的字符

function seleMax(){
   var str=document.getElementById('text').value;
   var arr=str.split('');
   var json=[];
   for(let i=0; i<arr.length;i++){
       json[arr[i]]?json[arr[i]]+=1:json[arr[i]]=1;
   }
   var char='';
   var num=0;
   for(var hxp in json){
       json[hxp]>num?(num=json[hxp],char=hxp):null
   }
   console.log(json);
   console.log(`出現頻率最高的字符爲${char},它出現了${num}次`);
}
複製代碼

和網傳的同樣，亞信的筆試題很簡單，雖然如此但上面不少內容是我後來又蒐集一些補充上來的，整理過程不免有些錯誤，做爲一名大四的小菜雞，誠心但願各位指正；