摘要：實際上是一個讓出線程的標志遇到會立即返回一個狀態的。一個簡單的防抖函數如果定時器存在則清除重新開始定時執行缺點只能在最后執行，不能立即被執行，在某些情況下不適用。假設壓入棧的所有數字均不相等。接收數據不受同源政策限制。

盡管秋招還沒有拿到offer（好難過），但是一些知識點還是要總結的，既然自己選了這條路，那就一定要堅定不移的走下去......

function Foo() {
    return this;
}
Foo.getName = function () {
    console.log("1");
};
Foo.prototype.getName = function () {
    console.log("2");
};

new Foo.getName();   // -> 1
new Foo().getName(); // -> 2       

通過這段代碼可以看出：new Foo() 的優先級高于 new Foo.

對于代碼1 來說：是將 Foo.getName 當成一個構造函數來執行，執行構造函數所以輸出為1.

對于代碼2來說：通過 new Foo() 創建了一個Foo的實例，通過實例訪問其原型鏈上的 方法所以輸出為2.

var foo = 1;
 
// 有名立即執行函數
(function foo() {
    foo = 10;
    console.log(foo);
})();

// 執行這段代碼會輸出什么呢？

// -> ? foo() { foo = 10 ; console.log(foo) }

// 再去訪問 foo 的值
foo
// -> 1

當JS執行器遇到非匿名的立即執行函數時，會創建一個輔助的特定對象，然后將函數名稱作為這個對象的屬性，因此行數內部才可以訪問到 foo ,但這個值是只讀的，所以對其重新賦值不會生效，所以打印結果還是這個函數，并且外部的值也沒有發生改變。

可以使用 JSON.stringify 和 JSON.parse 這個兩個方法

優點：簡單

缺點：會忽略掉 undefined ； 不能序列化函數 ； 不能解決循環引用的對象

function clone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

使用遞歸循環賦值的方式

優點：可以處理 undefined、函數等各種情況

缺點：實現相對麻煩，效率不高

function clone(obj) {
    if(!obj || typeof obj !== "object") {
        return;
    }
    var _obj = obj.constructor === Object ? {} : [];
    for(let key in obj) {
        if(typeof obj[key] === "object") {
            _obj[key] = clone(obj[key]);
        } else {
            _obj[key]  = obj[key];
        }
    }
    return _obj;
}

// 或者

function clone(obj) {
    if(!obj || typeof obj !== "object")
        throw new TypeError("params typeError");
    let _obj = obj.constructor === Object ? {} : [];
    Object.getOwnPropertyNames(obj).forEach(name => {
        if(typeof obj[name] === "object") {
            _obj[name] = clone(obj[name]);
        } else {
            _obj[name] = obj[name];
        }
    });
    return _obj;
}

使用內置 MessageChannel 對象

優點：是內置函數中處理深拷貝性能最快的

缺點：不能處理函數（會報錯）

function clone(obj) {
    return new Promise(resolve => {
        let {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
    });    
}

clone(obj).then(console.log);

想解決這個問題，就必須知道 `await` 做了什么？

剛開始以為 await 會一直等待表達執行的執行結果，之后才會執行后面的代碼。實際上 await 是一個讓出線程的標志（遇到 await 會立即返回一個 pending 狀態的promise）。await后面的函數會先執行一遍，然后就會跳出整個 async 函數來執行后面js代碼。等本輪事件循環執行完又跳回到 async 函數中等待await后面表達式的返回值，如果返回值為非 promise 則繼續執行async后面的代碼，否則將 promse 加入隊列。

且看一道面試題（分析代碼執行 順序）：

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");

OK，那接下來具體分析執行過程：

首先輸出 "script start" ，然后立即將定時器加入異步事件隊列。執行 async1() ，輸出 "async1 start" ，進入 async2() ，輸出 "async2" ，跳出整個 async1() 函數來執行后面js代碼，執行promise執行器中的內容，輸出 "promise1" ，執行resolve()回調，將then函數中的內容加入異步事件隊列，接著輸出 "script end" 。回到 async1() 的await等待 async2() 函數的返回值，因為返回值是一個promise實例，將promise加入異步事件隊列。此時的同步代碼執行完畢，輪詢并從隊列拿出代碼放入主線程執行，所以輸出 "promise2" ，繼續執行 async1() 中的后續內容，輸出 "async1 end" ，最后取出定時器中的內容并執行，輸出 "settimeout" 。

綜上所述：

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

那么再看一個例子應該會簡單很多：

function testFunc() {
    console.log("testFunc..."); // 2
    return "testFunc";
}

async function testAsync() {
    console.log("testAsync...");  // 7
    return Promise.resolve("hello testAsync");
}

async function foo() {
    console.log("test start..."); // 1
    const v1 = await testFunc();
    connsole.log("hello world."); // 5
    console.log(v1);              // 6 testFunc
    const v2 = await testAsync();
    console.log(v2);              // 9 hello testAsync
}

foo();

var promise = new Promise(resolve => { 
    console.log("promise start..");  // 3
    resolve("promise"); 
});
promise.then(val => console.log(val)); // 8 promise

console.log("test end..."); // 4

防抖：如果用戶多次調用且間隔小于wait值，那么就會被轉化為一次調用。

節流：多次執行函數轉化為，每隔一定時間（wait）調用函數 。

一個簡單的防抖函數：

function debounce(func, wait) {
    let timer = null;
    return function(...params) {
        // 如果定時器存在則清除
        if(timer){
            clearTimeout(timer);
        }
        // 重新開始定時執行
        timer = setTimeout(() => {
            func.apply(this, params);
        }, wait);
    }
}

缺點：只能在最后執行，不能立即被執行，在某些情況下不適用。

改進...

function debounce(func, wait, immediate) {
    
    let timer, context, args;
    
    // 定時器
    let later = function() {
        return setTimeout(() => {
            timer = null;
            if(!immediate) {
                func.apply(context, args);
            }
        }, wait);
    }
    
    return function(...params) {
        if(!timer) {
            timer = later();
            
            // immediate 為 true，則立即執行
            // 否則 緩存上下文 和 參數
            if(immediate) {
                func.apply(this, params);
            } else {
                context = this;
                args = params;
            }
        } else {
            clearTimeout(timer);
            timer = later();
        }           
    }
}

一個簡單的節流函數：

// 節流函數
// 快速的多次執行，轉化為等待wait時間再去執行
function throttle(func, wait) {
    var timer = null;
    var context = null;
    return function(...args) {
        context = this;
        if(!timer) {
            timer = setTimeout(function() {
                timer = null;
                func.apply(context, args);
            }, wait);
        }
    }
}

// 如果想讓第一次調用立即執行也非常簡單
僅需要將  func.apply(context, args) 提到定時器外邊即可。

節流函數除了可以使用定時器實現以外，當然也可以有其他方式：

// 第一次調用會被立即執行
function throttle(func, wait) {
    var prev = 0;
    var context = null;
    return function(...args) {
        var now = +new Date();
        context = this;
        if(now -prev > wait) {
            func.apply(context,args);
            prev = now;
        }    
    }
}

怎么去模擬一個call函數呢？

思路：call一個非常重要的作用就是改變上下文環境也就是this，我們可以給用戶傳入的上下文對象上添加一個函數，通過這個上下文對象去執行函數，然后將這個函數刪除，返回結果就可以了。

Function.prototype.myCall = function(context, ...args) {
    context = context || window;
    // 給上下文對象上添加這個函數
    context.fn = this;
    // 通過這個上下文對象去執行函數
    let result = context.fn(...args);
    // 將這個函數刪除
    delete  context.fn;
    return result;
}

call既然都實現了，那么apply也是類似的，只不過傳入的參數是一個數組而已。

Function.prototype.myApply = function(context, arr) {
    context = context || window;
    arr = arr || [];
    let type = {}.toString.call(arr).slice(8,-1);
    if(type !== "Array")
        throw new TypeError("CreateListFromArrayLike called on non-object");
    context.fn = this;
    let result = context.fn(...arr);
    delete context.fn;
    return result;
}

模擬bind函數，bind函數應該返回一個新的函數。

Function.prototype.myBind  = function(context, ...args) {        
    // 保存當前的函數
    let func = this;
    return function F(...params) {
        if(this instanceof F) {
            return new func(...args, ...params);
        }
        return func.apply(context,[...args,...params]);
    }    
}

function flattenDeep(arr) {
    if(!Array.isArray(arr))
        return [arr];
    return arr.reduce((prev,cur) => {        
        return [...prev, ...flattenDeep(cur)];
    },[]);
}

flattenDeep([1, [[2], [3, [4]], 5]]);

輸入兩個整數序列，第一個序列表示棧的壓入順序，請判斷第二個序列是否可能為該棧的彈出順序。假設壓入棧的所有數字均不相等。例如序列1,2,3,4,5是某棧的壓入順序，序列4,5,3,2,1是該壓棧序列對應的一個彈出序列，但4,3,5,1,2就不可能是該壓棧序列的彈出序列。

function IsPopOrder(pushV,popV){
    if(pushV.length === 0) return false;
    var stack = []; // 模擬棧
    for(var i = 0, j = 0; i < pushV.length;){
        stack.push(pushV[i]);
        i += 1;
        // 壓入棧的值需要被彈出
        while(j < popV.length && stack[stack.length-1] === popV[j]){
            stack.pop();
            j++;
            if(stack.length === 0) break;
        }
    }
    return stack.length === 0;
}

思路：

對棧A添加數據。

如果棧B為空，循環將棧A中內容彈出放入棧B，并彈出棧B最后一項

如果棧B不為空，則直接彈出棧B的最后一項

var stackA = [];
var stackB = [];

function push(node){
    stackA.push(node);
}
function pop(){
    if(!stackB.length){
        while(stackA.length){
            stackB.push(stackA.pop());
        }
    }
    return stackB.pop();
}

fetch

Fetch API是基于Promise設計的

容易同構（前后端運行同一套代碼）

語法簡潔，更加語義化

原生支持率不高，可以用polyfill兼容IE8+瀏覽器

fetch(url).then(function(response){
    return response.json();
}).then(function(data){
    console.log(data);
}).catch(function(err){
    console.log(err);
});

ajax

設計粗糙，不關注分離原則

基于事件的異步模型，不夠友好

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";

xhr.onload = function(){
    console.log(xhr.response);
}
xhr.onerror = function(){
    console.log("error");
}

xhr.send();

fetch請求默認是不帶cookie的，需要設置 fetch(url, {credentials: "include"})

服務器返回400,500錯誤碼時不會reject，只有網絡錯誤導致不能完成時，才會reject。

IE8, 9 的 XHR 不支持 CORS 跨域。

將一個完整的數組分成兩部分，分別對其排序，然后將兩部分merge在一起即可。

function merge(left, right) {
    var temp = [];
    while(left.length && right.length) {        
        if(left[0] < right[0])
            temp.push(left.shift());
        else
            temp.push(right.shift());        
    }
    return temp.concat(left,right);
}

function mergeSort(arr) {
    if(arr.length === 1)
        return arr;
    var mid = (arr.length/2)|0;
    var left = arr.slice(0,mid);
    var right = arr.slice(mid);    
    return merge(mergeSort(left), mergeSort(right));
}

this 指向固定化，并不是因為箭頭函數內部有綁定 this 的機制，實際原因是箭頭函數沒有自己的 this ，導致內部的this就是外層代碼的 this ，也正是因為沒有 this ，所以箭頭函數不能用作構造函數。

在BFC垂直方向元素邊距會發生重疊

不會與浮動元素的box重合

獨立的容器，里外互不影響

浮動元素參與計算

  var content = document.querySelector(".content");
    // 自定義事件
    var evt = new Event("custom");
    var customEvt = new CustomEvent("customEvt", {
        // 通過這個屬性傳遞參數
        detail: {
            name: "tom",
            age: 12
        }
    });
    content.addEventListener("custom", (e) => {
        console.log("自定義事件被觸發,無參數...");
        console.log(e);
    });
    content.addEventListener("customEvt", (e) => {
        console.log("自定義事件被觸發,有參數...");
        console.log(e);
        console.log(e.detail);
    });
    // 點擊時觸發這個自定義事件
    content.addEventListener("click", (e) => {
        content.dispatchEvent(evt);
        content.dispatchEvent(customEvt);
    });

var foo = 3; // 不在同一個作用域

function hoistVariable() {
    // 內部變量提升導致 foo 的初始值為undefined
    // 所以 foo = 5;
    var foo = foo || 5;
    console.log(foo); // 5
}

hoistVariable();

上邊的比較簡單，看一個函數和變量同名，關于變量提升的小問題。

var a = 6;
function b(){
    console.log(a); // @1
    var a = 4;
    function a(){
        alert(4);
    }
    console.log(a); //@2
}
b();

因為JavaScript中的函數是一等公民，函數聲明的優先級 最高(高于變量提升)，會被提升至當前作用域最頂端，所以在 @1 輸出的是 function a(){alert(4);}

接下來執行 a=4; 這一句，重新對 a 進行賦值。

函數已被提升，所以不考慮，所以在 @2 這里自然會輸出 4 。

如果還不能理解？且看預編譯后的代碼：

var a;
a = 6;
function b(){
    var a; 
    a = function a(){ // 函數先提升
        alert(4);
    }
    console.log(a); // @1
    a = 4;
    console.log(a); // @2    
}
b(); // 結果已經非常明了了

POST對請求參數的長度沒有限制，而GET如果請求參數過長，會被瀏覽器截斷。

GET請求參數會直接暴露在URL上，所以不適合用來傳遞敏感信息。

GET請求可以被瀏覽器主動緩存，而POST請求不可以，除非手動設置。

GET請求在瀏覽器回退時是無害的，而POST會再次提交請求。

GET請求產生的URL可以被瀏覽器緩存，而POST不可以。

1. 前后端如何通信？

ajax

WebSocket

CORS

2. 如何創建ajax?

// 創建xhr對象
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject("Microsoft.XMLHTTP");

// GET 請求
xhr.open("GET",url,true);
xhr.send();

// POST 請求
xhr.open("POST",url,true);
// 表單數據 , 也可以提交json數據，相應的content-Type: application/json
xhr.setRequestHeader("content-Type", "application/x-www-from-urlencoded");
xhr.send(dataArr.join("&"));

xhr.onload = function() {
    if(xhr.status === 200 || xhr.status === 304) {    
        var data = xhr.responseText;
        // 拿到數據
    } else {
        // 出問題了
    }
}

3. 跨域通信的幾種方式？

JSONP：利用 script 標簽的跨域能力，服務返回一個js函數調用，數據作為函數的一個參數來傳遞。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = url; // 跨域地址
document.head.appendChild(script);

//有能耐把我這輩子都安排了，不然少他媽扯淡。
setTimeout(function() {
    document.head.removeChild(script);
    script = null;
});

// 接收數據
function jsonpCallback(data) {
    console.log(data);
}

WebSocket：不受同源政策限制。

var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(e) {
    ws.send("hello...");
}
ws.onmessage = function(e) {
    var data = e.data;
}
ws.onclose = function() {
    console.log("close...");
}

Hash：利用 location.hash 來傳值。 缺點：數據直接暴露在url中，大小、類型都有限制。

1、父窗體可以把信息寫在子窗體的href的hash上，子窗口通過監聽hashchange事件獲取信息。

2、子窗體改變父窗體的hash值，那么就要借助第三個子窗體，第三個子窗體是第二個子窗體的子窗體。（第三個子窗體要與父窗體同源）

3、第二個子窗體把信息設置在第三個子窗體的hash值上，然后第三個子窗體改變父窗體的hash值，從而實現跨域。

// 父窗體
var son = document.getElementByTagName("iframe");
son.src = son.src + "#" + data;

// 子窗體
window.onhashchange = function() {
    var data = window.location.hash;
}

postMessage ：語法：window.postMessage(msg,targetOrigin)

// 窗口A 發送
BWindow.postMessage("發送的數據", "http://B.com");

// 窗口B 接收
window.addEventListener("message", (event) => {
   event.origin: // http://A.com
   event.source; // AWindow
   event.data;   // "發送的數據" 
});

CORS： 跨域資源共享。

fetch(url, {
    method: "get",
    // 頭信息配置
}).then(() => {});

CSRF，跨站請求偽造（Cross-site request forgery）

防御措施：

Token驗證（請求必須攜帶Token）

Referer 驗證（驗證請求的來源是否可信）

XSS（cross-site scripting 跨站腳本攻擊）

原理：注入腳本

防御措施：對用戶的輸入做驗證

1. 什么是DOCTYPE及作用？

用來聲明文檔類型和DTD規范的。

DTD（document type definition）文檔類型定義，是一系列的語法規則，用來聲明XML或(X)HTML的文件類型，瀏覽器會使用它來決定文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。

2. 常見的doctype有哪些？

HTML5

HTML4.01 Strict 嚴格模式 （不包含展示性或棄用的元素）

HTML4.01 Transitional 傳統(寬松)模式（包含展示性或棄用的元素）

提升頁面性能的方式？

資源壓縮合并，減少HTTP請求

非核心代碼異步加載

異步加載方式：

動態腳本加載

defer （HTML解析完順序執行）

async （加載完立即執行）

利用瀏覽器緩存

使用CDN

預解析DNS

前端錯誤分類：代碼（運行）錯誤 資源加載錯誤

錯誤捕獲方式

運行錯誤捕獲：（1）try...catch （2）window.onerror

資源加載錯誤 ：（1）object.onerror(資源錯誤不冒泡) （2）performance.getEntries() （3）Error事件捕獲（在事件流捕獲階段處理錯誤）

跨域js運行錯誤也是可以捕獲的，捕獲的錯誤：script error

上報錯誤原理

利用Image對象上報

// 利用Image標簽上報錯（簡單、不需要借助其他庫）
(new Image()).src = "http://www.baidu.com/test?error=xxx";

function binarySearch(arr,val,leftIndex,rightIndex) {
    if(leftIndex > rightIndex){ return; }
    var midIndex = (leftIndex + rightIndex) / 2 | 0;
    var midVal = arr[midIndex];
    if(val > midVal) {
        return binarySearch(arr,val,midIndex+1,rightIndex);
    }else if(val < midVal) {
        return binarySearch(arr,val,leftIndex,midIndex-1);
    }else{
        return midIndex;
    }
}

在一個字符串中找出連續的不重復的最大長度的字符串，解決這類問題的思路：

利用循環疊加字符串，直到出現重復為止

每一次疊加，記錄下來最大長度的字符串

// 連續最長不重復字符串
function getMaxLenStr(str) {
    var cur = [];
    var maxLenStr = "";
    for(var i = 0; i < str.length; i++) {
        if(!cur.includes(str[i])) {
            cur.push(str[i]);
        } else {
            cur = []; // 置為空
            cur.push(str[i]);
        }
        
        // 存儲最大長度的字符串
        if(maxLenStr.length < cur.length) {
            maxLenStr = cur.join("");
        }        
    }
    return maxLenStr;
}

getMaxLenStr("ababcabcde"); // abcde

和上面這道題有一樣思路的是：求一個數組當中，連續子向量的最大和。

無非是將 對比字符串的長度 改為 對比值大小

function FindGreatestSumOfSubArray(arr) {
    let sum = arr[0];
    let max = arr[0];
    for(let i = 1; i < arr.length; i++) {
        if(sum < 0) {
            sum = arr[i];
        }else{
            sum += arr[i];
        }
        // 記錄最大值
        if(max < sum) {
            max = sum;
        }
    }
    return max;
} 

阿里的一道面試題：給定一個編碼字符，按編碼規則進行解碼，輸出字符串

編碼規則：coount[letter] ，將letter的內容count次輸出，count是0或正整數，letter是區分大小寫的純字母。

實例：

const s= 3[a]2[bc]; decodeString(s); // 返回 ‘aaabcbc’

const s= 3[a2[c]]; decodeString(s); // 返回 ‘accaccacc’

const s= 2[ab]3[cd]ef; decodeString(s); // 返回 ‘ababcdcdcdef’

解題過程...

思路：

使用棧這種數據結構，如果push的內容為‘]’，則循環pop字符，直到碰到’[‘，然后將pop

出來的字符串按規則整理后，重新push進棧中，最后將棧內的內容拼接成字符串輸出即可。

代碼：

const s = "2[a2[c]]ef";
function decodeString(str) {
    let stack = []; // 存儲字符串的棧
    for (let i = 0; i < str.length; i++) {
        let cur = str[i];
        if (cur !== "]") {
            stack.push(cur);
        } else { // 彈出
            let count = 0;
            let loopStr = [];
            let popStr = "";
            while ((popStr = stack.pop()) !== "[") {
                loopStr.unshift(popStr);
            }
            count = stack.pop();
            // 添加結果
            let item = "";
            for (let i = 0; i < count; i++) {
                item += loopStr.join("");
            }
            stack.push(...(item.split("")));
        }
    }
    return stack.join("");
}
console.log(decodeString(s)); // accaccef

元素的移動次數與關鍵字的初始排列次序無關的是：基數排列。

元素的比較次數與初始序列無關是：選擇排序。

算法的時間復雜度與初始序列無關的是：選擇排序。

BOM 即瀏覽器對象模型，BOM沒有相關標準，BOM的核心對象是window對象。

DOM即文檔對象模型，DOM是W3C標準，DOM的最根本對象是document（window.document）, 這個對象實際上是window對象的屬性，這個對象的獨特之處是唯一一個既屬于BOM有屬于DOM的對象。

相同點：

都是建立于tcp連接之上，通過tcp協議來傳輸數據。

不同點：

HTTP是一種單向的協議，即客戶端只能向服務器端請求信息。request永遠等于response，并且這個response是被動的，不能主動發起。一旦有一個任務超時，就會阻塞后續的任務（線頭阻塞）。

HTTP協議是無狀態的，如使用輪詢、long poll都需要將身份鑒別信息上傳。

WebSocket真正的全雙工通信，只需要一次連接，這樣就避免了HTTP的無狀態性，服務器端可以主動推送消息到達客戶端。

二進制分幀

多路復用，這樣就避免了線頭阻塞

服務器端推送，客戶端請求HTML，服務器可以主動推送js、css那些客戶端可能會用到的東西，這樣就避免了重復發送請求

頭壓縮

function unique(arr) {
    let obj = {};
    let ret = [];
    for(let i = 0; i < arr.length; i++) {
        let cur = `${typeof arr[i]}-${arr[i]}`;
        if(!obj[cur]) {
            ret.push(arr[i]);
            obj[cur] = true;
        }
    }        
    return ret;
}

var arr = [1, "1", 3, 3, 4];
unique(arr);
// [1, "1", 3, 4]

function isSame(a, b) {
    if(a === b) return true;
    if(typeof a !== typeof b) return false;
    
    // 如果均為object類型，判斷屬性個數是否相同
    if(typeof a === "object" && typeof b === "object") {
        let aLen = Object.getOwnPropertyNames(a).length;
        let bLen = Object.getOwnPropertyNames(b).length;
        if(aLen !== bLen) return false;
    }
    return Object.getOwnPropertyNames(a).every(key => {
        if(typeof a[key] === "object") {
            return isSame(a[key], b[key]);
        }
        return a[key] === b[key];
    });
}  

后記一波：

付出了總歸是有回報的。

電話面試拿到了百度云事業部實習生的offer。

南京現場面試獲得了上海微盟的offer。

參加北京的面試得到了迅雷的offer。簽約那天剛好是中秋節（2018/9/24），可能是一份最棒的中秋大禮了吧