header("Access-Control-Allow-Origin:*");

CSRF，全稱為Cross-Site Request Forgery，跨站請求偽造，是一種網(wǎng)絡(luò)攻擊方式，它可以在用戶毫不知情的情況下，以用戶的名義偽造請求發(fā)送給被攻擊站點(diǎn)，從而在未授權(quán)的情況下進(jìn)行權(quán)限保護(hù)內(nèi)的操作。

具體來講，可以這樣理解CSRF。攻擊者借用用戶的名義，向某一服務(wù)器發(fā)送惡意請求，對服務(wù)器來講，這一請求是完全合法的，但攻擊者確完成了一個(gè)惡意操作，比如以用戶的名義發(fā)送郵件，盜取賬號，購買商品等等

一般網(wǎng)站防御CSRF攻擊的方案:
(1)驗(yàn)證token值。
(2)驗(yàn)證HTTP頭的Referer。
(3)在HTTP頭中自定義屬性并驗(yàn)證
(4)服務(wù)器端表單hash認(rèn)證
在所有的表單里面隨機(jī)生成一個(gè)hash，server在表單處理時(shí)去驗(yàn)證這個(gè)hash值是否正確，這樣工作量比較大

CSRF(跨站請求偽造攻擊)漏洞詳解

// 第一種
.ovh{
  overflow:hidden;
}
// 第二種
.clear{
  clear:both;
}
// 第三種
.clearfix:after{ 
　content:"";//設(shè)置內(nèi)容為空
　height:0;//高度為0
　line-height:0;//行高為0
　display:block;//將文本轉(zhuǎn)為塊級元素
　visibility:hidden;//將元素隱藏
　clear:both//清除浮動(dòng)
}
.clearfix{
　zoom:1;為了兼容IE
}

免費(fèi)公開課帶你徹底掌握 CSS 浮動(dòng)

當(dāng)給父元素設(shè)置"overflow:hidden"時(shí)，實(shí)際上創(chuàng)建了一個(gè)超級屬性BFC，此超級屬性反過來決定了"height:auto"是如何計(jì)算的。在“BFC布局規(guī)則”中提到：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。因此，父元素在計(jì)算其高度時(shí)，加入了浮動(dòng)元素的高度，“順便”達(dá)成了清除浮動(dòng)的目標(biāo)，所以父元素就包裹住了子元素。

// 第一種
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
// 第二種
.center {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
// 第三種
.center {
  position: absolute;
  margin：auto；
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
// 第四種
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 第五種
.parent{
  display: flex;
}

.content{
  margin: auto; /*自動(dòng)相對于父元素水平垂直居中*/
}
// 第六種
.parent {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

BFC(Block Formatting Context),塊級格式化上下文,是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬于常規(guī)文檔流。

原理(渲染規(guī)則)：

在BFC元素的垂直方向上的邊距，會發(fā)生重疊

BFC的區(qū)域不會與浮動(dòng)元素的box重疊

BFC在頁面上是一個(gè)獨(dú)立的容器，外面的元素不會影響里面的元素

計(jì)算BFC高度時(shí)，浮動(dòng)元素也會參與計(jì)算

  
  
1
  
  

    
2
  
  
3

  
  
我是浮動(dòng)元素

怎么創(chuàng)建BFC：

float的值不為none

position的值不為static或者relative

display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個(gè)

overflow的值不為visible

浮動(dòng)，絕對定位元素，inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素，（除了這個(gè)值已經(jīng)被傳到了視口的時(shí)候）將創(chuàng)建一個(gè)新的塊級格式化上下文。

上面的引述幾乎總結(jié)了一個(gè)BFC是怎樣形成的。但是讓我們以另一種方式來重新定義以便能更好的去理解.

參考鏈接：
理解CSS中BFC

這個(gè)直接看 阮一峰:Flex 布局教程

單詞sticky的中文意思是“粘性的”，position:sticky表現(xiàn)也符合這個(gè)粘性的表現(xiàn)。基本上，可以看出是position:relative和position:fixed的結(jié)合體——當(dāng)元素在屏幕內(nèi)，表現(xiàn)為relative，就要滾出顯示器屏幕的時(shí)候，表現(xiàn)為fixed。

詳細(xì)講解的還是看大神的吧，張鑫旭:position:sticky

原型與原型鏈，作用域及閉包，異步和單線程。
三座大山，真不是一兩句可以說清楚的，只有靠大家多看，多用，多理解，放點(diǎn)鏈接吧。

原型，原型鏈，call/apply
JavaScript從初級往高級走系列————prototype
JavaScript從初級往高級走系列————異步
JavaScript的預(yù)編譯過程
內(nèi)存空間詳解
作用域和閉包
JavaScript深入之詞法作用域和動(dòng)態(tài)作用域
JavaScript深入之作用域鏈
事件循環(huán)機(jī)制

參考鏈接：
什么是閉包？https://mp.weixin.qq.com/s/OthfFRwf-rQmVbMnXAqnCg
作用域與閉包https://yangbo5207.github.io/wutongluo/ji-chu-jin-jie-xi-lie/si-3001-zuo-yong-yu-lian-yu-bi-bao.html

簡言之，閉包是由函數(shù)引用其周邊狀態(tài)（詞法環(huán)境）綁在一起形成的（封裝）組合結(jié)構(gòu)。在 JavaScript 中，閉包在每個(gè)函數(shù)被創(chuàng)建時(shí)形成。

這是基本原理，但為什么我們關(guān)心這些？實(shí)際上，由于閉包與它的詞法環(huán)境綁在一起，因此閉包讓我們能夠從一個(gè)函數(shù)內(nèi)部訪問其外部函數(shù)的作用域。

要使用閉包，只需要簡單地將一個(gè)函數(shù)定義在另一個(gè)函數(shù)內(nèi)部，并將它暴露出來。要暴露一個(gè)函數(shù)，可以將它返回或者傳給其他函數(shù)。

內(nèi)部函數(shù)將能夠訪問到外部函數(shù)作用域中的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢。

在 JavaScript 中，閉包是用來實(shí)現(xiàn)數(shù)據(jù)私有的原生機(jī)制。當(dāng)你使用閉包來實(shí)現(xiàn)數(shù)據(jù)私有時(shí)，被封裝的變量只能在閉包容器函數(shù)作用域中使用。你無法繞過對象被授權(quán)的方法在外部訪問這些數(shù)據(jù)。在 JavaScript 中，任何定義在閉包作用域下的公開方法才可以訪問這些數(shù)據(jù)。

參考鏈接：
js引擎執(zhí)行機(jī)制https://segmentfault.com/a/1190000012806637
事件循環(huán)機(jī)制

一個(gè)線程中，事件循環(huán)是唯一的，但是任務(wù)隊(duì)列可以擁有多個(gè)。

任務(wù)隊(duì)列又分為macro-task（宏任務(wù)）與micro-task（微任務(wù)），在最新標(biāo)準(zhǔn)中，它們被分別稱為task與jobs。

macro-task大概包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task大概包括: process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)

setTimeout/Promise等我們稱之為任務(wù)源。而進(jìn)入任務(wù)隊(duì)列的是他們指定的具體執(zhí)行任務(wù)。

// setTimeout中的回調(diào)函數(shù)才是進(jìn)入任務(wù)隊(duì)列的任務(wù)
setTimeout(function() {
    console.log("xxxx");
})
// 非常多的同學(xué)對于setTimeout的理解存在偏差。所以大概說一下誤解：
// setTimeout作為一個(gè)任務(wù)分發(fā)器，這個(gè)函數(shù)會立即執(zhí)行，而它所要分發(fā)的任務(wù)，也就是它的第一個(gè)參數(shù)，才是延遲執(zhí)行

來自不同任務(wù)源的任務(wù)會進(jìn)入到不同的任務(wù)隊(duì)列。其中setTimeout與setInterval是同源的。

事件循環(huán)的順序，決定了JavaScript代碼的執(zhí)行順序。它從script(整體代碼)開始第一次循環(huán)。之后全局上下文進(jìn)入函數(shù)調(diào)用棧。直到調(diào)用棧清空(只剩全局)，然后執(zhí)行所有的micro-task。當(dāng)所有可執(zhí)行的micro-task執(zhí)行完畢之后。循環(huán)再次從macro-task開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，然后再執(zhí)行所有的micro-task，這樣一直循環(huán)下去。

其中每一個(gè)任務(wù)的執(zhí)行，無論是macro-task還是micro-task，都是借助函數(shù)調(diào)用棧來完成。

promise里面的是宏任務(wù)，then后面的是微任務(wù)。

這個(gè)問題本質(zhì)就是為啥需要異步。如果js不是異步的話，由于js代碼本身是自上而下執(zhí)行的，那么如果上一行代碼需要執(zhí)行很久，下面的代碼就會被阻塞，對用戶來說，就是”卡死”，這樣的話，會造成很差的用戶體驗(yàn)。

你可能知道，Javascript語言的執(zhí)行環(huán)境是"單線程"（single thread）。

所謂"單線程"，就是指一次只能完成一件任務(wù)。如果有多個(gè)任務(wù)，就必須排隊(duì)，前面一個(gè)任務(wù)完成，再執(zhí)行后面一個(gè)任務(wù)，以此類推。

這種模式的好處是實(shí)現(xiàn)起來比較簡單，執(zhí)行環(huán)境相對單純；壞處是只要有一個(gè)任務(wù)耗時(shí)很長，后面的任務(wù)都必須排隊(duì)等著，會拖延整個(gè)程序的執(zhí)行。常見的瀏覽器無響應(yīng)（假死），往往就是因?yàn)槟骋欢蜫avascript代碼長時(shí)間運(yùn)行（比如死循環(huán)），導(dǎo)致整個(gè)頁面卡在這個(gè)地方，其他任務(wù)無法執(zhí)行。

為了解決這個(gè)問題，Javascript語言將任務(wù)的執(zhí)行模式分成兩種：同步（Synchronous）和異步（Asynchronous）。

回調(diào)函數(shù)

假定有兩個(gè)函數(shù)f1和f2，后者等待前者的執(zhí)行結(jié)果。
如果f1是一個(gè)很耗時(shí)的任務(wù)，可以考慮改寫f1，把f2寫成f1的回調(diào)函數(shù)

function f1(callback){
　setTimeout(function () {
　// f1的任務(wù)代碼
　　callback();
　}, 1000);
}

回調(diào)函數(shù)的優(yōu)點(diǎn)是簡單、容易理解和部署，缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個(gè)部分之間高度耦合（Coupling），流程會很混亂，而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。

事件監(jiān)聽

另一種思路是采用事件驅(qū)動(dòng)模式。任務(wù)的執(zhí)行不取決于代碼的順序，而取決于某個(gè)事件是否發(fā)生。

f1.on("done", f2);

上面這行代碼的意思是，當(dāng)f1發(fā)生done事件，就執(zhí)行f2。然后，對f1進(jìn)行改寫：

function f1(){
　setTimeout(function () {
　// f1的任務(wù)代碼
　　f1.trigger("done");
　}, 1000);
}

發(fā)布訂閱

我們假定，存在一個(gè)"信號中心"，某個(gè)任務(wù)執(zhí)行完成，就向信號中心"發(fā)布"（publish）一個(gè)信號，其他任務(wù)可以向信號中心"訂閱"（subscribe）這個(gè)信號，從而知道什么時(shí)候自己可以開始執(zhí)行。這就叫做"發(fā)布/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）。

jQuery.subscribe("done", f2);

function f1(){
　setTimeout(function () {
    // f1的任務(wù)代碼
    jQuery.publish("done");
　}, 1000);
}

Promise

f1().then(f2).then(f3);

新生成了一個(gè)對象

鏈接到原型

綁定 this

返回新對象

function create() {
    // 創(chuàng)建一個(gè)空的對象
    let obj = new Object()
    // 獲得構(gòu)造函數(shù)
    let Con = [].shift.call(arguments)
    // 鏈接到原型
    obj.__proto__ = Con.prototype
    // 綁定 this，執(zhí)行構(gòu)造函數(shù)
    let result = Con.apply(obj, arguments)
    // 確保 new 出來的是個(gè)對象
    return typeof result === "object" ? result : obj
}

JS原型繼承和類式繼承http://www.cnblogs.com/constantince/p/4754992.html

// 類繼承
var father = function() {
  this.age = 52;
  this.say = function() {
    alert("hello i am "+ this.name " and i am "+this.age + "years old");
  }
}
 
var child = function() {
  this.name = "bill";
  father.call(this);
}
 
var man = new child();
man.say();

// 原型繼承
var father = function() {
}
father.prototype.a = function() {
}
var child = function(){}
//開始繼承
child.prototype = new father();
var man = new child();
man.a();

和原型對比起來，構(gòu)造函數(shù)（類）式繼承有什么不一樣呢？首先，構(gòu)造函數(shù)繼承的方法都會存在父對象之中，每一次實(shí)例，都會將funciton保存在內(nèi)存中，這樣的做法毫無以為會帶來性能上的問題。其次類式繼承是不可變的。在運(yùn)行時(shí)，無法修改或者添加新的方法，這種方式是一種固步自封的死方法。而原型繼承是可以通過改變原型鏈接而對子類進(jìn)行修改的。另外就是類式繼承不支持多重繼承，而對于原型繼承來說，你只需要寫好extend對對象進(jìn)行擴(kuò)展即可。

==是===類型轉(zhuǎn)換（又稱強(qiáng)制）,==只需要值相等就會返回true，而===必須值和數(shù)據(jù)類型都相同才會返回true。

1.每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法：call()方法和apply()方法。
2.相同點(diǎn)：這兩個(gè)方法的作用是一樣的。
都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對象的值，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
一般來說，this總是指向調(diào)用某個(gè)方法的對象，但是使用call()和apply()方法時(shí)，就會改變this的指向。
3.不同點(diǎn)：接收參數(shù)的方式不同。

apply()方法 接收兩個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域（this），另一個(gè)是參數(shù)數(shù)組。
語法：apply([thisObj [,argArray] ]);，調(diào)用一個(gè)對象的一個(gè)方法，2另一個(gè)對象替換當(dāng)前對象。
說明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對象，那么將導(dǎo)致一個(gè)TypeError，如果沒有提供argArray和thisObj任何一個(gè)參數(shù)，那么Global對象將用作thisObj。
call()方法 第一個(gè)參數(shù)和apply()方法的一樣，但是傳遞給函數(shù)的參數(shù)必須列舉出來。
語法：call([thisObject[,arg1 [,arg2 [,…,argn]]]]);，應(yīng)用某一對象的一個(gè)方法，用另一個(gè)對象替換當(dāng)前對象。
說明： call方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)閠hisObj指定的新對象，如果沒有提供thisObj參數(shù)，那么Global對象被用于thisObj。

bind和call、apply最大的區(qū)別就是，call、apply不僅改變this的指向，還會直接支持代碼，而bind不會。

var cat = {
  name: "咪咪"
}
function beatTheMonster(){
  console.log(this.name);
}
beatTheMonster.call(cat);

// 1.call 改變了this的指向。改變到了cat上。
// 2.beatTheMonster函數(shù)/方法執(zhí)行了
// 3.bind()，保存了方法，并沒有直接調(diào)用它

function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(",")

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)

參考鏈接：
歸納總結(jié)this的指向問題https://finget.github.io/2018/11/28/this/
ECMAScript規(guī)范解讀thishttps://github.com/mqyqingfeng/Blog/issues/7

function foo() {
    console.log(this.a)
}
var a = 1
foo()

var obj = {
    a: 2,
    foo: foo
}
obj.foo()

// 以上兩者情況 `this` 只依賴于調(diào)用函數(shù)前的對象，優(yōu)先級是第二個(gè)情況大于第一個(gè)情況

// 以下情況是優(yōu)先級最高的，`this` 只會綁定在 `c` 上，不會被任何方式修改 `this` 指向
var c = new foo()
c.a = 3
console.log(c.a)

// 還有種就是利用 call，apply，bind 改變 this，這個(gè)優(yōu)先級僅次于 new

箭頭函數(shù)中的this：

function a() {
    return () => {
        return () => {
            console.log(this)
        }
    }
}
console.log(a()()())

箭頭函數(shù)其實(shí)是沒有 this 的，這個(gè)函數(shù)中的 this 只取決于他外面的第一個(gè)不是箭頭函數(shù)的函數(shù)的 this。在這個(gè)例子中，因?yàn)檎{(diào)用 a 符合前面代碼中的第一個(gè)情況，所以 this 是 window。并且 this 一旦綁定了上下文，就不會被任何代碼改變。

理解 JavaScript 的 async/awaithttps://segmentfault.com/a/1190000007535316

async function async1() {
  console.log( "async1 start")
  await async2()
  console.log( "async1 end")
}
async function async2() {
  console.log( "async2")
}
async1()
console.log( "script start")

這里注意一點(diǎn)，可能大家都知道await會讓出線程，阻塞后面的代碼，那么上面例子中， async2 和 script start 誰先打印呢？
是從左向右執(zhí)行，一旦碰到await直接跳出，阻塞 async2() 的執(zhí)行？
還是從右向左，先執(zhí)行async2后，發(fā)現(xiàn)有await關(guān)鍵字，于是讓出線程，阻塞代碼呢？
實(shí)踐的結(jié)論是，從右向左的。先打印async2，后打印的 script start。
之所以提一嘴，是因?yàn)槲医?jīng)常看到這樣的說法，「一旦遇到await就立刻讓出線程，阻塞后面的代碼」。

我的理解：callback是解決異步的早期方案，但是會導(dǎo)致‘回調(diào)地獄’，然后就出現(xiàn)了Promise，利用.then優(yōu)化了回調(diào)地獄的問題，而async/await是在promise 進(jìn)一步封裝，利用看似同步的方式解決異步問題。Promise和async/await都是語法糖。就是寫起來更簡單，閱讀性和維護(hù)性增強(qiáng)。

Promise 和 async/await在執(zhí)行時(shí)都干了什么，推薦看看：8 張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序

直接粘貼大神的代碼：

// 三種狀態(tài)
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// promise 接收一個(gè)函數(shù)參數(shù)，該函數(shù)會立即執(zhí)行
function MyPromise(fn) {
  let _this = this;
  _this.currentState = PENDING;
  _this.value = undefined;
  // 用于保存 then 中的回調(diào)，只有當(dāng) promise
  // 狀態(tài)為 pending 時(shí)才會緩存，并且每個(gè)實(shí)例至多緩存一個(gè)
  _this.resolvedCallbacks = [];
  _this.rejectedCallbacks = [];

  _this.resolve = function (value) {
    if (value instanceof MyPromise) {
      // 如果 value 是個(gè) Promise，遞歸執(zhí)行
      return value.then(_this.resolve, _this.reject)
    }
    setTimeout(() => { // 異步執(zhí)行，保證執(zhí)行順序
      if (_this.currentState === PENDING) {
        _this.currentState = RESOLVED;
        _this.value = value;
        _this.resolvedCallbacks.forEach(cb => cb());
      }
    })
  };

  _this.reject = function (reason) {
    setTimeout(() => { // 異步執(zhí)行，保證執(zhí)行順序
      if (_this.currentState === PENDING) {
        _this.currentState = REJECTED;
        _this.value = reason;
        _this.rejectedCallbacks.forEach(cb => cb());
      }
    })
  }
  // 用于解決以下問題
  // new Promise(() => throw Error("error))
  try {
    fn(_this.resolve, _this.reject);
  } catch (e) {
    _this.reject(e);
  }
}

MyPromise.prototype.then = function (onResolved, onRejected) {
  var self = this;
  // 規(guī)范 2.2.7，then 必須返回一個(gè)新的 promise
  var promise2;
  // 規(guī)范 2.2.onResolved 和 onRejected 都為可選參數(shù)
  // 如果類型不是函數(shù)需要忽略，同時(shí)也實(shí)現(xiàn)了透傳
  // Promise.resolve(4).then().then((value) => console.log(value))
  onResolved = typeof onResolved === "function" ? onResolved : v => v;
  onRejected = typeof onRejected === "function" ? onRejected : r => throw r;

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      // 規(guī)范 2.2.4，保證 onFulfilled，onRjected 異步執(zhí)行
      // 所以用了 setTimeout 包裹下
      setTimeout(function () {
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }

  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      setTimeout(function () {
        // 異步執(zhí)行onRejected
        try {
          var x = onRejected(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }

  if (self.currentState === PENDING) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      self.resolvedCallbacks.push(function () {
        // 考慮到可能會有報(bào)錯(cuò)，所以使用 try/catch 包裹
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });

      self.rejectedCallbacks.push(function () {
        try {
          var x = onRejected(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });
    }));
  }
};
// 規(guī)范 2.3
function resolutionProcedure(promise2, x, resolve, reject) {
  // 規(guī)范 2.3.1，x 不能和 promise2 相同，避免循環(huán)引用
  if (promise2 === x) {
    return reject(new TypeError("Error"));
  }
  // 規(guī)范 2.3.2
  // 如果 x 為 Promise，狀態(tài)為 pending 需要繼續(xù)等待否則執(zhí)行
  if (x instanceof MyPromise) {
    if (x.currentState === PENDING) {
      x.then(function (value) {
        // 再次調(diào)用該函數(shù)是為了確認(rèn) x resolve 的
        // 參數(shù)是什么類型，如果是基本類型就再次 resolve
        // 把值傳給下個(gè) then
        resolutionProcedure(promise2, value, resolve, reject);
      }, reject);
    } else {
      x.then(resolve, reject);
    }
    return;
  }
  // 規(guī)范 2.3.3.3.3
  // reject 或者 resolve 其中一個(gè)執(zhí)行過得話，忽略其他的
  let called = false;
  // 規(guī)范 2.3.3，判斷 x 是否為對象或者函數(shù)
  if (x !== null && (typeof x === "object" || typeof x === "function")) {
    // 規(guī)范 2.3.3.2，如果不能取出 then，就 reject
    try {
      // 規(guī)范 2.3.3.1
      let then = x.then;
      // 如果 then 是函數(shù)，調(diào)用 x.then
      if (typeof then === "function") {
        // 規(guī)范 2.3.3.3
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            // 規(guī)范 2.3.3.3.1
            resolutionProcedure(promise2, y, resolve, reject);
          },
          e => {
            if (called) return;
            called = true;
            reject(e);
          }
        );
      } else {
        // 規(guī)范 2.3.3.4
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    // 規(guī)范 2.3.4，x 為基本類型
    resolve(x);
  }
}

MyPromise.all = (arr) => {
  if (!Array.isArray(arr)) {
    throw new TypeError("參數(shù)應(yīng)該是一個(gè)數(shù)組!");
  };
  return new MyPromise(function(resolve, reject) {
    let i = 0, result = [];
    next();
    function next() {
      //如果不是MyPromise對象，需要轉(zhuǎn)換
      MyPromise.resolve(arr[i]).then(res => {
        result.push(res);
        i++;
        if (i === arr.length) {
            resolve(result);
        } else {
            next();
        };
      }, reject);
    };
  })
};

參考鏈接：
原生es6封裝一個(gè)Promise對象

你是否在日常開發(fā)中遇到一個(gè)問題，在滾動(dòng)事件中需要做個(gè)復(fù)雜計(jì)算或者實(shí)現(xiàn)一個(gè)按鈕的防二次點(diǎn)擊操作。

這些需求都可以通過函數(shù)防抖動(dòng)來實(shí)現(xiàn)。尤其是第一個(gè)需求，如果在頻繁的事件回調(diào)中做復(fù)雜計(jì)算，很有可能導(dǎo)致頁面卡頓，不如將多次計(jì)算合并為一次計(jì)算，只在一個(gè)精確點(diǎn)做操作。

PS：防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用。區(qū)別在于，假設(shè)一個(gè)用戶一直觸發(fā)這個(gè)函數(shù)，且每次觸發(fā)函數(shù)的間隔小于wait，防抖的情況下只會調(diào)用一次，而節(jié)流的 情況會每隔一定時(shí)間（參數(shù)wait）調(diào)用函數(shù)。

我們先來看一個(gè)袖珍版的防抖理解一下防抖的實(shí)現(xiàn)：

// func是用戶傳入需要防抖的函數(shù)
// wait是等待時(shí)間
const debounce = (func, wait = 50) => {
  // 緩存一個(gè)定時(shí)器id
  let timer = 0
  // 這里返回的函數(shù)是每次用戶實(shí)際調(diào)用的防抖函數(shù)
  // 如果已經(jīng)設(shè)定過定時(shí)器了就清空上一次的定時(shí)器
  // 開始一個(gè)新的定時(shí)器，延遲執(zhí)行用戶傳入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
// 不難看出如果用戶調(diào)用該函數(shù)的間隔小于wait的情況下，上一次的時(shí)間還未到就被清除了，并不會執(zhí)行函數(shù)

這是一個(gè)簡單版的防抖，但是有缺陷，這個(gè)防抖只能在最后調(diào)用。一般的防抖會有immediate選項(xiàng)，表示是否立即調(diào)用。這兩者的區(qū)別，舉個(gè)栗子來說：

例如在搜索引擎搜索問題的時(shí)候，我們當(dāng)然是希望用戶輸入完最后一個(gè)字才調(diào)用查詢接口，這個(gè)時(shí)候適用延遲執(zhí)行的防抖函數(shù)，它總是在一連串（間隔小于wait的）函數(shù)觸發(fā)之后調(diào)用。

例如用戶給interviewMap點(diǎn)star的時(shí)候，我們希望用戶點(diǎn)第一下的時(shí)候就去調(diào)用接口，并且成功之后改變star按鈕的樣子，用戶就可以立馬得到反饋是否star成功了，這個(gè)情況適用立即執(zhí)行的防抖函數(shù)，它總是在第一次調(diào)用，并且下一次調(diào)用必須與前一次調(diào)用的時(shí)間間隔大于wait才會觸發(fā)。

// 這個(gè)是用來獲取當(dāng)前時(shí)間戳的
function now() {
  return +new Date()
}
/**
 * 防抖函數(shù)，返回函數(shù)連續(xù)調(diào)用時(shí)，空閑時(shí)間必須大于或等于 wait，func 才會執(zhí)行
 *
 * @param  {function} func        回調(diào)函數(shù)
 * @param  {number}   wait        表示時(shí)間窗口的間隔
 * @param  {boolean}  immediate   設(shè)置為ture時(shí)，是否立即調(diào)用函數(shù)
 * @return {function}             返回客戶調(diào)用函數(shù)
 */
function debounce (func, wait = 50, immediate = true) {
  let timer, context, args

  // 延遲執(zhí)行函數(shù)
  const later = () => setTimeout(() => {
    // 延遲函數(shù)執(zhí)行完畢，清空緩存的定時(shí)器序號
    timer = null
    // 延遲執(zhí)行的情況下，函數(shù)會在延遲函數(shù)中執(zhí)行
    // 使用到之前緩存的參數(shù)和上下文
    if (!immediate) {
      func.apply(context, args)
      context = args = null
    }
  }, wait)

  // 這里返回的函數(shù)是每次實(shí)際調(diào)用的函數(shù)
  return function(...params) {
    // 如果沒有創(chuàng)建延遲執(zhí)行函數(shù)（later），就創(chuàng)建一個(gè)
    if (!timer) {
      timer = later()
      // 如果是立即執(zhí)行，調(diào)用函數(shù)
      // 否則緩存參數(shù)和調(diào)用上下文
      if (immediate) {
        func.apply(this, params)
      } else {
        context = this
        args = params
      }
    // 如果已有延遲執(zhí)行函數(shù)（later），調(diào)用的時(shí)候清除原來的并重新設(shè)定一個(gè)
    // 這樣做延遲函數(shù)會重新計(jì)時(shí)
    } else {
      clearTimeout(timer)
      timer = later()
    }
  }
}

節(jié)流：

/**
 * underscore 節(jié)流函數(shù)，返回函數(shù)連續(xù)調(diào)用時(shí)，func 執(zhí)行頻率限定為 次 / wait
 *
 * @param  {function}   func      回調(diào)函數(shù)
 * @param  {number}     wait      表示時(shí)間窗口的間隔
 * @param  {object}     options   如果想忽略開始函數(shù)的的調(diào)用，傳入{leading: false}。
 *                                如果想忽略結(jié)尾函數(shù)的調(diào)用，傳入{trailing: false}
 *                                兩者不能共存，否則函數(shù)不能執(zhí)行
 * @return {function}             返回客戶調(diào)用函數(shù)
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的時(shí)間戳
    var previous = 0;
    // 如果 options 沒傳則設(shè)為空對象
    if (!options) options = {};
    // 定時(shí)器回調(diào)函數(shù)
    var later = function() {
      // 如果設(shè)置了 leading，就將 previous 設(shè)為 0
      // 用于下面函數(shù)的第一個(gè) if 判斷
      previous = options.leading === false ? 0 : _.now();
      // 置空一是為了防止內(nèi)存泄漏，二是為了下面的定時(shí)器判斷
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 獲得當(dāng)前時(shí)間戳
      var now = _.now();
      // 首次進(jìn)入前者肯定為 true
      // 如果需要第一次不執(zhí)行函數(shù)
      // 就將上次時(shí)間戳設(shè)為當(dāng)前的
      // 這樣在接下來計(jì)算 remaining 的值時(shí)會大于0
      if (!previous && options.leading === false) previous = now;
      // 計(jì)算剩余時(shí)間
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果當(dāng)前調(diào)用已經(jīng)大于上次調(diào)用時(shí)間 + wait
      // 或者用戶手動(dòng)調(diào)了時(shí)間
       // 如果設(shè)置了 trailing，只會進(jìn)入這個(gè)條件
      // 如果沒有設(shè)置 leading，那么第一次會進(jìn)入這個(gè)條件
      // 還有一點(diǎn)，你可能會覺得開啟了定時(shí)器那么應(yīng)該不會進(jìn)入這個(gè) if 條件了
      // 其實(shí)還是會進(jìn)入的，因?yàn)槎〞r(shí)器的延時(shí)
      // 并不是準(zhǔn)確的時(shí)間，很可能你設(shè)置了2秒
      // 但是他需要2.2秒才觸發(fā)，這時(shí)候就會進(jìn)入這個(gè)條件
      if (remaining <= 0 || remaining > wait) {
        // 如果存在定時(shí)器就清理掉否則會調(diào)用二次回調(diào)
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        // 判斷是否設(shè)置了定時(shí)器和 trailing
        // 沒有的話就開啟一個(gè)定時(shí)器
        // 并且不能不能同時(shí)設(shè)置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

懶加載也就是延遲加載
原理：
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發(fā)出請求去下載圖片，只有通過javascript設(shè)置了圖片路徑，瀏覽器才會發(fā)送請求。
懶加載的原理就是先在頁面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把正真的路徑存在元素的“data-url”（這個(gè)名字起個(gè)自己認(rèn)識好記的就行）屬性里，要用的時(shí)候就取出來，再設(shè)置

// 懶加載
function loadImg(src){
  let promise = new Promise(function (resolve, reject) {
    let img = document.createElement("img")
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function () {
      reject("圖片加載失敗")
    }
    img.src = src
  })
  return promise
}

預(yù)加載 提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染

實(shí)現(xiàn)預(yù)加載的三種方法：

用CSS和JavaScript實(shí)現(xiàn)預(yù)加載

僅使用JavaScript實(shí)現(xiàn)預(yù)加載

使用Ajax實(shí)現(xiàn)預(yù)加載

用CSS和JavaScript實(shí)現(xiàn)預(yù)加載

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

將這三個(gè)ID選擇器應(yīng)用到(X)HTML元素中，我們便可通過CSS的background屬性將圖片預(yù)加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當(dāng)它們在Web頁面的其他地方被調(diào)用時(shí)，瀏覽器就會在渲染過程中使用預(yù)加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。

該方法雖然高效，但仍有改進(jìn)余地。使用該法加載的圖片會同頁面的其他內(nèi)容一起加載，增加了頁面的整體加載時(shí)間。為了解決這個(gè)問題，我們增加了一些JavaScript代碼，來推遲預(yù)加載的時(shí)間，直到頁面加載完畢。代碼如下：

function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != "function") {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

僅使用JavaScript實(shí)現(xiàn)預(yù)加載

var images = new Array()  
function preload() {  
  for (i = 0; i < preload.arguments.length; i++) {  
    images[i] = new Image()  
    images[i].src = preload.arguments[i]  
  }  
}  
preload(  
  "http://domain.tld/gallery/image-001.jpg",  
   "http://domain.tld/gallery/image-002.jpg",  
   "http://domain.tld/gallery/image-003.jpg"  
)  

使用Ajax實(shí)現(xiàn)預(yù)加載

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open("GET", "http://domain.tld/preload.js");  
        xhr.send("");  
        xhr = new XMLHttpRequest();  
        xhr.open("GET", "http://domain.tld/preload.css");  
        xhr.send("");  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

上面代碼預(yù)加載了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超時(shí)是為了防止腳本掛起，而導(dǎo)致正常頁面出現(xiàn)功能問題。

window.onload = function() {  
    setTimeout(function() {  
        // reference to   
        var head = document.getElementsByTagName("head")[0];  
        // a new CSS  
        var css = document.createElement("link");  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.;  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

這里，我們通過DOM創(chuàng)建三個(gè)元素來實(shí)現(xiàn)三個(gè)文件的預(yù)加載。正如上面提到的那樣，使用Ajax，加載文件不會應(yīng)用到加載頁面上。從這點(diǎn)上看，Ajax方法優(yōu)越于JavaScript。

參考鏈接:
Javascript圖片預(yù)加載詳解

借用babel工具可以學(xué)習(xí)一下，es6的class 編譯成es5時(shí)，長什么樣

// ES6
class Person{
  constructor(name,age){
      this.name = name
   this.age = age
  }
  say() {
    console.log(this.name)
  }
  run() {
   console.log("run fast")
  }
  // 靜態(tài)方法，類調(diào)用
  static getGirl(){
    console.log("girl friend")
  }
}

// ES5
var _createClass = function() {
  function defineProperties(target, props) { 
      for (var i = 0; i < props.length; i++) { 
          var descriptor = props[i];
            // 枚舉
          descriptor.enumerable = descriptor.enumerable || false;
          // 可配置
          descriptor.configurable = true; 
      if ("value" in descriptor) 
        // 可寫
          descriptor.writable = true;
          
      Object.defineProperty(target, descriptor.key, descriptor); 
    } 
  } 
  return function(Constructor, protoProps, staticProps) { 
      if (protoProps) 
          defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) 
          defineProperties(Constructor, staticProps); 
      return Constructor; 
  }; 
}();

// 禁止 直接調(diào)用 Person()
function _classCallCheck(instance, Constructor) { 
    if (!(instance instanceof Constructor)) { 
        throw new TypeError("Cannot call a class as a function");
    }
}


var Person = function () {
  function Person(name, age) {
    _classCallCheck(this, Person);

    this.name = name;
    this.age = age;
  }

  _createClass(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }, {
    key: "run",
    value: function run() {
      console.log("run fast");
    }
  }], [{
    key: "getGirl",
    value: function getGirl() {
      console.log("girl friend");
    }
  }]);
  return Person;
}();

關(guān)于對象的enumerable、writable、configurable,可以看看Javascript properties are enumerable, writable and configurable

默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)

函數(shù)式編程的本質(zhì)，函數(shù)式編程中的函數(shù)這個(gè)術(shù)語不是指計(jì)算機(jī)中的函數(shù)，而是指數(shù)學(xué)中的函數(shù)，即自變量的映射。也就是說一個(gè)函數(shù)的值僅決定于函數(shù)參數(shù)的值，不依賴其他狀態(tài)。比如sqrt(x)函數(shù)計(jì)算x的平方根，只要x不變，無論什么時(shí)候調(diào)用，調(diào)用幾次，值都是不變的。
函數(shù)式的最主要的好處是不可變性帶來的。沒有可變的狀態(tài)，函數(shù)就是引用透明的沒有副作用。函數(shù)即不依賴外部的狀態(tài)也不修改外部的狀態(tài)，函數(shù)調(diào)用的結(jié)果不依賴調(diào)用的時(shí)間和位置，這樣寫的代碼容易進(jìn)行推理，不容易出錯(cuò)。這使得單元測試和調(diào)試更容易。

參考鏈接：
js函數(shù)式編程指南

回調(diào)地獄、代碼的可閱讀性和可維護(hù)性降低

直接上鏈接：如何給localStorage設(shè)置一個(gè)過期時(shí)間？

async function test() {
  console.log("Hello")
  let res = await sleep(1000)
  console.log(res)
}
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}
test()

參考鏈接：
JavaScript的sleep實(shí)現(xiàn)--Javascript異步編程學(xué)習(xí)

window._pt_lt = new Date().getTime();
window._pt_sp_2 = [];
_pt_sp_2.push("setAccount,2953009d");
var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
(function() {
  var atag = document.createElement("script");
  atag.type = "text/javascript";
  atag.async = true;
  atag.src = _protocol + "js.ptengine.cn/2953009d.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(atag, s);
})();

淺拷貝只是對指針的拷貝，拷貝后兩個(gè)指針指向同一個(gè)內(nèi)存空間，深拷貝不但對指針進(jìn)行拷貝，而且對指針指向的內(nèi)容進(jìn)行拷貝，經(jīng)深拷貝后的指針是指向兩個(gè)不同地址的指針。

參考鏈接：
js淺拷貝和深拷貝

推薦在循環(huán)對象屬性的時(shí)候，使用for...in,在遍歷數(shù)組的時(shí)候的時(shí)候使用for...of。

for…in…遍歷對象會遍歷出對象的所有可枚舉的屬性

for...in循環(huán)出的是key，for...of循環(huán)出的是value

注意，for...of是ES6新引入的特性。修復(fù)了ES5引入的for...in的不足

for...of不能循環(huán)普通的對象，需要通過和Object.keys()搭配使用

時(shí)間一樣。引用類型的變量都是堆內(nèi)存。堆內(nèi)存就像書架一樣，只要你知道書名，就能直接找到對應(yīng)的書。

var a = {b: 1} 存放在哪里？
var a = {b: {c: 1}}存放在哪里？
var a = {name: "前端開發(fā)"}; var b = a; a = null, 那么b輸出什么？

js變量可以用來保存兩種類型的值：基本類型值和引用類型值。在ES6之前共有6種數(shù)據(jù)類型：Undefined、Null、Boolean、Number，String和Object，其中前5種是基本類型值。

基本類型值在內(nèi)存中占據(jù)固定大小的空間，因此被保存在棧內(nèi)存中。

從一個(gè)變量向另一個(gè)變量復(fù)制基本類型的值，會創(chuàng)建這個(gè)值的一個(gè)副本。

引用類型的值是對象，保存在堆內(nèi)存中。

包含引用類型值的變量實(shí)際上包含的并不是對象本身，而是一個(gè)指向該對象的指針

理解隊(duì)列數(shù)據(jù)結(jié)構(gòu)的目的主要是為了清晰的明白事件循環(huán)（Event Loop）的機(jī)制到底是怎么回事。

1.執(zhí)行時(shí)間

window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

2.編寫個(gè)數(shù)不同

window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會執(zhí)行一個(gè) 
$(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行

3.簡化寫法

window.onload沒有簡化寫法 
$(document).ready(function(){})可以簡寫成$(function(){});

let arr = [1,1,3,4,3,5,6,8,6,5,8]
function get() {
    let num = 0;
    arr.forEach(item => {
        num = num^item // 異或運(yùn)算
    })
    console.log(num)
}
get()

js異或運(yùn)算符^小技巧

1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed