JS常見問題總結二

時間 2019-12-14

原文原文鏈接

4、異步

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

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

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

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>加載git

事件綁定ajax

5、日期和math

知識點：日期chrome

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

數組API：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)
})

6、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()

7、AJAX

XMLHttpRequest

狀態碼說明

跨域

能夠跨域的三個標籤：<img 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、事件

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、模塊化

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.事件驅動：爲了某個事件而註冊的回調函數，可是這個回調函數不是立刻執行，當事件發生的時候纔會調用，這種函數執行的方式就叫作事件驅動