1. 程式人生 > >JavaScript的一些常見問題

JavaScript的一些常見問題

前端的自我介紹

學習方面、為什麼選擇前端

exp:我是csu_zipple,csu 軟體學院的一名學生。在校主修的是Java以及軟體專案開發的一些課程,但充分利用了課餘時間學習了web前端的知識,擁有不錯的開發能力。在校期間參加了不少大大小小的比賽,並且幫助團隊拿到了不錯的成績。
前端是最貼近使用者的層面,前端的能力就是能夠讓產品從90分進化到100分,甚至更多。我希望能夠通過自己的努力能夠讓更多的使用者喜歡上我們的產品,更希望能夠加入貴公司貢獻自己的一份力量。

陣列物件中的forEach方法和map方法有什麼不同?

map方法返回一個對每一項進行處理後的新陣列,並且不會檢測空物件(會報錯)。而forEach方法是遍歷每一項,不會返回新陣列。

for迴圈中的in會遍歷原型嗎?

會的,並且會遍歷原型鏈上所有的原型屬性,除非屬性設定了不可列舉屬性:enumerable:false,而Object.keys()則不會遍歷原型

js 中如何模擬塊級作用域?

ES6之前js沒有塊級作用域的概念,這意味著在塊語句中定義的變數實際上是在其包含函式中而非語句中建立的。在團隊協作開發的時候,js不會告訴你是不是多次聲明瞭同一變數,這為程式碼的維護帶來了問題。
在ES6中js為我們解決了這個問題:使用letconst識別符號來宣告變數,同時這也意味著沒有了變數提升。
在ES5中,使用匿名函式可以模仿塊級作用域:

  (function
(){ //塊級作用域 })
()

接觸過跨域這個概念嗎?你知道哪些解決跨域的方法?

  • 在IE8中使用XDR物件進行跨域通訊
  • websocket
  • sse
  • comet
    • comet是一種伺服器向頁面推送資料的技術,適合實時資料展示。
    • 實現comet的方式有兩種:http流和長輪詢
    • http流的實現如下:(伺服器保持http連結,週期性的向瀏覽器傳送資料)
  xhr.onreadystatechange=function(){
    var result;
    if(xhr.readystate==3
){ //呼叫回撥 } }

長輪詢:伺服器接收到請求後如果有資料則立即響應請求,如果沒有資料在伺服器端hold住一段時間,這段時間內如果有資料就響應請求。如果沒有則響應請求,讓瀏覽器再請求。這種方式容易產生伺服器瓶頸
短輪詢:短輪詢和長輪詢相反,短輪詢是指伺服器接收到請求之後不管有沒有資料都立即響應。瀏覽器判斷如果是無效資料則等待一段時間後再請求。
兩者的區別在於伺服器如何傳送資料。短輪詢是伺服器立即傳送響應,無論資料是否有效,而長輪詢是等待發送響應。輪詢的優勢是所有瀏覽器都支援。

  • nginx代理
  • jsonp
    • jsonp由兩部分組成回撥函式和資料:js實現jsonp
    • 缺點:jsonp是從其他域載入程式碼執行。如果其他域不安全,很可能在響應中夾帶一些惡意程式碼,而此時除了放棄jsonp呼叫之外別無選擇。
    • 其次要確定jsonp請求是否失敗並不容易,他和影象ping一樣也是隻能傳送get請求。因為兩者的本質都是通過src屬性進行web請求。
  • 影象ping

    • 影象ping是與伺服器進行簡單、單向的跨域通訊的一種方式,請求的資料是通過查詢字串形式傳送的。而相應可以是任何內容,但一般是畫素圖或者204響應。
    • 最常用於跟蹤使用者點選頁面或者動態廣告曝光次數。服務端通過接收點選或者圖片請求在後臺進行統計或其他操作
    • 缺點:只能傳送get請求,並且無法訪問伺服器的響應文字。這也解釋了為什麼影象ping是單向的跨域通訊。

    204代表響應報文中包含若干首部和一個狀態行,但是沒有實體的主體內容

  • h5中的postmessage

  • ES6中的generator函數了解過嗎?

    參考連結

    React的生命週期函式?哪一個生命週期函式會返回boolean值

    • componentWillMount 在渲染前呼叫,在客戶端也在服務端。
    • componentDidMount : 在第一次渲染後呼叫,只在客戶端。之後元件已經生成了對應的DOM結構,可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用,可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止異部操作阻塞UI)。
    • componentWillReceiveProps 在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。
    • shouldComponentUpdate 返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫。 可以在你確認不需要更新元件時使用。
    • componentWillUpdate在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。
    • componentDidUpdate 在元件完成更新後立即呼叫。在初始化時不會被呼叫。
    • componentWillUnmount在元件從 DOM 中移除的時候立刻被呼叫。

    react呼叫setState之後發生了什麼?

    參考連結
    當呼叫 setState 時,React會做的第一件事情是將傳遞給 setState 的物件合併到元件的當前狀態。這將啟動一個稱為和解(reconciliation)的過程。和解(reconciliation)的最終目標是以最有效的方式,根據這個新的狀態來更新UI。 為此,React將構建一個新的 React 元素樹(您可以將其視為 UI 的物件表示)。

    一旦有了這個樹,為了弄清 UI 如何響應新的狀態而改變,React 會將這個新樹與上一個元素樹相比較( diff )。

    通過這樣做, React 將會知道發生的確切變化,並且通過了解發生什麼變化,只需在絕對必要的情況下進行更新即可最小化 UI 的佔用空間。

    react元件間通訊的方式?

    元件之間的通訊方式主要可以分成這幾類:

    • 父子元件之間相互通訊
      • 父子間通訊的方法很簡單,父親給兒子傳遞資訊通過props。兒子給父親傳遞訊息通過父元件的回撥函式,呼叫setState方法使重新渲染達到通訊的目的。
    • 同級元件之間相互通訊
      • 同級元件之間通常是將資訊流預定義在共同父元件之間,讓這個父元件達到一箇中間件的效果來完成通訊。
    • 無巢狀元件之間通訊
      • 無巢狀元件之間可以通過自定義事件,也就是釋出-訂閱模式來觸發相對應的方法,達到通訊的目的。
        也可以使用redux統一管理元件的state,實現資料的雙向流動。

    redux可以分成哪些模組?

    action、reducer、store?

    react的router

    參考連結傳送門