noah的前端面試題（三）｜掘金技術徵文

上一篇 前端面試題（二）

1.JavaScript對於cookie的讀、寫操做

寫入 cookie

function setCookie(cName, cValue, days) {   
 var expires = new Date();    
 expires.setTime(expires.getTime() + parseInt(days) * 24 * 60 * 60 * 1000);    
 document.cookie = cName + "=" + escape(cValue) + ";expires=" +       expires.toGMTString()+";path=/;domain=xxx.cn"; 
 };複製代碼

• expires: cookie的過時時間，注意這裏要使用格林威治時間
• path: 這個參數表示cookie保存的路徑，若是沒有給出的話會保存爲當前站點的，若是給出值」/「的話會保存到當前虛擬目錄
• domain: 這個參數有點相似於session的保存路徑，默認狀況下保存在當前客戶端,也能夠自定義到其餘位置

讀取cookie

function getCookie(name){     
 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));   
 if(arr != null)   return decodeURI(arr[2]); 
 return null;  
}複製代碼

分享一片關於cookie的文章  http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html

2.setTimeout promise 和 await sync執行順序

async function async1() {
console.log("async1 start");
await  async2();
 console.log("async1 end");
}
async  function async2() {
 console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
 console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
 console.log("promise1");
 resolve();
}).then(function () {
 console.log("promise2");
});
console.log('script end'); 複製代碼

結果是：

script start async1 start async2 promise1 script end async1 end promise2 settimeout  

這裏涉及到同步異步 Microtasks Macrotasks Microtasks優先級別高於Macrotasks  其中Microtasks Macrotasks分別是

microtasks:

• process.nextTick
• promise
• Object.observe
• MutationObserver

macrotasks:

• setTimeout
• setInterval
• setImmediate
• I/O
• UI渲染

1. 一個事件循環(event loop)會有一個或多個任務隊列(task queue)
   
2. task queue 就是 macrotask queue
   
3. 每個 event loop 都有一個 microtask queue
   
4. task queue == macrotask queue != microtask queue
   
5. 一個任務 task 能夠放入 macrotask queue 也能夠放入 microtask queue 中

所以事件循環的順序，決定了JavaScript代碼的執行順序。它從script(總體代碼)開始第一次循環。以後全局上下文進入函數調用棧。直到調用棧清空(只剩全局)，而後執行全部的micro-task。當全部可執行的micro-task執行完畢以後。循環再次從macro-task開始，找到其中一個任務隊列執行完畢，而後再執行全部的micro-task，這樣一直循環下去。

3. 關於Vue.nextTick()的正確使用 何時須要用的Vue.nextTick()

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

1. 你在Vue生命週期的created()鉤子函數進行的DOM操做必定要放在Vue.nextTick()的回調函數中。緣由是什麼呢，緣由是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操做無異於徒勞，因此此處必定要將DOM操做的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，由於該鉤子函數執行時全部的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操做都不會有問題 。

2. 在數據變化後要執行的某個操做，而這個操做須要使用隨數據改變而改變的DOM結構的時候，這個操做都應該放進Vue.nextTick()的回調函數中。

4. 關於數組排序 任意數值相同的數組混亂排序可是每次排出的順序都是同樣的 好比是【1，3，5，6】或者 【6，5，3，1】排除順序之後是 【3，6，1，5】

用數組sort方法

5. es5 和 es6 class 有什麼區別 

用ES6定義class中的方法，定義在原型對象上的。與ES5不一樣的是，這些定義在原型對象的方法是不可枚舉的。

ES6類和模塊是嚴格模式下的；

不存在變量提高，保證子類父類的順序；

子類必須在父類的構造函數中調用super()，這樣纔有this對象，由於this對象是從父類繼承下來的。而要在子類中調用父類的方法，用super關鍵詞可指代父類。

ES5中類繼承的關係是相反的，先有子類的this，而後用父類的方法應用在this上。

ES6類繼承子類的this是從父類繼承下來的這個特性，使得在ES6中能夠構造原生數據結構的子類，這是ES5沒法作到的。

ES6也能夠定義類的靜態方法和靜態屬性，靜態的意思是這些不會被實例繼承，不須要實例化類，就能夠直接拿來用。ES6中class內部只能定義方法，不能定義屬性。在方法名前加上static就表示這個方式是靜態方法，而屬性仍是按照ES5的方式來實現。

7. es6 class內部箭頭函數寫法和普通函數寫法有什麼不一樣

class Person { 
 Run() {    //傳統形式的函數寫法  this; } 
 eat = () => {    //es6中的箭頭函數寫法  this; }     
}   複製代碼

編譯以後的結果以下

var Person = (function () {
    function Person() {
        var _this = this;
        this.eat = function () {    //箭頭寫法直接掛到Person的this下
            _this;        
        };   
     }   
    Person.prototype.Run = function () {    //傳統寫法則掛到prototype中定義       
     this;
    };       
    return Person;
 }());  複製代碼

這裏不只展現了在方法的定義，還比較了在ES6中傳統函數和箭頭函數的區別，傳統函數的this和es5函數的this指向徹底同樣，但箭頭函數的this指向的是它外層對象的做用域，這裏不細說，想了解請點擊

7.vue.js中的事件修飾符.self的用法

.self能夠理解爲跳過冒泡事件和捕獲事件，只有直接做用在該元素上的事件才能夠執行。

8. pwa 緩存策略

Service Worker 是一段腳本，與 Web Worker 同樣，也是在後臺運行。做爲一個獨立的線程，運行環境與普通腳本不一樣，因此不能直接參與 Web 交互行爲。Native App 能夠作到離線使用、消息推送、後臺自動更新，Service Worker 的出現是正是爲了使得 Web App 也能夠具備相似的能力。詳情連接

9. 混合開發中如何native的token

10. Vue 中如何使用 MutationObserver 作批量處理？

如今 Vue 的 nextTick 實現移除了 MutationObserver 的方式（兼容性緣由），取而代之的是使用 MessageChannel。至於 MutationObserver 如何模擬 nextTick 這點，直接看源碼，其實就是建立一個 TextNode 並監聽內容變化