《web前端陪你讀書》 面試押題整理

音頻連接：www.ximalaya.com/30018073/so…

沙翼老師一直是我比較關注和欣賞的業內大佬，他的節目深刻淺出，對初學者大有裨益，對有必定基礎的前端從業者創建知識體系也有必定的幫助。本文整理比較倉促，確定也會存在許多錯誤，只做本人複習之用，不喜勿噴。

1，js數據類型

簡單類型：布爾 字符串 數字 undifined null

複雜類型：object

2，如何判斷數據類型

簡單類型：用typeof判斷，typeof是一元運算符，能夠不跟括號

可是 null和object返回的都是object

3，如何對對象類型進行判斷，尤爲是數組

兩種辦法：constructor和isArray

正確辦法：Object.protoType.tostring.call( arr )

4，數組的方法

push pop shift unshift reverse concat slice splice index filter...

對原數組有影響的：push pop shift unshift reverse sort splice

5，數組如何去重

1-空數組，循環push，indexof()判斷

2-splice，從原數組上進行操做

3-根據對象屬性不能重複的特性

4-對原數組進行排序，而後循環，相鄰的若是重複即刪除

5-最短的去重辦法：[…new Set( arr )]

var arr = [1,2,2,3,4] // 須要去重的數組

var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set轉變成array

console.log(newArr) // [1,2,3,4]
複製代碼

6,僞數組

1-dom選擇器選擇出的節點列表

2-arguments對象

3-jq選擇器選擇出的jq對象

轉換方式：新建數組，將僞數組依次push進去

7,字符串

charAt concat...

8，數字

如何判斷是否 nan，最多見的方式 isNan

可是isNan是用來判斷傳進來的參數可否轉化爲數字的，所以首先要判斷是否爲數字

更好的判斷方式：用===和自身進行判斷，js中只有nan和自身是不全等的

9，布爾

有哪些轉換成

undefine 0 -0 null false "" NAN

空對象和空數組轉換成對象都是true，newBealean(false)爲true

!!將數據快速轉化成布爾類型

10，new作了什麼

1-建立空對象

2，修改this指針，將this指針指向建立的對象

3，運行構造函數中全部的代碼

4，將建立的對象做爲返回值返回

11，new若是沒有參數，能夠不寫括號；若是在構造函數中顯式的返回了非對象，返回的依然是對象，若是顯式地返回了其它對象，則返回其它對象（單例模式瞭解一下）

12，繼承方式

1-原型鏈繼承 對象a,對象b

將b繼承於a，b.prototype=new a()

只能繼承原型對象上的屬性，這些屬性都是共享的，沒法實現多繼承

2-構造函數式繼承

在b中將a的函數所有運行一遍

能夠實現多繼承，可是隻能繼承構造函數裏的屬性

3-組合式繼承，也就是將原型鏈繼承和構造函數式繼承都寫一遍

開發中最多見的，代碼執行兩遍，速度較慢

4-原型式繼承，

5-寄生式繼承

6-組合寄生式繼承（完美繼承）

13，<script></script>標籤

兩個特殊的屬性：defer async

defer延遲執行，同時並行加載多個js，而後按上下順序依次執行

async異步加載，下載後當即執行，不必定按上下順序

1-js中，js代碼會堵塞html css代碼渲染

2,-正常js下載，都是同步依次下載，可是隻要寫了defer或者async都會改成異步下載的方式，aynsc在外部js加載完成以後若是瀏覽器空閒，併發load事件觸發以前執行

defer在js加載完成以後，文檔解析完成以後纔會執行，也就是說，只要寫了defer，即便你把script標籤放在head裏，也相似於放在body最下面

14，promise中then和catch的返回值永遠是一個新的promise實例，若是顯式地返回一個非promise對象，後面的then和catch都會當即執行

15，es6新增

數組方法，from

箭頭函數的變化：沒有arguments對象，this指向也發生了變化

16，js中的事件實現

1-dom嵌入，標籤裏寫onclick

2-事件綁定，得到節點onclick，從html裏轉移到js裏，方便管理

3-事件監聽

瀏覽器兼容性處理：ie是attachEvent和dettachEvent

17，js事件流

捕獲-目標-冒泡

18，target和currentTarget的區別

target是指目標節點

currentTarget當前對象的目標節點

<ul>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    $('ul').on('click','li',function(e){
 
        console.log(e.target)   //  被點擊的元素
        console.log(e.currentTarget)   //  li   
        console.log(e.currentTarget === this)  // true
    })
  </script>
複製代碼

<ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    for(let i=0;i<aLi.length;i++){  
      aLi[i].addEventListener('click',function(e){
        let oLi1 = e.target  
        let oLi2 = e.currentTarget
        console.log(oLi1)  // li
        console.log(oLi2)  // li
        console.og(oLi1===oLi2)  // true
      })
    }
  </script>複製代碼

19，http的狀態碼

1-信息響應

2-成功了

3-服務器重定向響應，主要是爲了知足特定的

4-客戶端錯誤

5-服務端錯誤

20，敲下url後發生了什麼

瀏覽器查ip地址（dns解析，路由緩存，瀏覽器緩存）-瀏覽器發出http請求-服務器重定向響應-瀏覽器跟蹤重定向響應，取得地址-服務器接受請求，返回http響應，包括html等代碼-瀏覽器按照本身的方式進行渲染

21，跨域

jsonp（json padding）是經過建立script標籤實現的

postMessage，最好轉成json字符串發過去