四、異步

console.log(100)
setTimeout(function(){
     console.log(200)
})
console.log(300)

4.1 同步和異步的區別是什麽？分別舉一個同步和異步的例子。

答：同步會阻塞代碼執行，而異步不會；alert是同步，setTimeout是異步

4.2 一個關於setTimeout的筆試題

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
console.log(3)
setTimeout(function(){
    console.log(4)
},
 
1000)
console.log(5)

打印順序：1，3，5，2，一秒鐘之後打印4

4.3 前端使用異步的場景有哪些？

答：定時任務： setTimeout , setInterval

網絡請求： AJAX請求 ， 動態<img>加載

事件綁定

五、日期和math

知識點：日期

Math: 獲取隨機數Math.random()

數組API：

forEach ：遍歷所有元素

every ： 判斷所有元素是否都符合條件

some ：判斷是否有至少一個元素符合條件

sort ：排序

map ：對元素重新組裝，生成新數組

filter ：過濾符合條件的元素

var arr = [‘a‘,‘b‘,‘c‘,‘d‘]
arr.forEach(function(item,index){
    console.log(index,item)
})

var arr = [1.2.3.4]
var result = arr.every(function(item,index){
    if (item<5) {
        return true
    }
})
console.log(result)

var arr = [1.2.3.4]
 
var result = arr.some(function(item,index){
    if (item<3) {
        return true
    }
})
console.log(result)

var arr = [1.2.3.4]
var arr2 = arr.sort(function(a,b){
    //從小到大排序
    return a-b

    //從大到小排序
    return b-a
})
console.log(arr2)

var arr = [1,2,3,4]
var arr2 = arr.map(function(item,index){
    return ‘<b>‘+item+‘<b>‘
})
console.log(arr2)

var arr = [1,2,3,4]
var arr2 = arr.filter(function(item,index){
if (item<3) {
return true
}
})
console.log(arr2)

5.1 獲取2017-06-10格式的日期

function formatDate(dt){
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth()+1
    var date = dt.getDate()
    if (month < 10) {
        //強制類型轉換
        month = ‘0‘+month
    }
    if (date < 10) {
        date= ‘0‘+date
    }
    return year + ‘-‘+month + ‘-‘+date
}
var dt = new Date()
var formatDate = formatDate(dt)
console.log(formatDate)

5.2 獲取隨機數，要求是長度一致的字符串格式

var random = Math.random()
var random = random + ‘0000000000‘
//後面加上10個0
var random = random.slice(0,10)
console.log(random)

5.3 寫一個能遍歷對象和數組的通用forEach函數

function forEach(obj,fn){
    var key
    if (obj instanceof Array) {
        obj.forEach(function(item,index){
            fn(index,item)
        })
    }else {
        //不是數組就是對象
        for(key in obj){
            fn(key,obj[key])
        }
    }
}
var arr = [1,2,3]
//參數順序換了，為了和對象的遍歷格式一致
forEach(arr,function(item,index){
    console.log(index,item)
})
var obj = {x:100 , y:200}
forEach(obj,function(key,value){
    console.log(key,value)
})

六、JS-WEB-API

6.1 DOM是哪種基本的數據結構？ 樹

6.2 DOM操作的常用API有哪些？

var div1=document.getElementById(‘div1‘)
//添加新節點
var p1 - document.createElement(‘p‘)
p1.innerHTML=‘this is p1‘
//添加新創建的元素
div1.appendChild(p1)
//移動已有節點
var p2 = document.getElementById(‘p2‘)
div1.appendChild(p2)

//獲取父元素和子元素
var div1 = document.getElementById(‘div1‘)
var parent = div1.parentElement
var child = div1.childNodes
div1.removeChild(child[0])

//獲取DOM節點
var div1= document.getElementById(‘div1‘)//元素
var divList = document.getElementsByTagName(‘div‘)//集合
console.log(divList.length)
console.log(divList[0])

var containerList = document.getElementByClassName(‘.container‘)
var pList = document.querySelectorAll(‘p‘) 

6.3 DOM節點的attr和property有何區別？

答： attr是對html標簽屬性的修改

property只是一個JS對象屬性的修改

//property
var div1 = document.getElementById(‘div1‘)
console.log(div1.className)
div1.className=‘abc‘
console.log(div1.className)

//attr
var p1 = document.getElementById(‘p1‘)
console.log(p1.getAttribute(‘data-name‘))
p1.setAttribute(‘data-name‘,‘xyz‘)

6.4 如何檢測瀏覽器的類型

Navigator/screen/location/history

//檢測瀏覽器類型，以chrome為例
//navigator
var ua=navigator.userAgent
var isChrome = ua.indexOf(‘Chrome‘)
console.log(isChrome)

6.5 拆解url的各部分

//screen
console.log(screen.width)
console.log(screen.height)

//location
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.ashpathname)
console.log(location.search)
console.log(location.h)

//history
history.back()
history.forward()

七、AJAX

XMLHttpRequest

狀態碼說明

跨域

可以跨域的三個標簽：<img src=xxx>

<link href=xxx>

<script src=xxx>

7.1 手動編寫一個ajax,不依賴第三方庫。

var rhr = new XMLHttpRequest()
xhr.open("GET","/api",false)
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4) {
        if (xhr.state === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

7.2 跨域的幾種實現方式

答：1.JSONP(JSONP實現原理：比如加載一個網址，但不一定服務器端真的有這樣一個文件，服務器可以根據請求，動態生成一個文件返回

返回內容格式如：callback({x:100,y:200}))

2.服務器端設置http header

7.3 請描述一下cookie,sessionStorage和localStorage的區別？

答：1.cookie ：本身用於客戶端和服務器端通信，但是它有本地存儲的功能，於是就被“借用”

使用document.cookie=.....獲取和修改即可，不過只能存4kb，每次都攜帶到AJAX中，API需要封裝才能使用

2.sessionStorage和localStorage：HTML5專門為存儲而設計，最大容量5M，不會攜帶到AJAXzh中易用，API簡單y

前者會自動清理，後者不會

八、事件

8.1 編寫一個通用的事件監聽函數

function bindEvent(elem,type,selector,fn){
    if (fn==null) {
        fn=selector
        selector=null
    }
    elem.addEventListener(type,function(e){
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target,e)
            }
        }else{
            fn(e)
        }
    })
}

//使用代理
var div1 = document.getElementById(‘div1‘)
bindEvent(div1,‘click‘,‘a‘,function(e){
    console.log(this.innerHTML)
})

//不使用代理
var a = document.getElementById(‘div1‘)
bindEvent(div1,‘click‘,function(e){
    console.log(a.innerHTML)
})

8.2 描述事件冒泡流程

DOM樹形結構，事件冒泡，阻止冒泡，冒泡的應用

8.3 對於一個無限下拉加載圖片的頁面，如何給每個圖片綁定事件

使用代理

九、模塊化

9.1 window.onload和DOMContentLoaded的區別？

window.addEventListener(‘load‘,function(){
    //頁面得全部加載完成才會執行，包括圖片、視頻等
})
document.addEventListener(‘DOMContentLoaded‘,function(){
    //DOM渲染完即可執行，此時圖片、視頻可能還沒加載完
}) 

過程從輸入url到得到html的詳細過程：

1.瀏覽器根據DNS服務器得到域名的IP地址

2.向這個IP的機器發送http請求

3.服務器收到、處理並返回http請求

4.瀏覽器得到返回內容

9.2簡述如何實現一個模塊加載器，實現類似require.js的基本功能。

9.3 http協議知識

（1）瀏覽器先搜索自身的DNS緩存
（2）操作系統搜索自身的DNS緩存（瀏覽器沒有找到緩存或者緩存已經失效）
（3）讀取本地的HOST文件
（4）瀏覽器發起一個DNS的一個系統調用
寬帶運營商服務器查看本身緩存
運營商服務器發起一個叠代DNS解析的請求
運營商服務器把結果返回操作系統內核同時緩存起來
操作系統內核把結果返回瀏覽器
瀏覽器就拿到了www.imooc.com的IP地址

（5）瀏覽器獲得域名對應的IP地址後，發起HTTP“三次握手”
（6）TCP/IP鏈接建立起來後，瀏覽器就可以向服務器發送HTTP請求了
（7）服務器端接受到了這個請求，根據路徑參數，經過後端的一些處理之後，把處理後的結果數據返回給瀏覽器，比如頁面完整的html代碼等返回給瀏覽器
（8）瀏覽器拿到了完整的html代碼後，在解析和渲染這個頁面的時候，裏面的JS,CSS,圖片靜態資源，他們同樣也是一個個http請求，都要經過上面的主要七個步驟。
（9）瀏覽器根據拿到的資源對頁面進行渲染，最終把一個完整的頁面呈現給了用戶。

1.回調：將後續邏輯封裝在回調函數中作為起始函數的參數

2.同步：只有一個端口每次只處理一件事。
異步：同樣只有一個端口，但這個端口只做分配工作，把事件分配個下面的員工，有上千個員工等著幫你處理事情。

3.事件驅動：為了某個事件而註冊的回調函數，但是這個回調函數不是馬上執行，當事件發生的時候才會調用 ，這種函數執行的方式就叫做 事件驅動

9.5 上線和回滾

答：1.上線：將測試完成的代碼提交到git版本庫的master分支

將當前服務器的代碼全部打包並記錄版本號

將master分支的代碼提交覆蓋到線上服務器，生成新版本號

2.回滾：將當前服務器的代碼打包並記錄版本號，備份

將備份的上一個版本號解壓，覆蓋到線上服務器，並生成新的版本號

10.Ajax和Flash

Ajax的優勢：1.可搜索性 2.開放性 3.費用 4.易用性 5.易於開發。

Flash的優勢：1.多媒體處理 2.兼容性 3.矢量圖形 4.客戶端資源調度

Ajax的劣勢：1.它可能破壞瀏覽器的後退功能 2.使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中 ，不過這些都有相關方法解決。

Flash的劣勢：1.二進制格式 2.格式私有 3.flash 文件經常會很大，用戶第一次使用的時候需要忍耐較長的等待時間 4.性能問題

JavaScript 中包含以下 7 個全局函數

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。

以上。

JS常見問題總結二