5.可遍曆數據結構的有什麼特點？

一個對象如果要具備可被 for...of 循環調用的 Iterator 介面，就必須在其 Symbol.iterator 的屬性上部署遍歷器生成方法(或者原型鏈上的對象具有該方法)

PS: 遍歷器對象根本特徵就是具有next方法。每次調用next方法，都會返回一個代表當前成員的信息對象，具有value和done兩個屬性。

//如為對象添加Iterator 介面;
let obj = {
name: "Yvette",
age: 18,
job: engineer,
[Symbol.iterator]() {
const self = this;
const keys = Object.keys(self);
let index = 0;
return {
next() {
if (index < keys.length) {
return {
value: self[keys[index++]],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};

for(let item of obj) {
console.log(item); //Yvette 18 engineer
}

使用 Generator 函數(遍歷器對象生成函數)簡寫 Symbol.iterator 方法，可以簡寫如下:

let obj = {
name: "Yvette",
age: 18,
job: engineer,
* [Symbol.iterator] () {
const self = this;
const keys = Object.keys(self);
for (let index = 0;index < keys.length; index++) {
yield self[keys[index]];//yield表達式僅能使用在 Generator 函數中
}
}
};


原生具備 Iterator 介面的數據結構如下。

• Array
• Map
• Set
• String
• TypedArray
• 函數的 arguments 對象
• NodeList 對象
• ES6 的數組、Set、Map 都部署了以下三個方法: entries() / keys() / values()，調用後都返回遍歷器對象。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：可遍曆數據結構的有什麼特點？

6.requestAnimationFrame 和 setTimeout/setInterval 有什麼區別？使用 requestAnimationFrame 有哪些好處？

在 requestAnimationFrame 之前，我們主要使用 setTimeout/setInterval 來編寫JS動畫。

編寫動畫的關鍵是循環間隔的設置，一方面，循環間隔足夠短，動畫效果才能顯得平滑流暢；另一方面，循環間隔還要足夠長，才能確保瀏覽器有能力渲染產生的變化。

大部分的電腦顯示器的刷新頻率是60HZ，也就是每秒鐘重繪60次。大多數瀏覽器都會對重繪操作加以限制，不超過顯示器的重繪頻率，因為即使超過那個頻率用戶體驗也不會提升。因此，最平滑動畫的最佳循環間隔是 1000ms / 60 ，約為16.7ms。

setTimeout/setInterval 有一個顯著的缺陷在於時間是不精確的，setTimeout/setInterval 只能保證延時或間隔不小於設定的時間。因為它們實際上只是把任務添加到了任務隊列中，但是如果前面的任務還沒有執行完成，它們必須要等待。

requestAnimationFrame 才有的是系統時間間隔，保持最佳繪製效率，不會因為間隔時間過短，造成過度繪製，增加開銷；也不會因為間隔時間太長，使用動畫卡頓不流暢，讓各種網頁動畫效果能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。

綜上所述，requestAnimationFrame 和 setTimeout/setInterval 在編寫動畫時相比，優點如下:

1.requestAnimationFrame 不需要設置時間，採用系統時間間隔，能達到最佳的動畫效果。

2.requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或迴流中就完成。

3.當 requestAnimationFrame() 運行在後台標籤頁或者隱藏的 <iframe> 里時，requestAnimationFrame() 會被暫停調用以提升性能和電池壽命（大多數瀏覽器中）。

requestAnimationFrame 使用(試試使用requestAnimationFrame寫一個移動的小球，從A移動到B初):

function step(timestamp) {
//code...
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);


如果你有更好的答案或想法，歡迎在這題目對應的github下留言：requestAnimationFrame 和 setTimeout/setInterval 有什麼區別？使用 requestAnimationFrame 有哪些好處？

7.JS 類型轉換的規則是什麼？

類型轉換的規則三言兩語說不清，真想哇得一聲哭出來~

JS中類型轉換分為 強制類型轉換 和 隱式類型轉換 。

• 通過 Number()、parseInt()、parseFloat()、toString()、String()、Boolean(),進行強制類型轉換。
• 邏輯運算符(&&、 ||、 !)、運算符(+、-、*、/)、關係操作符(>、 <、 <= 、>=)、相等運算符(==)或者 if/while 的條件，可能會進行隱式類型轉換。

強制類型轉換

1.Number() 將任意類型的參數轉換為數值類型

規則如下:

• 如果是布爾值，true和false分別被轉換為1和0
• 如果是數字，返回自身
• 如果是 null，返回 0
• 如果是 undefined，返回 NAN
• 如果是字元串，遵循以下規則:1. 如果字元串中只包含數字(或者是 `0X` / `0x` 開頭的十六進位數字字元串，允許包含正負號)，則將其轉換為十進位 2. 如果字元串中包含有效的浮點格式，將其轉換為浮點數值 3. 如果是空字元串，將其轉換為0 4. 如不是以上格式的字元串，均返回 `NaN`
• 如果是Symbol，拋出錯誤
• 如果是對象，則調用對象的 valueOf() 方法，然後依據前面的規則轉換返回的值。如果轉換的結果是 NaN ，則調用對象的 toString() 方法，再次依照前面的規則轉換返回的字元串值。

部分內置對象調用默認的 valueOf 的行為:

對象返回值Array數組本身（對象類型）Boolean布爾值（原始類型）Date從 UTC 1970 年 1 月 1 日午夜開始計算，到所封裝的日期所經過的毫秒數Function函數本身（對象類型）Number數字值（原始類型）Object對象本身（對象類型）String字元串值（原始類型）

Number(0111); //111
Number(0X11) //17
Number(null); //0
Number(); //0
Number(1a); //NaN
Number(-0X11);//-17


2.parseInt(param, radix)

如果第一個參數傳入的是字元串類型:

1. 忽略字元串前面的空格，直至找到第一個非空字元，如果是空字元串，返回NaN
2. 如果第一個字元不是數字元號或者正負號，返回NaN
3. 如果第一個字元是數字/正負號，則繼續解析直至字元串解析完畢或者遇到一個非數字元號為止

如果第一個參數傳入的Number類型:

1. 數字如果是0開頭，則將其當作八進位來解析(如果是一個八進位數)；如果以0x開頭，則將其當作十六進位來解析

如果第一個參數是 null 或者是 undefined，或者是一個對象類型：

1. 返回 NaN

如果第一個參數是數組：

1. 去數組的第一個元素，按照上面的規則進行解析

如果第一個參數是Symbol類型：

1. 拋出錯誤

如果指定radix參數，以radix為基數進行解析

parseInt(0111); //111
parseInt(0111); //八進位數 73
parseInt();//NaN
parseInt(0X11); //17
parseInt(1a) //1
parseInt(a1); //NaN
parseInt([10aa,aaa]);//10

parseInt([]);//NaN; parseInt(undefined);


parseFloat

規則和parseInt基本相同，接受一個Number類型或字元串，如果是字元串中，那麼只有第一個小數點是有效的。

toString()

規則如下:

• 如果是Number類型，輸出數字字元串
• 如果是 null 或者是 undefined，拋錯
• 如果是數組，那麼將數組展開輸出。空數組，返回
• 如果是對象，返回 [object Object]
• 如果是Date, 返回日期的文字表示法
• 如果是函數，輸出對應的字元串(如下demo)
• 如果是Symbol，輸出Symbol字元串

let arry = [];
let obj = {a:1};
let sym = Symbol(100);
let date = new Date();
let fn = function() {console.log(穩住，我們能贏！)}
let str = hello world;
console.log([].toString()); //
console.log([1, 2, 3, undefined, 5, 6].toString());//1,2,3,,5,6
console.log(arry.toString()); // 1,2,3
console.log(obj.toString()); // [object Object]
console.log(date.toString()); // Sun Apr 21 2019 16:11:39 GMT+0800 (CST)
console.log(fn.toString());// function () {console.log(穩住，我們能贏！)}
console.log(str.toString());// hello world
console.log(sym.toString());// Symbol(100)
console.log(undefined.toString());// 拋錯
console.log(null.toString());// 拋錯


String()

String() 的轉換規則與 toString() 基本一致，最大的一點不同在於 null 和 undefined，使用 String 進行轉換，null 和 undefined對應的是字元串 null 和 undefined

Boolean

除了 undefined、 null、 false、 、 0(包括 +0，-0)、 NaN 轉換出來是false，其它都是true.

隱式類型轉換

&& 、|| 、 ! 、 if/while 的條件判斷

需要將數據轉換成 Boolean 類型，轉換規則同 Boolean 強制類型轉換

運算符: + - * /

+ 號操作符，不僅可以用作數字相加，還可以用作字元串拼接。

僅當 + 號兩邊都是數字時，進行的是加法運算。如果兩邊都是字元串，直接拼接，無需進行隱式類型轉換。

除了上面的情況外，如果操作數是對象、數值或者布爾值，則調用toString()方法取得字元串值(toString轉換規則)。對於 undefined 和 null，分別調用String()顯式轉換為字元串，然後再進行拼接。

console.log({}+10); //[object Object]10
console.log([1, 2, 3, undefined, 5, 6] + 10);//1,2,3,,5,610


-、*、/ 操作符針對的是運算，如果操作值之一不是數值，則被隱式調用Number()函數進行轉換。如果其中有一個轉換除了為NaN，結果為NaN.

關係操作符: ==、>、< 、<=、>=

> , < ，<= ，>=

1. 如果兩個操作值都是數值，則進行數值比較
2. 如果兩個操作值都是字元串，則比較字元串對應的字元編碼值
3. 如果有一方是Symbol類型，拋出錯誤
4. 除了上述情況之外，都進行Number()進行類型轉換，然後再進行比較。

註： NaN是非常特殊的值，它不和任何類型的值相等，包括它自己，同時它與任何類型的值比較大小時都返回false。

console.log(10 > {});//返回false.
/**
*{}.valueOf ---> {}
*{}.toString() ---> [object Object] ---> NaN
*NaN 和 任何類型比大小，都返回 false
*/


相等操作符：==

1. 如果類型相同，無需進行類型轉換。
2. 如果其中一個操作值是 null 或者是 undefined，那麼另一個操作符必須為 null 或者 undefined 時，才返回 true，否則都返回 false.
3. 如果其中一個是 Symbol 類型，那麼返回 false.
4. 兩個操作值是否為 string 和 number，就會將字元串轉換為 number
5. 如果一個操作值是 boolean，那麼轉換成 number
6. 如果一個操作值為 object 且另一方為 string、number 或者 symbol，是的話就會把 object 轉為原始類型再進行判斷(調用object的valueOf/toString方法進行轉換)

對象如何轉換成原始數據類型

如果部署了 [Symbol.toPrimitive] 介面，那麼調用此介面，若返回的不是基礎數據類型，拋出錯誤。

如果沒有部署 [Symbol.toPrimitive] 介面，那麼先返回 valueOf() 的值，若返回的不是基礎類型的值，再返回 toString() 的值，若返回的不是基礎類型的值， 則拋出異常。

//先調用 valueOf, 後調用 toString
let obj = {
[Symbol.toPrimitive]() {
return 200;
},
valueOf() {
return 300;
},
toString() {
return Hello;
}
}
//如果 valueOf 返回的不是基本數據類型，則會調用 toString，
//如果 toString 返回的也不是基本數據類型，會拋出錯誤
console.log(obj + 200); //400


如果你有更好的答案或想法，歡迎在這題目對應的github下留言：JS 類型轉換的規則是什麼？

---

8.簡述下對 webWorker 的理解？

HTML5則提出了 Web Worker 標準，表示js允許多線程，但是子線程完全受主線程式控制制並且不能操作dom，只有主線程可以操作dom，所以js本質上依然是單線程語言。

web worker就是在js單線程執行的基礎上開啟一個子線程，進行程序處理，而不影響主線程的執行，當子線程執行完之後再回到主線程上，在這個過程中不影響主線程的執行。子線程與主線程之間提供了數據交互的介面postMessage和onmessage，來進行數據發送和接收。

var worker = new Worker(./worker.js); //創建一個子線程
worker.postMessage(Hello);
worker.onmessage = function (e) {
console.log(e.data); //Hi
worker.terminate(); //結束線程
};
//worker.js
onmessage = function (e) {
console.log(e.data); //Hello
postMessage("Hi"); //向主進程發送消息
};


僅是最簡示例代碼，項目中通常是將一些耗時較長的代碼，放在子線程中運行。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：簡述下對 webWorker 的理解

---

9.ES6模塊和CommonJS模塊的差異？

1. ES6模塊在編譯時，就能確定模塊的依賴關係，以及輸入和輸出的變數。CommonJS 模塊，運行時載入。
2. ES6 模塊自動採用嚴格模式，無論模塊頭部是否寫了 "use strict";
3. require 可以做動態載入，import 語句做不到，import 語句必須位於頂層作用域中。
4. ES6 模塊中頂層的 this 指向 undefined，ommonJS 模塊的頂層 this 指向當前模塊。
5. CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。如：

//name.js
var name = William;
setTimeout(() => name = Yvette, 200);
module.exports = {
name
};
//index.js
const name = require(./name);
console.log(name); //William
setTimeout(() => console.log(name), 300); //William


對比 ES6 模塊看一下:

ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態分析的時候，遇到模塊載入命令 import ，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被載入的那個模塊裡面去取值。

//name.js
var name = William;
setTimeout(() => name = Yvette, 200);
export { name };
//index.js
import { name } from ./name;
console.log(name); //William
setTimeout(() => console.log(name), 300); //Yvette


如果你有更好的答案或想法，歡迎在這題目對應的github下留言：ES6模塊和CommonJS模塊的差異？

---

10.瀏覽器事件代理機制的原理是什麼？

在說瀏覽器事件代理機制原理之前，我們首先了解一下事件流的概念，早期瀏覽器，IE採用的是事件捕獲事件流，而Netscape採用的則是事件捕獲。"DOM2級事件"把事件流分為三個階段，捕獲階段、目標階段、冒泡階段。現代瀏覽器也都遵循此規範。

那麼事件代理是什麼呢？

事件代理又稱為事件委託，在祖先級DOM元素綁定一個事件，當觸發子孫級DOM元素的事件時，利用事件冒泡的原理來觸發綁定在祖先級DOM的事件。因為事件會從目標元素一層層冒泡至document對象。

為什麼要事件代理？

1. 添加到頁面上的事件數量會影響頁面的運行性能，如果添加的事件過多，會導致網頁的性能下降。採用事件代理的方式，可以大大減少註冊事件的個數。
2. 事件代理的當時，某個子孫元素是動態增加的，不需要再次對其進行事件綁定。
3. 不用擔心某個註冊了事件的DOM元素被移除後，可能無法回收其事件處理程序，我們只要把事件處理程序委託給更高層級的元素，就可以避免此問題。

如將頁面中的所有click事件都代理到document上:

addEventListener 接受3個參數，分別是要處理的事件名、處理事件程序的函數和一個布爾值。布爾值默認為false。表示冒泡階段調用事件處理程序，若設置為true，表示在捕獲階段調用事件處理程序。

document.addEventListener(click, function (e) {
console.log(e.target);
/**
* 捕獲階段調用調用事件處理程序，eventPhase是 1;
* 處於目標，eventPhase是2
* 冒泡階段調用事件處理程序，eventPhase是 1；
*/
console.log(e.eventPhase);

});

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：瀏覽器事件代理機制的原理是什麼？

---

11.js如何自定義事件？

自定義 DOM 事件(不考慮IE9之前版本)

自定義事件有三種方法,一種是使用 new Event(), 另一種是 createEvent(CustomEvent) , 另一種是 new customEvent()

1. 使用 new Event()

獲取不到 event.detail

let btn = document.querySelector(#btn);
let ev = new Event(alert, {
bubbles: true, //事件是否冒泡;默認值false
cancelable: true, //事件能否被取消;默認值false
composed: false
});
btn.addEventListener(alert, function (event) {
console.log(event.bubbles); //true
console.log(event.cancelable); //true
console.log(event.detail); //undefined
}, false);
btn.dispatchEvent(ev);


1. 使用 createEvent(CustomEvent) (DOM3)

要創建自定義事件，可以調用 createEvent(CustomEvent)，返回的對象有 initCustomEvent 方法，接受以下四個參數:

• type: 字元串，表示觸發的事件類型，如此處的alert
• bubbles: 布爾值： 表示事件是否冒泡
• cancelable: 布爾值，表示事件是否可以取消
• detail: 任意值，保存在 event 對象的 detail 屬性中

let btn = document.querySelector(#btn);
let ev = btn.createEvent(CustomEvent);
ev.initCustomEvent(alert, true, true, button);
btn.addEventListener(alert, function (event) {
console.log(event.bubbles); //true
console.log(event.cancelable);//true
console.log(event.detail); //button
}, false);
btn.dispatchEvent(ev);


1. 使用 new customEvent() (DOM4)

使用起來比 createEvent(CustomEvent) 更加方便

var btn = document.querySelector(#btn);
/*
* 第一個參數是事件類型
* 第二個參數是一個對象
*/
var ev = new CustomEvent(alert, {
bubbles: true,
cancelable: true,
detail: button
});
btn.addEventListener(alert, function (event) {
console.log(event.bubbles); //true
console.log(event.cancelable);//true
console.log(event.detail); //button
}, false);
btn.dispatchEvent(ev);


自定義非 DOM 事件(觀察者模式)

EventTarget類型有一個單獨的屬性handlers，用於存儲事件處理程序（觀察者）。

addHandler() 用於註冊給定類型事件的事件處理程序；

fire() 用於觸發一個事件；

removeHandler() 用於註銷某個事件類型的事件處理程序。

function EventTarget(){
this.handlers = {};
}

EventTarget.prototype = {
constructor:EventTarget,
addHandler:function(type,handler){
if(typeof this.handlers[type] === "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire:function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
const handlers = this.handlers[event.type];
handlers.forEach((handler)=>{
handler(event);
});
}
},
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
const handlers = this.handlers[type];
for(var i = 0,len = handlers.length; i < len; i++){
if(handlers[i] === handler){
break;
}
}
handlers.splice(i,1);
}
}
}
//使用
function handleMessage(event){
console.log(event.message);
}
//創建一個新對象
var target = new EventTarget();
//添加一個事件處理程序
target.addHandler("message", handleMessage);
//觸發事件
target.fire({type:"message", message:"Hi"}); //Hi
//刪除事件處理程序
target.removeHandler("message",handleMessage);
//再次觸發事件，沒有事件處理程序
target.fire({type:"message",message: "Hi"});

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：js如何自定義事件？

---

12.跨域的方法有哪些？原理是什麼？

知其然知其所以然，在說跨域方法之前，我們先了解下什麼叫跨域，瀏覽器有同源策略，只有當「協議」、「域名」、「埠號」都相同時，才能稱之為是同源，其中有一個不同，即是跨域。

那麼同源策略的作用是什麼呢？同源策略限制了從同一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

那麼我們又為什麼需要跨域呢？一是前端和伺服器分開部署，介面請求需要跨域，二是我們可能會載入其它網站的頁面作為iframe內嵌。

跨域的方法有哪些？常用的跨域方法

1. jsonp

儘管瀏覽器有同源策略，但是 <script> 標籤的 src 屬性不會被同源策略所約束，可以獲取任意伺服器上的腳本並執行。jsonp 通過插入script標籤的方式來實現跨域，參數只能通過url傳入，僅能支持get請求。

實現原理:

Step1: 創建 callback 方法

Step2: 插入 script 標籤

Step3: 後台接受到請求，解析前端傳過去的 callback 方法，返回該方法的調用，並且數據作為參數傳入該方法

Step4: 前端執行服務端返回的方法調用

下面代碼僅為說明 jsonp 原理，項目中請使用成熟的庫。分別看一下前端和服務端的簡單實現：

//前端代碼
function jsonp({url, params, cb}) {
return new Promise((resolve, reject) => {
//創建script標籤
let script = document.createElement(script);
//將回調函數掛在 window 上
window[cb] = function(data) {
resolve(data);
//代碼執行後，刪除插入的script標籤
document.body.removeChild(script);
}
//回調函數加在請求地址上
params = {...params, cb} //wb=b&cb=show
let arrs = [];
for(let key in params) {
arrs.push(`${key}=${params[key]}`);
}
script.src = `${url}?${arrs.join(&)}`;
document.body.appendChild(script);
});
}
//使用
function sayHi(data) {
console.log(data);
}
jsonp({
url: http://localhost:3000/say,
params: {
//code
},
cb: sayHi
}).then(data => {
console.log(data);
});
//express啟動一個後台服務
let express = require(express);
let app = express();

app.get(/say, (req, res) => {
let {cb} = req.query; //獲取傳來的callback函數名，cb是key
res.send(`${cb}(Hello!)`);
});
app.listen(3000);

從今天起，jsonp的原理就要瞭然於心啦~

1. cors

jsonp 只能支持 get 請求，cors 可以支持多種請求。cors 並不需要前端做什麼工作。

簡單跨域請求:

只要伺服器設置的Access-Control-Allow-Origin Header和請求來源匹配，瀏覽器就允許跨域

1) 請求的方法是get，head或者post。

2) Content-Type是application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一個值，或者不設置也可以，一般默認就是application/x-www-form-urlencoded。3) 請求中沒有自定義的HTTP頭部，如x-token。(應該是這幾種頭部 Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type）

//簡單跨域請求
app.use((req, res, next) => {
res.setHeader(Access-Control-Allow-Origin, XXXX);
});


帶預檢(Preflighted)的跨域請求

不滿於簡單跨域請求的，即是帶預檢的跨域請求。服務端需要設置 Access-Control-Allow-Origin (允許跨域資源請求的域) 、 Access-Control-Allow-Methods (允許的請求方法) 和 Access-Control-Allow-Headers (允許的請求頭)

app.use((req, res, next) => {
res.setHeader(Access-Control-Allow-Origin, XXX);
res.setHeader(Access-Control-Allow-Headers, XXX); //允許返回的頭
res.setHeader(Access-Control-Allow-Methods, XXX);//允許使用put方法請求介面
res.setHeader(Access-Control-Max-Age, 6); //預檢的存活時間
if(req.method === "OPTIONS") {
res.end(); //如果method是OPTIONS，不做處理
}
});


更多CORS的知識可以訪問: [HTTP訪問控制（CORS）

](https://developer.mozilla.org...

1. nginx 反向代理

使用nginx反向代理實現跨域，只需要修改nginx的配置即可解決跨域問題。

A網站向B網站請求某個介面時，向B網站發送一個請求，nginx根據配置文件接收這個請求，代替A網站向B網站來請求。

nginx拿到這個資源後再返回給A網站，以此來解決了跨域問題。

例如nginx的埠號為 8090，需要請求的伺服器埠號為 3000。（localhost:8090 請求 localhost:3000/say）

nginx配置如下:

server {
listen 8090;

server_name localhost;

location / {
root /Users/liuyan35/Test/Study/CORS/1-jsonp;
index index.html index.htm;
}
location /say {
rewrite ^/say/(.*)$ /$1 break;
proxy_pass http://localhost:3000;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
}
# others
}

1. websocket

Websocket 是 HTML5 的一個持久化的協議，它實現了瀏覽器與伺服器的全雙工通信，同時也是跨域的一種解決方案。

Websocket 不受同源策略影響，只要伺服器端支持，無需任何配置就支持跨域。

前端頁面在 8080 的埠。

let socket = new WebSocket(ws://localhost:3000); //協議是ws
socket.onopen = function() {
socket.send(Hi,你好);
}
socket.onmessage = function(e) {
console.log(e.data)
}


服務端 3000埠。可以看出websocket無需做跨域配置。

let WebSocket = require(ws);
let wss = new WebSocket.Server({port: 3000});
wss.on(connection, function(ws) {
ws.on(message, function(data) {
console.log(data); //接受到頁面發來的消息Hi,你好
ws.send(Hi); //向頁面發送消息
});
});


1. postMessage

postMessage 通過用作前端頁面之前的跨域，如父頁面與iframe頁面的跨域。window.postMessage方法，允許跨窗口通信，不論這兩個窗口是否同源。

話說工作中兩個頁面之前需要通信的情況並不多，我本人工作中，僅使用過兩次，一次是H5頁面中發送postMessage信息，ReactNative的webview中接收此此消息，並作出相應處理。另一次是可輪播的頁面，某個輪播頁使用的是iframe頁面，為了解決滑動的事件衝突，iframe頁面中去監聽手勢，發送消息告訴父頁面是否左滑和右滑。

子頁面向父頁面發消息

父頁面

window.addEventListener(message, (e) => {
this.props.movePage(e.data);
}, false);


子頁面(iframe):

if(/*左滑*/) {
window.parent && window.parent.postMessage(-1, *)
}else if(/*右滑*/){
window.parent && window.parent.postMessage(1, *)
}


父頁面向子頁面發消息

父頁面:

let iframe = document.querySelector(#iframe);
iframe.onload = function() {
iframe.contentWindow.postMessage(hello, http://localhost:3002);
}


子頁面:

window.addEventListener(message, function(e) {
console.log(e.data);
e.source.postMessage(Hi, e.origin); //回消息
});


1. node 中間件

node 中間件的跨域原理和nginx代理跨域，同源策略是瀏覽器的限制，服務端沒有同源策略。

node中間件實現跨域的原理如下:

1.接受客戶端請求

2.將請求 轉發給伺服器。

3.拿到伺服器 響應 數據。

4.將 響應 轉發給客戶端。

不常用跨域方法

以下三種跨域方式很少用，如有興趣，可自行查閱相關資料。

1. window.name + iframe
2. location.hash + iframe
3. document.domain (主域需相同)

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：跨域的方法有哪些？原理是什麼？

---

13.js非同步載入的方式有哪些？

1. <script> 的 defer 屬性，HTML4 中新增
2. <script> 的 async 屬性，HTML5 中新增

<script>標籤打開defer屬性，腳本就會非同步載入。渲染引擎遇到這一行命令，就會開始下載外部腳本，但不會等它下載和執行，而是直接執行後面的命令。

defer 和 async 的區別在於: defer要等到整個頁面在內存中正常渲染結束，才會執行；

async一旦下載完，渲染引擎就會中斷渲染，執行這個腳本以後，再繼續渲染。defer是「渲染完再執行」，async是「下載完就執行」。

如果有多個 defer 腳本，會按照它們在頁面出現的順序載入。

多個async腳本是不能保證載入順序的。

1. 動態插入 script 腳本

function downloadJS() {
varelement = document.createElement("script");
element.src = "XXX.js";
document.body.appendChild(element);
}
//何時的時候，調用上述方法


1. 有條件的動態創建腳本

如頁面 onload 之後，

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：js非同步載入的方式有哪些？

---

14.下面代碼a在什麼情況中列印出1？

//?
if(a == 1 && a == 2 && a == 3) {
console.log(1);
}


1.在類型轉換的時候，我們知道了對象如何轉換成原始數據類型。如果部署了 [Symbol.toPrimitive]，那麼返回的就是[Symbol.toPrimitive]()的返回值。當然，我們也可以把此函數部署在valueOf或者是toString介面上，效果相同。

//利用閉包延長作用域的特性
let a = {
[Symbol.toPrimitive]: (function() {
let i = 1;
return function() {
return i++;
}
})()
}


（1）. 比較 a == 1 時，會調用 [Symbol.toPrimitive]，此時 i 是 1，相等。

（2）. 繼續比較 a == 2,調用 [Symbol.toPrimitive]，此時 i 是 2，相等。（3）. 繼續比較 a == 3,調用 [Symbol.toPrimitive]，此時 i 是 3，相等。

2.利用Object.definePropert在window/global上定義a屬性，獲取a屬性時，會調用get.

let val = 1;
Object.defineProperty(window, a, {
get: function() {
return val++;
}
});


3.利用數組的特性。

var a = [1,2,3];
a.join = a.shift;


數組的 toString 方法返回一個字元串，該字元串由數組中的每個元素的 toString() 返回值經調用 join() 方法連接（由逗號隔開）組成。

因此，我們可以重新 join 方法。返回第一個元素，並將其刪除。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：下面代碼a在什麼情況中列印出1？

---

15.下面這段代碼的輸出是什麼？

function Foo() {
getName = function() {console.log(1)};
return this;
}
Foo.getName = function() {console.log(2)};
Foo.prototype.getName = function() {console.log(3)};
var getName = function() {console.log(4)};
function getName() {console.log(5)};

Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

說明：一道經典的面試題，僅是為了幫助大家回顧一下知識點，加深理解，真實工作中，是不可能這樣寫代碼的，否則，肯定會被打死的。

1.首先預編譯階段，變數聲明與函數聲明提升至其對應作用域的最頂端。

因此上面的代碼編譯後如下(函數聲明的優先順序先於變數聲明):

function Foo() {
getName = function() {console.log(1)};
return this;
}
var getName;
function getName() {console.log(5)};
Foo.getName = function() {console.log(2)};
Foo.prototype.getName = function() {console.log(3)};
getName = function() {console.log(4)};


2.Foo.getName();直接調用Foo上getName方法，輸出2

3.getName();輸出4，getName被重新賦值了

4.Foo().getName();執行Foo()，window的getName被重新賦值，返回this;瀏覽器環境中，非嚴格模式，this 指向 window，this.getName();輸出為1.

如果是嚴格模式，this 指向 undefined，此處會拋出錯誤。

如果是node環境中，this 指向 global，node的全局變數並不掛在global上，因為global.getName對應的是undefined，不是一個function，會拋出錯誤。

5.getName();已經拋錯的自然走不動這一步了；繼續瀏覽器非嚴格模式；window.getName被重新賦過值，此時再調用，輸出的是1

6.new Foo.getName();考察運算符優先順序的知識，new 無參數列表，對應的優先順序是18；成員訪問操作符 . , 對應的優先順序是 19。因此相當於是 new (Foo.getName)();new操作符會執行構造函數中的方法，因此此處輸出為 2.

7.new Foo().getName()；new 帶參數列表，對應的優先順序是19，和成員訪問操作符.優先順序相同。同級運算符，按照從左到右的順序依次計算。new Foo()先初始化 Foo 的實例化對象，實例上沒有getName方法，因此需要原型上去找，即找到了 Foo.prototype.getName，輸出3

8.new new Foo().getName(); new 帶參數列表，優先順序19，因此相當於是 new (new Foo()).getName()；先初始化 Foo 的實例化對象，然後將其原型上的 getName 函數作為構造函數再次 new ，輸出3

因此最終結果如下:

Foo.getName(); //2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3


如果你有更好的答案或想法，歡迎在這題目對應的github下留言：下面這段代碼的輸出是什麼？

---

16.實現雙向綁定 Proxy 與 Object.defineProperty 相比優劣如何?

1. Object.definedProperty 的作用是劫持一個對象的屬性，劫持屬性的getter和setter方法，在對象的屬性發生變化時進行特定的操作。而 Proxy 劫持的是整個對象。
2. Proxy 會返回一個代理對象，我們只需要操作新對象即可，而 Object.defineProperty 只能遍歷對象屬性直接修改。
3. Object.definedProperty 不支持數組，更準確的說是不支持數組的各種API，因為如果僅僅考慮arry[i] = value 這種情況，是可以劫持的，但是這種劫持意義不大。而 Proxy 可以支持數組的各種API。
4. 儘管 Object.defineProperty 有諸多缺陷，但是其兼容性要好於 Proxy.

PS: Vue2.x 使用 Object.defineProperty 實現數據雙向綁定，V3.0 則使用了 Proxy.

//攔截器
let obj = {};
let temp = Yvette;
Object.defineProperty(obj, name, {
get() {
console.log("讀取成功");
return temp
},
set(value) {
console.log("設置成功");
temp = value;
}
});

obj.name = Chris;
console.log(obj.name);

PS: Object.defineProperty 定義出來的屬性，默認是不可枚舉，不可更改，不可配置【無法delete】

我們可以看到 Proxy 會劫持整個對象，讀取對象中的屬性或者是修改屬性值，那麼就會被劫持。但是有點需要注意，複雜數據類型，監控的是引用地址，而不是值，如果引用地址沒有改變，那麼不會觸發set。

let obj = {name: Yvette, hobbits: [travel, reading], info: {
age: 20,
job: engineer
}};
let p = new Proxy(obj, {
get(target, key) { //第三個參數是 proxy， 一般不使用
console.log(讀取成功);
return Reflect.get(target, key);
},
set(target, key, value) {
if(key === length) return true; //如果是數組長度的變化，返回。
console.log(設置成功);
return Reflect.set([target, key, value]);
}
});
p.name = 20; //設置成功
p.age = 20; //設置成功; 不需要事先定義此屬性
p.hobbits.push(photography); //讀取成功;注意不會觸發設置成功
p.info.age = 18; //讀取成功;不會觸發設置成功


最後，我們再看下對於數組的劫持，Object.definedProperty 和 Proxy 的差別

Object.definedProperty 可以將數組的索引作為屬性進行劫持，但是僅支持直接對 arry[i] 進行操作，不支持數組的API，非常雞肋。

let arry = []
Object.defineProperty(arry, 0, {
get() {
console.log("讀取成功");
return temp
},
set(value) {
console.log("設置成功");
temp = value;
}
});

arry[0] = 10; //觸發設置成功
arry.push(10); //不能被劫持

Proxy 可以監聽到數組的變化，支持各種API。注意數組的變化觸發get和set可能不止一次，如有需要，自行根據key值決定是否要進行處理。

let hobbits = [travel, reading];
let p = new Proxy(hobbits, {
get(target, key) {
// if(key === length) return true; //如果是數組長度的變化，返回。
console.log(讀取成功);
return Reflect.get(target, key);
},
set(target, key, value) {
// if(key === length) return true; //如果是數組長度的變化，返回。
console.log(設置成功);
return Reflect.set([target, key, value]);
}
});
p.splice(0,1) //觸發get和set，可以被劫持
p.push(photography);//觸發get和set
p.slice(1); //觸發get；因為 slice 是不會修改原數組的


如果你有更好的答案或想法，歡迎在這題目對應的github下留言：實現雙向綁定 Proxy 與 Object.defineProperty 相比優劣如何?

---

17.Object.is() 與比較操作符 ===、== 有什麼區別？

以下情況，Object.is認為是相等

兩個值都是 undefined
兩個值都是 null
兩個值都是 true 或者都是 false
兩個值是由相同個數的字元按照相同的順序組成的字元串
兩個值指向同一個對象
兩個值都是數字並且
都是正零 +0
都是負零 -0
都是 NaN
都是除零和 NaN 外的其它同一個數字

Object.is() 類似於 ===，但是有一些細微差別，如下：

1. NaN 和 NaN 相等
2. -0 和 +0 不相等

console.log(Object.is(NaN, NaN));//true
console.log(NaN === NaN);//false
console.log(Object.is(-0, +0)); //false
console.log(-0 === +0); //true


Object.is 和 ==差得遠了， == 在類型不同時，需要進行類型轉換，前文已經詳細說明。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：Object.is() 與比較操作符 ===、== 有什麼區別?

---

18.什麼是事件循環？Node事件循環和JS事件循環的差異是什麼？

最後一道題留給大家回答，再寫下去，篇幅實在太長。

針對這道題，後面會專門寫一篇文章~

留下你的答案: 什麼是事件循環？Node事件循環和JS事件循環的差異是什麼？

關於瀏覽器的event-loop可以看我之前的文章：搞懂瀏覽器的EventLoop

推薦閱讀：