面試題

1. <font color=red>語義化的理解？</font>

1. 用正確的標簽做正確的事情；

2. 當頁面加載失敗的時候，還能夠呈現(xiàn)出清晰的結(jié)構(gòu)；

3. 有利于SEO優(yōu)化，利于搜索引擎的收錄（即便于網(wǎng)絡(luò)爬蟲的識別）；

4. 在項目開發(fā)及維護時，語義化也很大程度上降低了開發(fā)難度，節(jié)省成本。

2. <font color=red>垂直水平居中的方法有幾種？</font>

1. 絕對定位：

   top:0，left:0，rhuanight:0，bottom:0，margin:auto

2. 絕對定位 + 位移：

   left:50%，top:50%，transform：translate（-50%，-50%）

3. 彈性盒布局：

   display：flex，justify-content：center，align-item：center

3. <font color=red>Javascript如何實現(xiàn)繼承？</font>

1. 原型鏈繼承：子類的原型指向父類的實例；
2. 構(gòu)造繼承：call、apply 繼承；
3. 組合繼承：原型鏈和構(gòu)造的結(jié)合；
4. 拷貝繼承；
5. 寄生組合繼承；
6. ES6繼承。

4. <font color=red>Cookie的弊端？</font>

1. 只能使用文本進行存儲；
2. 單條的存儲大小有限制，不超過4kb；
3. 存儲數(shù)量有限制，一般在50條左右；
4. 讀取時有域名限制，不可跨域的確，只能由寫cookie的同一域名的網(wǎng)頁讀??；
5. 時效有限制，最短時效為一個會話期。

5. <font color=red>如何解決跨域問題?</font>

1. 前端JSONP處理：在src屬性中引入接口地址，利用script在引入外部js文件不受同源策略限制的特性，來實現(xiàn)跨域。（src的開放性原則）

   接口地址中引入的js腳本中的內(nèi)容是函數(shù)調(diào)用，該函數(shù)調(diào)用的參數(shù)是服務(wù)器返回的數(shù)據(jù)，為了獲取這里的參數(shù)數(shù)據(jù)，需要事先在頁面中定義全局回調(diào)函數(shù)，在回調(diào)函數(shù)中處理服務(wù)器返回的數(shù)據(jù)。JSONP只能實現(xiàn)GET請求的跨域，但其兼容性好，不需要使用類似 XMLHttpRequest 的對象。

2. 后端cors處理：原理是使用自定義的 HTTP 頭部，讓服務(wù)器與瀏覽器進行溝通（兩者同時支持），主要是通過設(shè)置響應(yīng)頭的 Access-Control-Allow-Origin 來達到目的。CORS對GET、POST請求的跨域都能夠處理，而且對客戶端來說可以像使用自己域下資源一樣使用ajax來跨域訪問數(shù)據(jù)，非常方便。

3. proxy 服務(wù)器代理：proxy 代理跨域，從本服務(wù)器出發(fā)，以node為中間層，在中間層把當前源切換為目標源，完成跨域，再請求另一個服務(wù)器。

4. 擴展內(nèi)容：document.domain window.name window.postMessage

6. <font color=red>原生 JS 中 call()、apply()、bind() 方法有什么區(qū)別？</font>

1. 三個方法都可以改變函數(shù)運行時的 this 指向；
2. 三個方法的第一個參數(shù)都是函數(shù)調(diào)用執(zhí)行時 this 指向的對象；
3. call() 方法第二個參數(shù)是可變參數(shù)，是函數(shù)調(diào)用執(zhí)行時本身所需要的參數(shù)；
4. apply() 方法第二個參數(shù)是一個數(shù)組或arguments；
5. call() 和 apply() 方法都是立即調(diào)用函數(shù)執(zhí)行，在運行時修改 this 的指向；
6. bind() 方法在函數(shù)封裝定義時，直接修改了 this 的指向，它不會影響原函數(shù)本身的 this 指向。

7. <font color=red>什么是閉包？特點是？三要素？注意點？</font>

1. 閉包：變量既能重復使用，又不會污染全局；

2. 特點：（1）作為一個函數(shù)變量的一個引用，當函數(shù)返回時，其處于激活狀態(tài)；

    （2） 一個閉包就是當一個函數(shù)返回時，一個沒有釋放資源的棧區(qū)。
   

3. 三要素：（1）外層函數(shù)嵌套內(nèi)層函數(shù)；

    （2）內(nèi)層函數(shù)使用外層函數(shù)的局部變量；
   
    （3）把內(nèi)層函數(shù)作為外層函數(shù)的返回值。
   

4. 注意點：（1）由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

    （2）閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
   

8. <font color=red>性能優(yōu)化的方法？</font>

1. 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器；
2. 前端模板 JS + 數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)；
3. 減少DOM操作次數(shù)，優(yōu)化javascript性能；
4. 當需要設(shè)置的樣式很多時使用外部樣式而不是直接操作內(nèi)聯(lián)樣式；
5. 少用全局變量、緩存DOM節(jié)點查找的結(jié)果，減少IO讀取操作；
6. 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳……。

9. <font color=red>什么叫優(yōu)雅降級和漸進增強？</font>

1. 優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后載針對低版本瀏覽器進行兼容；

2. 漸進增強：針對低版本瀏覽器保證最基本的功能，然后再針對高版本瀏覽器進行效果、交互等改進和追加功能，以達到更好的用戶體驗；

3. 區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，

   而漸進增強則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。

   降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

10. <font color=red>清除浮動的幾種方法？</font>

1. 給父元素設(shè)置overflow：hidden；
2. 使用空盒子（元素）方法：在需要清除浮動的元素同級下家一個空元素（這個元素不能有其他任何樣式），給這個元素設(shè)置clear：both樣式；
3. 萬能清除法：給父元素設(shè)置樣式 clear：after {content：“.”；display：block；clear：both；visibitily：hidden；height：0；}

11.<font color=red>闡釋css sprites的使用方法和作用？</font>

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片，減輕了服務(wù)器的壓力。

12.<font color=red>如何用原生js給一個按鈕綁定兩個onclick事件？</font>

使用事件監(jiān)聽 addEventListener

13.<font color=red>列舉jquery中的選擇器？</font>

基本 #id element .class * selectorN

層級 ancestor descendant parent > child prev + next prev ~ siblings

基本 :first :not(selector) :even :odd :eq(index) :gt(index) :lang :last :lt(index) :header :animated :focus :root:target

內(nèi)容 :contains(text) :empty :has(selector) :parent

可見性 :hidden :visible

屬性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1]

子元素 :first-child :last-child :nth-child :nth-last-child() :only-child

表單 :input :text :password :radio :checkbox) :submit :image :reset :button :file :hidden

表單對象屬性 :enabled :disabled :checked :selected

14.<font color=red>Javascript中的定時器有哪些？他們的區(qū)別及用法是什么？</font>

setTimeout：超時定時器

setInterval：間隔定時器

requestAnimationFrame：循環(huán)定時器（作為了解）

區(qū)別：超時定時器是過一段時間執(zhí)行，只會執(zhí)行一次；間隔定時器是間隔一段時間就會執(zhí)行一次。

用法：兩者的用法基本一致，如： setInterval（function （）{console.log(1)；}，1000）,表示每隔一秒打印一個1。

15.<font color=red>請描述一下 cookies、sessionStorage和localstorage區(qū)別？</font>

相同點：都存儲在客戶端

不同點：

1. 存儲大小不同

   · cookie數(shù)據(jù)大小不能超過4k。

   · sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

2. 時效性不同

   · localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；

   · sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。

   · cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

3. 數(shù)據(jù)與服務(wù)器之間的交互方式

   · cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端

   · sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

16.<font color=red>document.write和innerHTML的區(qū)別？</font>

1. document.write是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open, 瀏覽器會自動調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會導致頁面被重寫。

2. innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內(nèi)容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。

3. innerHTML將內(nèi)容寫入某個DOM節(jié)點，不會導致頁面全部重繪。

4. innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。

17.<font color=red>拖拽會用到哪些事件？</font>

鼠標按下事件：onmousedown

鼠標移動事件：onmousemove(鼠標在目標中移動時反復執(zhí)行)

鼠標抬起事件：onmouseup

18.<font color=red>創(chuàng)建ajax的步驟？</font>

1. 創(chuàng)建ajax核心對象xmlhttprequest，用來和服務(wù)器交換數(shù)據(jù)；

   var xmlhttp =new XMLHttpRequest（);

2. 使用xmlhttprequest對象的open（）方法進行連接和send（）方法發(fā)送資源請求給服務(wù)器；

3. 使用xmlhttprequest對象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)；

4. 使用onreadystatechange函數(shù)，當發(fā)送請求到服務(wù)器，我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對象的readyState發(fā)生改變都會觸發(fā)onreadystatechange函數(shù)。（簡單說就是狀態(tài)發(fā)生改變時發(fā)送數(shù)據(jù)回客戶端）

19.<font color=red>xml和json的區(qū)別，請用四個詞語來形容？</font>

1. JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些；

2. JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互；

3. XML對數(shù)據(jù)描述性比較好；

4. JSON的速度要遠遠快于XML。

20.<font color=red>box-sizing常用的屬性有哪些？分別有什么作用？</font>

1. box-sizing：content-box（標準盒模型）：在寬度和高度之外繪制元素的內(nèi)邊距和邊框；

2. box-sizing：border-box（怪異盒模型）：帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中；

3. box-sizing：inherit（）：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

21.<font color=red>H5語義化的重要性？</font>

1. 當頁面加載失敗時，還能夠呈現(xiàn)出清晰的結(jié)構(gòu)；
2. 有利于SEO優(yōu)化，利于搜索引擎收錄（即便于爬蟲的識別）；
3. 在項目開發(fā)及維護時，語義化也很大程度上降低了開發(fā)難度，節(jié)省成本。

22.<font color=red>怎么給狀態(tài)欄添加圖標？</font>

使用link標簽引入：

<link rel="shortcut" href="圖標地址">

23.<font color=red>三角形寫法？</font>

div{
    width: 0;
    height: 0;
    border-top:10px solid red;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
    border-bottom:10px solid #fff;
}

24.<font color=red>css選擇器有哪些，選擇器的權(quán)重的優(yōu)先級？</font>

選擇器：

1. ID選擇器

2. class選擇器

3. 通配符選擇器（*）

4. 包含選擇器（后代選擇器） div p{}

5. 群組選擇器 p,h1,span{}

6. 偽類選擇器　?。篽over

7. 偽元素　　::first-line

8. 子選擇器、相鄰選擇器

9. 屬性　　[type="text"]

權(quán)重優(yōu)先級：

1. 第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

2. 第二等：代表ID選擇器，如：#content，權(quán)值為0100。

3. 第三等：代表類、偽類和屬性選擇器，如.content，權(quán)值為0010。

4. 第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。

5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。

6. 繼承的樣式?jīng)]有權(quán)值。

25.<font color=red>以下代碼輸出結(jié)果為多少？</font>

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> ?
console.log(p2) // -> ?

// console.log(p1)值為：
{
    name: 'yck';
    age: 26
}
// console.log(p2)值為：
{
    name: 'yyy';
    age: 30
}

26. <font color=red>循環(huán)中解決 var 定義函數(shù)的問題？</font>

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i) // 因為setTimeout是一個異步函數(shù)，這里只會等循環(huán)結(jié)束后每隔一秒輸出6（共5個）
  }, i * 1000)
}

解決方法：

1. 使用閉包的方式

for (var i = 1; i <= 5; i++) {
    function (j) {
        setTimeout(function timer() {
            console.log(j)
         }, j * 1000)
    }(i)
}

2. 使用 setTimeout 的第三個參數(shù)，這個參數(shù)會被當成 timer 函數(shù)的參數(shù)傳入

   for (var i = 1; i <= 5; i++) {
     setTimeout(function timer(j) {
       console.log(j)
     }, i * 1000, i)
   }
   

3. 使用 let 定義 i（推薦）

   for (let i = 1; i <= 5; i++) {
     setTimeout(function timer() {
       console.log(i)
     }, i * 1000)
   }
   

27. <font color=red>什么是淺拷貝？如何實現(xiàn)淺拷貝？什么是深拷貝？如何實現(xiàn)深拷貝？</font>

為防止復制了引用地址，從而會導致改變了一方其他也都被改變的情況。

1. 淺拷貝：只會拷貝原所有的屬性值到新的對象中，如果屬性值是對象的話，拷貝的是地址。

   實現(xiàn)方法：object.assign 擴展運算符...

2. 深拷貝：淺拷貝只解決了第一層的問題，如果接下去的值中還有對象的話，兩者享有相同的地址。使用深拷貝解決

   實現(xiàn)方法： JSON.parse（JSON.stringify（object））

   局限：會忽略undefined 會忽略 symbol 不能序列化函數(shù) 不能解決循環(huán)引用的對象

28. <font color=red>如何理解原型？如何理解原型鏈？</font>

原型：

1. 原型是函數(shù)的伴生體，屬性為 prototype；
2. 原型屬性是一個指針，指向的對象就是原型對象(__ proto __）；
3. 原型是實例共享方法和屬性的地方；
4. js 中原型也是對象，可以通過原型實現(xiàn)對象屬性的繼承；
5. 并不是所有的函數(shù)都有 prototype 屬性。

原型鏈：

1. 函數(shù)實例的__ proto __指向構(gòu)造函數(shù)的 prototype；
2. 構(gòu)造函數(shù)的原型對象是一個普通的 object，所以它的__ proto __指向object.prototype；
3. object 是頂級的對象，它的__ proto __是自己設(shè)置（set）和調(diào)用（get）。

29. <font color=red>引入css樣式的方式？它們的區(qū)別？</font>

1. 使用<link>標簽引入

   <link rel="stylesheet" type="text/css" href="文件路徑"
   

2. 使用 import 引入

   <style type="text/css">
    @import url(文件路徑)
   </style>
   

3. 區(qū)別

   a. link 屬于html標簽，@import完全屬于css

   b . linlk 能讓結(jié)構(gòu)和樣式一起加載，@import 先加載結(jié)構(gòu)，后加載樣式

   c. @import 有兼容問題，link 沒有

   d. 使用dom控制樣式時，link 可用js控制，@import不行

30. <font color=red>HTML元素的分類？</font>

1. 塊級元素：獨占一行，自上而下排列，可以設(shè)置寬高

   如： div p h1~h6 ul li from 等

2. 行內(nèi)元素：橫向排列，不能設(shè)置寬高

   如： em span i b a strong等

3. 行內(nèi)塊（內(nèi)聯(lián)）元素：橫向排列，可以設(shè)置寬高

   如： input select img 等

31. <font color=red>什么是盒模型？</font>

無論什么類型的元素，都有一個盒模型，它是css布局的一個基石。

組成：border（邊框）  margin（邊界、外邊距）  padding（內(nèi)邊距、填充、補白） content（寬、高）

將標準盒模型（content-box）轉(zhuǎn)為怪異盒模型：  box-sizing：border-box

32. <font color=red>手寫省略號？</font>

div {
    width: 200px;
    /* height: 100px; */
    border: 1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

33. <font color=red>透明的兩種寫法？</font>

1. 標準寫法： opacity：數(shù)值； 取值范圍0~1
2. IE寫法： filter： alpha （opacity=value); value取值為1~100

34. <font color=red>網(wǎng)絡(luò)請求的流程？</font>

1. 發(fā)送報文：當輸入一個網(wǎng)址回車時，向服務(wù)器發(fā)送了一次請求；
2. 當請求發(fā)送后，服務(wù)器接收請求，并做出響應(yīng)處理；
3. 服務(wù)器返回處理的結(jié)果給客戶端----html，css，js，其他資源（圖片、視頻等）

35. <font color=red>讓元素隱藏的方法和文字隱藏的方法？</font>

1. 元素隱藏的方法：

   display： none （不占空間） visibility： hidden （占空間） opacity： 0 overflow： hidden

2. 文字隱藏的方法：

   letter-spacing：-1px； text-indent： -2em；

36. <font color=red>五大瀏覽器內(nèi)核？</font>

內(nèi)核：又名渲染引擎，瀏覽器里量作用的部分，負責解析網(wǎng)頁的語法（html、css、js），然后顯示出來。

Trident（MSHTML，三叉戟）、Gecko（壁虎）、Presto（迅速的）、webkit（Safari內(nèi)核，chrome內(nèi)核原型，它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核）、 （由Google和Opera Software開發(fā)的瀏覽器排版引擎）

37. <font color=red>寫出5種常見的css bug 和 css hack？</font>

1. 圖片間隙：div種圖片間隙，會默認將div撐大3像素，可以將img轉(zhuǎn)為塊級元素；圖片橫向排列時有間隙，可以 使用浮動 float：left；
2. 雙倍浮向（邊距）：IE6，使用 display：inline；
3. 圖片在IE瀏覽器上有藍色邊框：設(shè)置 img{border：0}；
4. 默認高度：在IE6 及以下中部分塊級元素默認默認有低于18px的高度，可以設(shè)置 fong-size：0 或 overflow：hidden；
5. 表單元素距離頂部的間距不一致：設(shè)置 float：left；
6. 按鈕元素大小不一：設(shè)置統(tǒng)一大?。?/li>
7. 百分比 bug ：在IE6 及以下中會出現(xiàn)50% + 50% > 100% 的情況，給右邊的浮動元素添加 clear：right；
8. 指針 bug：在IE中指針為手型，設(shè)置 cursor：pointer；
9. 高度塌陷：設(shè)置overflow：hidden 或 讓子元素浮動；
10. <input>中的type屬性值為text時，在IE6中文本內(nèi)容在頂部：給input加一個行高等于高度；

38. <font color=red>手寫點擊任意li彈出相應(yīng)下標的幾種方法？</font>

var lis = documeng.querySelectorAll('li')

// 使用forEach循環(huán)遍歷
lis.forEach ((li,index) => {
    li.onclick = () => {
        alert(index)
    }
})
/*lis.forEach ((li,index) => {
    lis[index].onclick = () => {
        alert(index)
    }
})*/

// 給對象新增自定義屬性
//循環(huán)遍歷中綁定的事件只是封裝，并沒有觸發(fā)，等觸發(fā)時循環(huán)遍歷已經(jīng)結(jié)束；這時的i值為lis.length
for(var i = 0; i < lis.length; i++) {
    lis[i].index = i //新增屬性賦值于當前下標
    lis[i].onclick = function() {
        alert(this.index)
    }
}

// 使用let進行聲明
for(let i = 1; i < lis.length; i++) {
    lis[i].onclick = function () {
        alert(i)
    }
}

// 自調(diào)用函數(shù) (IIFE)
for(let i = 1; i < lis.length; i++) {
    (function(index) {
        lis[index].onclick = function () {
            alert(index)
        }
    })(i)
}

// 使用閉包 closure
for(let i = 1; i < lis.length; i++) {
    lis[i].onclick = (function (index) {
        return function () {
            alert(index)
        }
    })(i)
}

39. <font color=red>表單method屬性中g(shù)et和post的區(qū)別？</font>

1. get：在url地址欄中能看到用戶信息（請求頭中）；傳送數(shù)據(jù)量小不能大于2kb；安全性低，但執(zhí)行效率比post高
2. post：在url地址欄中不能看到用戶信息（請求體中）；傳送數(shù)據(jù)量較大；安全性 高

40. <font color=red>css3 中新增的css特性有哪些？</font>

css3選擇器、圖片的視覺效果（圓角、陰影、漸變背景、圖片邊框等）、背景的應(yīng)用（background-size）、盒模型的變化、陰影效果（盒子陰影、文本陰影）、多列布局和彈性盒布局、web文字和font圖標、顏色和透明度、圓角和邊框的新特性、2D和3D變形、css3過渡和動畫效果、媒體查詢和Responselve布局 。

41. <font color=red>什么是私有前綴？作用？列舉幾個？</font>

當一個屬性沒有成為 w3c 標準時，瀏覽器為了支持這個屬性而推出了瀏覽器私有前綴。

作用：更好的讓屬性在自己的瀏覽器中顯示。

谷歌 -webkit- 火狐 -moz- IE -ms- 歐朋 -o-

42. <font color=red>定位有幾種方式？</font>

1. relative：相對定位
2. absolute： 絕對定位
3. fixed：固定定位
4. sticky：粘性定位
5. static：靜態(tài)定位

43. <font color=red>html 和 xhtml 的區(qū)別？</font>

1. xhtml 元素必須被正確的嵌套；
2. xhtml 元素必須被關(guān)閉；
3. 標簽名必須使用小寫字母；
4. xhtml 文檔必須擁有根元素。

44. <font color=red>動畫效果的三要素？</font>

1. 動畫名稱：animation-name：play；

2. 動畫時間：animation-duration：3s；

3. 動畫執(zhí)行體： @keyframes play {

            from  {  transform：rotate（0deg） translateX（0deg）}
   
            to  {  transform：rotate（360deg） translateX（3600deg）}
   
        }
   

45. <font color=red>數(shù)組的常見API？ES5新增的方法？</font>

concat（）：連接數(shù)組

join（）：改變連接符號，默認“，”

push（）：向數(shù)組末尾添加一個元素，并返回新數(shù)組

pop（）：刪除數(shù)組最后一個元素，并返回新數(shù)組

shift（）：刪除數(shù)組第一個元素，并返回新數(shù)組

unshift（）：向數(shù)組的開頭添加一個元素，并返回新數(shù)組

reverse（）：顛倒數(shù)組中的元素的順序

slice（）：從數(shù)組中返回選定的元素，返回新數(shù)組

sort（）：對數(shù)組的元素進行排序

splice（）：刪除、添加數(shù)組新元素

tostring（）：將數(shù)組轉(zhuǎn)為字符串

新增方法：

1. 2個索引方法： indexOf lastIndexOf
2. 5個迭代方法： forEach（）、map（）、filter（）、some（）、every（）
3. 2個歸并方法： reduce（） reduceRight（）

46. <font color=red>手寫兩種數(shù)組排序的方法？</font>

// 冒泡排序
function bubble (arr) {
    for(var i = 0; i < arr.length-1; i++) {
        for(var j = 0; j < arr.length-1-i; j++) {
            if(arr[j] > arr[j + 1]) {
                var temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
    return arr
}
bubble([....])

// 選擇排序
function choose (arr) {
    for(var i = 0; i < arr.length-1; i++) {
        var minIndex = i
        for(var j = i+1; j < arr.length; j++) {
            if(arr[minIndex] > arr[j]) {
                minIndex = j
            }            
        }
        var temp = arr[i]
        arr[i] = arr[minIndex]
        arr[minIndex] = temp
    }
    return arr
}
choose([....])

// 使用 sort 排序
var arr = [....]
var arr1 = arr.sort((a, b) => {
    return a - b                                                                                                                 
})

47. <font color=red>手寫幾種數(shù)組去重的方法？</font>

1. 雙重for循環(huán)去重

   function fn (arr) {
       for(var i = 0; i < arr.length - 1; i++) {
           for(var j = i+1; j < arr.length; j++) {
               if(arr[i] === arr[j]) {
                   arr.splice(j--, 1)
               }
           }
       }
       return arr
   }
   fn([....])
   

2. 利用對象的屬性名不能重復的特點（效率高）

   function distinct(arr) {
       var obj = {}
       for(var i = 0; i < arr.length; i++) {
           if (obj[arr[i]] === undefined) {
               obj[arr[i]] = 1
           } else {
               arr.splice(i--, 1)
           }
       }
       return arr
   }
   distinct([....])
   

3. 使用歸并方法 reduce

   var arr1 = [....]
   var arr2 = arr1.reduce((prev, next) => {
       if (!prev.includes(next)) {
       // if (prev.indexOf(next) === -1) {
           prev.push(next)
       }
       return prev
   },[])
   

4. 使用ES6 新增方法 new Set

   var arr = [....]
   var arr1 = [...new Set(arr)]
   
   // 或者使用下面這種方法
   function distinct(arr) {
       return Array.from(new Set(arr))
   }
   var arr2 = distinct(arr)
   

48. <font color=red>字符串常見的API？</font>

charAT（）：返回指定位置的字符

indexOf（）：從左往右檢索字符串，返回下標

lastIndexOf（）： 從右往左檢索字符串，返回下標

charCodeAT（）：返回在指定位置字符的ASCII編碼

fromCharCode（）：從字符編碼ASCII創(chuàng)建一個字符串

concat（）：連接字符串

slice（）：提取字符串的片段

split（）：將字符串分割為字符串數(shù)組，默認用“，”分割

toLowerCase（）：將字符串轉(zhuǎn)換為小寫

toUpperCase（）：將字符串轉(zhuǎn)換為大寫

trim（）：去掉字符串前后空格；trimLeft、trimRight

startsWith（）：字符串是否以某個字符開頭，返回Boolean

endsWith（）：字符串是否以某個字符結(jié)尾，返回Boolean

includes（）：字符串是否包含某個字符，返回Boolean

repeat（）：重復字符串幾次

JSON.stringify（）：將json格式轉(zhuǎn)為字符串

JSON.parse（）：將符合json格式的字符串轉(zhuǎn)為json

49. <font color=red>js內(nèi)置對象有哪些？</font>

1. Object對象：所有js對象的超類（基類）；
2. Array對象：數(shù)組對象，定義數(shù)組屬性和方法；
3. Boolean對象：布爾對象，與布爾值相關(guān)；
4. Date對象：日期對象，與日期時間相關(guān)；
5. Erroy對象：錯誤對象，處理程序錯誤；
6. Function對象：函數(shù)對象，定義函數(shù)屬性和方法；
7. Math對象：數(shù)學對象，各種數(shù)學運算工具（不是構(gòu)造函數(shù)）；
8. Number對象：數(shù)字對象，定義數(shù)字屬性和方法；
9. KegExp對象：正則表達式對象，定義文本匹配和篩選規(guī)則；
10. String對象：字符串對象，定義字符串屬性和方法。

50. <font color=red>事件流包含哪幾個階段？</font>

1. 捕獲階段：從父元素到子元素尋找的過程；
2. 目標階段：尋找到需要觸發(fā)事件的目標；
3. 冒泡階段：從子元素開始觸發(fā)事件，直到父元素觸發(fā)完畢。

51. <font color=red>對象的三大特點？</font>

1. 封裝：寫對象、用對象，把一些相關(guān)的對象和屬性放到一起，用一個變量抽象出來，那么就完成了這個對象的封裝；
2. 繼承：子承父業(yè)，子對象可以使用父對象的一些屬性和方法；
3. 多態(tài)：重載，根據(jù)不同的參數(shù)類型、參數(shù)個數(shù)實現(xiàn)不同的功能；重寫，父類的方法不好用，其本身重新定義一個方法名相同的不同的方法；

52. <font color=red>解釋this的指向？</font>

1. 全局的this指向window；
2. 構(gòu)造函數(shù)里的this指即將new的那個對象；
3. 對象方法的this指向?qū)ο螅ㄕl調(diào)用this就指向誰）；
4. 自調(diào)用函數(shù)（IIFE，立即執(zhí)行函數(shù)）中的this指向window；
5. 事件里的this指事件觸發(fā)對象；
6. 箭頭函數(shù)沒有自己的this（指向箭頭函數(shù)的父級）；
7. 定時器里的this指向window；
8. 對于佚名函數(shù)來說，this均指window。

53. <font color=red>常見狀態(tài)碼？</font>

1. 101：客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本；
2. 200：交易成功；
3. 304：客服端已執(zhí)行GET，但文件未變化；
4. 306：前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用；
5. 400：錯誤請求，如語法錯誤；
6. 403：服務(wù)器接收到請求，但是拒絕提供服務(wù)；
7. 404：沒有發(fā)現(xiàn)文件，請求資源不存在；
8. 500：服務(wù)器產(chǎn)生內(nèi)部的錯誤；
9. 503：服務(wù)器當前不能處理客服端的請求，一段時間后可能恢復正常；
10. 505：服務(wù)器不支持或拒絕支持請求頭中指定的HTTP版本。

54. <font color=red>前端常用的設(shè)計模式有哪些？</font>

1. 工廠模式；
2. 抽象工廠模式；
3. 單例模式；
4. 適配器模式；
5. 組合模式；
6. 代理模式；
7. 觀察者模式；
8. 策略模式；
9. MVC模式。

55. <font color=red>什么是變量提升？什么是暫時性死區(qū)？var、let 及 const 區(qū)別？</font>

提升：代碼開始執(zhí)行之前會將變量聲明提升到當前作用域的頂部（賦的值不會提升）；

暫時性死區(qū)：使用 let 或 const 聲明變量時，不能在聲明變量之前就使用該變量；

var、let 及 const 區(qū)別：

1. 函數(shù)提升優(yōu)先于變量提升，函數(shù)提升會把整個函數(shù)挪到作用域頂部，變量提升只會把聲明挪到作用域頂部；

2. var 存在提升，我們能在聲明之前使用（undefined）。let、const 因為暫時性死區(qū)的原因，不能在聲明前使用（報錯）；

3. var 在全局作用域下聲明變量會導致變量掛載在 window 上，其他兩者不會（當前作用域）；

4. let 和 const 作用基本一致，但是后者聲明的變量不能再次賦值（可以修改）。

56. <font color=red>什么是模塊化？</font>

1. 立即執(zhí)行函數(shù)：（function（）{}）（）；
2. AMD 和 CMD：使用 define 定義和 require 引入；
3. Common JS：使用 module.export 導出 和 require 引入；
4. ES Module：使用 export 或 export default 導出模塊，import 引入模塊。

57. <font color=red>并發(fā)與并行的區(qū)別？</font>

并發(fā)：宏觀概念，在一段時間內(nèi)通過任務(wù)間的切換完成所有的任務(wù)，這種情況稱之為并發(fā)；

并行：微觀概念，同時完成多個任務(wù)的情況稱之為并行。

58. <font color=red>什么是回調(diào)函數(shù)？回調(diào)函數(shù)有什么缺點？如何解決回調(diào)地獄問題？</font>

回調(diào)函數(shù)：回調(diào)函數(shù)就是一個參數(shù)，將這個函數(shù)作為參數(shù)傳到另一個函數(shù)里面，當主函數(shù)執(zhí)行完之后，再執(zhí)行傳進去的這個函數(shù)；

缺點：容易寫出回調(diào)地獄（Callback hell），不利于閱讀和維護，不能使用 try catch 捕獲錯誤，不能直接 return；

解決方法：

1. Generator：可以控制函數(shù)的執(zhí)行；
2. Promise：在構(gòu)造 Promise 的時候，構(gòu)造函數(shù)內(nèi)部的代碼是立即執(zhí)行的；
3. async 及 await：await 只能配套 async 使用。

59. <font color=red>手寫一個簡易版的Promise？</font>

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
    const that = this
    that.state = PENDING
    that.value = null
    that.resolvedCallbacks = []
    that.rejectedCallbacks = []
    
    // 完善 resolve 和 reject 函數(shù)
    function resolve(value) {
        if (that.state === PENDING) {
            that.state = RESOLVED
            that.value = value
            that.resolvedCallbacks.map(cd => cd(that.value))
        }
    }
    
    function reject(value) {
        if (that.state === PENDING) {
            that.state = REJECTED
            that.value = value
            that.rejectedCallbacks.map(cd => cd(that.value))
        }
    }
    
    // 完善執(zhí)行 fn 函數(shù)
    try {
        fn(resole, reject)
    } catch（e） {
        reject(e)
    }
}

// 完善 then 函數(shù)
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    const that = this
    onFulfilled = typeof onFulfilled === 'functoin' ? onFulfilled : v => v
    onRejected = typeof onRejected === 'function' ? onRejected : r => {
        throw r
    }
    if (that.state === PENDING) {
        that.resolvedCallbacks.push(onFulfilled)
        that.rejectedCallbacks.push(onRejected)
    }
    if (that.state === RESOLVED) {
        onFulfilled(that.value)
    }
    if (that.state === REJECTED) {
        onRejected(that.value)
    }
}

60. <font color=red>瀏覽器中Event Loop執(zhí)行順序？</font>

執(zhí)行順序：

1. 首先執(zhí)行同步代碼，這屬于宏任務(wù)；

2. 當執(zhí)行完所有同步代碼后，執(zhí)行棧為空，查詢是否有異步代碼需要執(zhí)行；

3. 執(zhí)行所有微任務(wù)；

4. 當執(zhí)行完所有微任務(wù)后，如有必要會渲染頁面；

5. 然后開始下一輪 Event Loop，執(zhí)行宏任務(wù)中的異步代碼，也就是 setTimeout 中的回調(diào)函數(shù)。

61. <font color=red>new 的原理是什么？通過 new 的方式創(chuàng)建對象和通過字面量創(chuàng)建有什么區(qū)別？</font>

原理：

1. 新生成一個空對象；
2. 將構(gòu)造函數(shù)的作用域賦給新對象（鏈接到原型）；
3. 綁定this；
4. 返回新對象。

區(qū)別：

1. 使用字面量創(chuàng)建對象有助于優(yōu)化性能；
2. 使用字面量創(chuàng)建對象代碼的可讀性更高；

62. <font color=red>JS 分為哪兩大類型？都有什么各自的特點和區(qū)別？你該如何判斷正確的類型？</font>

js兩大類型：基本類型、引用類型

特點：

1. 基本類型：按值訪問，可操作保存在變量中的實際的值?；绢愋椭抵傅氖呛唵蔚臄?shù)據(jù)段。
2. 引用類型：當復制保存著對象的某個變量時，操作的是對象的引用，但在為對象添加屬性時，操作的是實際的對象。引用類型值指那些可能為多個值構(gòu)成的對象。

區(qū)別：

1. 基本類型的變量是存放在棧區(qū)的；
2. 引用類型的值是同時保存在棧內(nèi)存和堆內(nèi)存的；
3. 基本類型的比較是值得比較；
4. 引用類型的比較是引用的比較。

判斷類型：

1. typeof：可以判斷數(shù)據(jù)類型；
2. instanceof：用來判斷當前對象是否是另一個對象的實例（是否掛載在它的的原型上，其判斷類型也不是完全正確的）。