es6新特性(es6的新特性是什么)

es6新特性:const與let變量、模板字面量、解構、增強的對象字面量、for...of循環、展開運算符(...)、剩余參數(可變參數)、ES6箭頭函數、類的支持、字符串模板、iterator、generator、模塊、Symbols等。

const 與 let 變量

使用var帶來的麻煩:

functiongetClothing(isCold){if(isCold){varfreezing='Grabajacket!';}else{varhot='It'sashortskindofday.';console.log(freezing);}}

運行getClothing(false)后輸出的是undefined,這是因為執行function函數之前,所有變量都會被提升, 提升到函數作用域頂部.

let與const聲明的變量解決了這種問題,因為他們是塊級作用域, 在代碼塊(用{}表示)中使用let或const聲明變量, 該變量會陷入暫時性死區直到該變量的聲明被處理.

functiongetClothing(isCold){if(isCold){constfreezing='Grabajacket!';}else{consthot='It'sashortskindofday.';console.log(freezing);}}

運行getClothing(false)后輸出的是ReferenceError: freezing is not defined,因為 freezing 沒有在 else 語句、函數作用域或全局作用域內聲明,所以拋出 ReferenceError。

關于使用let與const規則:

• 使用let聲明的變量可以重新賦值,但是不能在同一作用域內重新聲明

• 使用const聲明的變量必須賦值初始化,但是不能在同一作用域類重新聲明也無法重新賦值.

模板字面量

在ES6之前,將字符串連接到一起的方法是+或者concat()方法,如

conststudent={name:'RichardKalehoff',guardian:'Mr.Kalehoff'};constteacher={name:'Mrs.Wilson',room:'N231'}letmessage=student.name+'pleasesee'+teacher.name+'in'+teacher.room+'topickupyourreportcard.';

模板字面量本質上是包含嵌入式表達式的字符串字面量.
模板字面量用倒引號 ( `` )(而不是單引號 ( '' ) 或雙引號( "" ))表示,可以包含用 ${expression} 表示的占位符

letmessage=`${student.name}pleasesee${teacher.name}in${teacher.room}topickupyourreportcard.`;

解構

在ES6中,可以使用解構從數組和對象提取值并賦值給獨特的變量

解構數組的值:

constpoint=[10,25,-34];const[x,y,z]=point;console.log(x,y,z);

Prints: 10 25 -34

[]表示被解構的數組, x,y,z表示要將數組中的值存儲在其中的變量, 在解構數組是, 還可以忽略值, 例如const[x,,z]=point,忽略y坐標.

解構對象中的值:

constgemstone={type:'quartz',color:'rose',karat:21.29};const{type,color,karat}=gemstone;console.log(type,color,karat);

花括號 { } 表示被解構的對象,type、color 和 karat 表示要將對象中的屬性存儲到其中的變量

對象字面量簡寫法

lettype='quartz';letcolor='rose';letcarat=21.29;constgemstone={type:type,color:color,carat:carat};console.log(gemstone);

使用和所分配的變量名稱相同的名稱初始化對象時如果屬性名稱和所分配的變量名稱一樣,那么就可以從對象屬性中刪掉這些重復的變量名稱。

lettype='quartz';letcolor='rose';letcarat=21.29;constgemstone={type,color,carat};console.log(gemstone);

簡寫方法的名稱:

constgemstone={type,color,carat,calculateWorth:function(){//將根據類型(type),顏色(color)和克拉(carat)計算寶石(gemstone)的價值}};

匿名函數被分配給屬性 calculateWorth,但是真的需要 function 關鍵字嗎?在 ES6 中不需要!

letgemstone={type,color,carat,calculateWorth(){...}};

for...of循環

for...of循環是最新添加到 JavaScript 循環系列中的循環。
它結合了其兄弟循環形式 for 循環和 for...in 循環的優勢,可以循環任何可迭代(也就是遵守可迭代協議)類型的數據。默認情況下,包含以下數據類型:String、Array、Map 和 Set,注意不包含 Object 數據類型(即 {})。默認情況下,對象不可迭代。

for循環

constdigits=[0,1,2,3,4,5,6,7,8,9];for(leti=0;i<digits.length;i++){console.log(digits[i]);}

for 循環的最大缺點是需要跟蹤計數器和退出條件。
雖然 for 循環在循環數組時的確具有優勢,但是某些數據結構不是數組,因此并非始終適合使用 loop 循環。

for...in循環

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constindexindigits){console.log(digits[index]);}

依然需要使用 index 來訪問數組的值

當你需要向數組中添加額外的方法(或另一個對象)時,for...in 循環會帶來很大的麻煩。因為 for...in 循環循環訪問所有可枚舉的屬性,意味著如果向數組的原型中添加任何其他屬性,這些屬性也會出現在循環中。

Array.prototype.decimalfy=function(){for(leti=0;i<this.length;i++){this[i]=this[i].toFixed(2);}};constdigits=[0,1,2,3,4,5,6,7,8,9];for(constindexindigits){console.log(digits[index]);}

forEach 循環 是另一種形式的 JavaScript 循環。但是,forEach() 實際上是數組方法,因此只能用在數組中。也無法停止或退出 forEach 循環。如果希望你的循環中出現這種行為,則需要使用基本的 for 循環。

for...of循環
for...of 循環用于循環訪問任何可迭代的數據類型。
for...of 循環的編寫方式和 for...in 循環的基本一樣,只是將 in 替換為 of,可以忽略索引。

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constdigitofdigits){console.log(digit);}

建議使用復數對象名稱來表示多個值的集合。這樣,循環該集合時,可以使用名稱的單數版本來表示集合中的單個值。例如,for (const button of buttons) {…}。

for...of 循環還具有其他優勢,解決了 for 和 for...in 循環的不足之處。你可以隨時停止或退出 for...of 循環。

for(constdigitofdigits){if(digit%2===0){continue;}console.log(digit);}

不用擔心向對象中添加新的屬性。for...of 循環將只循環訪問對象中的值。

Array.prototype.decimalfy=function(){for(i=0;i<this.length;i++){this[i]=this[i].toFixed(2);}};constdigits=[0,1,2,3,4,5,6,7,8,9];for(constdigitofdigits){console.log(digit);}

展開運算符

展開運算符(用三個連續的點 (...) 表示)是 ES6 中的新概念,使你能夠將字面量對象展開為多個元素

constbooks=["DonQuixote","TheHobbit","AliceinWonderland","TaleofTwoCities"];console.log(...books);

Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities

展開運算符的一個用途是結合數組。

如果你需要結合多個數組,在有展開運算符之前,必須使用 Array的 concat() 方法。

constfruits=["apples","bananas","pears"];constvegetables=["corn","potatoes","carrots"];constproduce=fruits.concat(vegetables);console.log(produce);

Prints: ["apples", "bananas", "pears", "corn", "potatoes", "carrots"]

使用展開符來結合數組

constfruits=["apples","bananas","pears"];constvegetables=["corn","potatoes","carrots"];constproduce=[...fruits,...vegetables];console.log(produce);

剩余參數(可變參數)

使用展開運算符將數組展開為多個元素, 使用剩余參數可以將多個元素綁定到一個數組中.
剩余參數也用三個連續的點 ( ... ) 表示,使你能夠將不定數量的元素表示為數組.

用途1: 將變量賦數組值時:

constorder=[20.17,18.67,1.50,"cheese","eggs","milk","bread"];const[total,subtotal,tax,...items]=order;console.log(total,subtotal,tax,items);

用途2: 可變參數函數
對于參數不固定的函數,ES6之前是使用參數對象(arguments)處理:

functionsum(){lettotal=0;for(constargumentofarguments){total+=argument;}returntotal;}

在ES6中使用剩余參數運算符則更為簡潔,可讀性提高:

functionsum(...nums){lettotal=0;for(constnumofnums){total+=num;}returntotal;}

ES6箭頭函數

ES6之前,使用普通函數把其中每個名字轉換為大寫形式:

constupperizedNames=['Farrin','Kagure','Asser'].map(function(name){returnname.toUpperCase();});

箭頭函數表示:

constupperizedNames=['Farrin','Kagure','Asser'].map(name=>name.toUpperCase());

普通函數可以是函數聲明或者函數表達式, 但是箭頭函數始終都是表達式, 全程是箭頭函數表達式, 因此因此僅在表達式有效時才能使用,包括:

• 存儲在變量中,

• 當做參數傳遞給函數,

• 存儲在對象的屬性中。

constgreet=name=>`Hello${name}!`;

可以如下調用:

greet('Asser');

如果函數的參數只有一個,不需要使用()包起來,但是只有一個或者多個, 則必須需要將參數列表放在圓括號內:

//空參數列表需要括號constsayHi=()=>console.log('HelloUdacityStudent!');//多個參數需要括號constorderIceCream=(flavor,cone)=>console.log(`Here'syour${flavor}icecreamina${cone}cone.`);orderIceCream('chocolate','waffle');

一般箭頭函數都只有一個表達式作為函數主題:

constupperizedNames=['Farrin','Kagure','Asser'].map(name=>name.toUpperCase());

這種函數表達式形式稱為簡寫主體語法:

• 在函數主體周圍沒有花括號,

• 自動返回表達式

但是如果箭頭函數的主體內需要多行代碼, 則需要使用常規主體語法:

• 它將函數主體放在花括號內

• 需要使用 return 語句來返回內容。

constupperizedNames=['Farrin','Kagure','Asser'].map(name=>{name=name.toUpperCase();return`${name}has${name.length}charactersintheirname`;});

javascript標準函數this

1、new 對象

constmySundae=newSundae('Chocolate',['Sprinkles','HotFudge']);

sundae這個構造函數內的this的值是實例對象, 因為他使用new被調用.

2、指定的對象

constresult=obj1.printName.call(obj2);

函數使用call/apply被調用,this的值指向指定的obj2,因為call()第一個參數明確設置this的指向

3、上下`文對象

data.teleport();

函數是對象的方法, this指向就是那個對象,此處this就是指向data.

4、全局對象或 undefined

teleport();

此處是this指向全局對象,在嚴格模式下,指向undefined.

javascript中this是很復雜的概念, 要詳細判斷this,請參考this豁然開朗

箭頭函數和this

對于普通函數, this的值基于函數如何被調用, 對于箭頭函數,this的值基于函數周圍的上下文, 換句話說,this的值和函數外面的this的值是一樣的.

functionIceCream(){this.scoops=0;}//為IceCream添加addScoop方法IceCream.prototype.addScoop=function(){setTimeout(function(){this.scoops++;console.log('scoopadded!');console.log(this.scoops);//undefined+1=NaNconsole.log(dessert.scoops);//0},500);};

標題

const dessert = new IceCream();
dessert.addScoop();

傳遞給 setTimeout() 的函數被調用時沒用到 new、call() 或 apply(),也沒用到上下文對象。意味著函數內的 this 的值是全局對象,不是 dessert 對象。實際上發生的情況是,創建了新的 scoops 變量(默認值為 undefined),然后遞增(undefined + 1 結果為 NaN);

解決此問題的方式之一是使用閉包(closure):

//構造函數functionIceCream(){this.scoops=0;}//為IceCream添加addScoop方法IceCream.prototype.addScoop=function(){constcone=this;//設置`this`給`cone`變量setTimeout(function(){cone.scoops++;//引用`cone`變量console.log('scoopadded!');console.log(dessert.scoops);//1},0.5);};constdessert=newIceCream();dessert.addScoop();

箭頭函數的作用正是如此, 將setTimeOut()的函數改為剪頭函數:

//構造函數functionIceCream(){this.scoops=0;}//為IceCream添加addScoop方法IceCream.prototype.addScoop=function(){setTimeout(()=>{//一個箭頭函數被傳遞給setTimeoutthis.scoops++;console.log('scoopadded!');console.log(dessert.scoops);//1},0.5);};constdessert=newIceCream();dessert.addScoop();

默認參數函數

functiongreet(name,greeting){name=(typeofname!=='undefined')?name:'Student';greeting=(typeofgreeting!=='undefined')?greeting:'Welcome';return`${greeting}${name}!`;}greet();//WelcomeStudent!greet('James');//WelcomeJames!greet('Richard','Howdy');//HowdyRichard!

greet() 函數中混亂的前兩行的作用是什么?它們的作用是當所需的參數未提供時,為函數提供默認的值。但是看起來很麻煩, ES6引入一種新的方式創建默認值, 他叫默認函數參數:

functiongreet(name='Student',greeting='Welcome'){return`${greeting}${name}!`;}greet();//WelcomeStudent!greet('James');//WelcomeJames!greet('Richard','Howdy');//HowdyRichard!

默認值與解構

1、默認值與解構數組

functioncreateGrid([width=5,height=5]){return`Generatesa${width}x${height}grid`;}

createGrid([]); // Generates a 5 x 5 grid
createGrid([2]); // Generates a 2 x 5 grid
createGrid([2, 3]); // Generates a 2 x 3 grid
createGrid([undefined, 3]); // Generates a 5 x 3 grid

createGrid() 函數預期傳入的是數組。它通過解構將數組中的第一項設為 width,第二項設為 height。如果數組為空,或者只有一項,那么就會使用默認參數,并將缺失的參數設為默認值 5。

但是存在一個問題:

createGrid();//throwsanerror

Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

出現錯誤,因為 createGrid() 預期傳入的是數組,然后對其進行解構。因為函數被調用時沒有傳入數組,所以出現問題。但是,我們可以使用默認的函數參數!

functioncreateGrid([width=5,height=5]=[]){return`Generatingagridof${width}by${height}`;}createGrid();//Generatesa5x5grid

Returns: Generates a 5 x 5 grid

2、默認值與解構函數

就像使用數組默認值解構數組一樣,函數可以讓對象成為一個默認參數,并使用對象解構:

functioncreateSundae({scoops=1,toppings=['HotFudge']}={}){constscoopText=scoops===1?'scoop':'scoops';return`Yoursundaehas${scoops}${scoopText}with${toppings.join('and')}toppings.`;}createSundae({});//Yoursundaehas1scoopwithHotFudgetoppings.createSundae({scoops:2});//Yoursundaehas2scoopswithHotFudgetoppings.createSundae({scoops:2,toppings:['Sprinkles']});//Yoursundaehas2scoopswithSprinklestoppings.createSundae({toppings:['CookieDough']});//Yoursundaehas1scoopwithCookieDoughtoppings.createSundae();//Yoursundaehas1scoopwithHotFudgetoppings.

3、數組默認值與對象默認值

默認函數參數只是個簡單的添加內容,但是卻帶來很多便利!與數組默認值相比,對象默認值具備的一個優勢是能夠處理跳過的選項?？纯聪旅娴拇a:

functioncreateSundae({scoops=1,toppings=['HotFudge']}={}){…}

在 createSundae() 函數使用對象默認值進行解構時,如果你想使用 scoops 的默認值,但是更改 toppings,那么只需使用 toppings 傳入一個對象:

createSundae({toppings:['HotFudge','Sprinkles','Caramel']});

將上述示例與使用數組默認值進行解構的同一函數相對比。

functioncreateSundae([scoops=1,toppings=['HotFudge']]=[]){…}

對于這個函數,如果想使用 scoops 的默認數量,但是更改 toppings,則必須以這種奇怪的方式調用你的函數:

createSundae([undefined,['HotFudge','Sprinkles','Caramel']]);

因為數組是基于位置的,我們需要傳入 undefined 以跳過第一個參數(并使用默認值)來到達第二個參數。

Javascript類

ES5創建類:

functionPlane(numEngines){this.numEngines=numEngines;this.enginesActive=false;}//由所有實例"繼承"的方法Plane.prototype.startEngines=function(){console.log('startingengines...');this.enginesActive=true;};

ES6類只是一個語法糖,原型繼續實際上在底層隱藏起來, 與傳統類機制語言有些區別.

classPlane{//constructor方法雖然在類中,但不是原型上的方法,只是用來生成實例的.constructor(numEngines){this.numEngines=numEngines;this.enginesActive=false;}//原型上的方法,由所有實例對象共享.startEngines(){console.log('startingengines…');this.enginesActive=true;}}console.log(typeofPlane);//function

javascript中類其實只是function, 方法之間不能使用,,不用逗號區分屬性和方法.

靜態方法

要添加靜態方法,請在方法名稱前面加上關鍵字 static

classPlane{constructor(numEngines){this.numEngines=numEngines;this.enginesActive=false;}staticbadWeather(planes){for(planeofplanes){plane.enginesActive=false;}}startEngines(){console.log('startingengines…');this.enginesActive=true;}}

• 關鍵字class帶來其他基于類的語言的很多思想,但是沒有向javascript中添加此功能

• javascript類實際上還是原型繼承

• 創建javascript類的新實例時必須使用new關鍵字

super 和 extends

使用新的super和extends關鍵字擴展類:

classTree{constructor(size='10',leaves={spring:'green',summer:'green',fall:'orange',winter:null}){this.size=size;this.leaves=leaves;this.leafColor=null;}changeSeason(season){this.leafColor=this.leaves[season];if(season==='spring'){this.size+=1;}}}classMapleextendsTree{constructor(syrupQty=15,size,leaves){super(size,leaves);//super用作函數this.syrupQty=syrupQty;}changeSeason(season){super.changeSeason(season);//super用作對象if(season==='spring'){this.syrupQty+=1;}}gatherSyrup(){this.syrupQty-=3;}}

使用ES5編寫同樣功能的類:

functionTree(size,leaves){this.size=size||10;this.leaves=leaves||{spring:'green',summer:'green',fall:'orange',winter:null};this.leafColor;}Tree.prototype.changeSeason=function(season){this.leafColor=this.leaves[season];if(season==='spring'){this.size+=1;}}functionMaple(syrupQty,size,leaves){Tree.call(this,size,leaves);this.syrupQty=syrupQty||15;}Maple.prototype=Object.create(Tree.prototype);Maple.prototype.constructor=Maple;Maple.prototype.changeSeason=function(season){Tree.prototype.changeSeason.call(this,season);if(season==='spring'){this.syrupQty+=1;}}Maple.prototype.gatherSyrup=function(){this.syrupQty-=3;}

super 必須在 this 之前被調用

在子類構造函數中,在使用 this 之前,必須先調用超級類。

classApple{}classGrannySmithextendsApple{constructor(tartnessLevel,energy){this.tartnessLevel=tartnessLevel;//在'super'之前會拋出一個錯誤!super(energy);}}

字符串模板

字符串模板相對簡單易懂些。ES6中允許使用反引號 ` 來創建字符串,此種方法創建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。如果你使用過像C#等后端強類型語言的話,對此功能應該不會陌生。

//產生一個隨機數varnum=Math.random();//將這個數字輸出到consoleconsole.log(`yournumis${num}`);

iterator, generator

這一部分的內容有點生澀,詳情可以參見這里。以下是些基本概念。

• iterator:它是這么一個對象,擁有一個next方法,這個方法返回一個對象{done,value},這個對象包含兩個屬性,一個布爾類型的done和包含任意值的value

• iterable: 這是這么一個對象,擁有一個obj[@@iterator]方法,這個方法返回一個iterator

• generator: 它是一種特殊的iterator。反的next方法可以接收一個參數并且返回值取決與它的構造函數(generator function)。generator同時擁有一個throw方法

• generator 函數: 即generator的構造函數。此函數內可以使用yield關鍵字。在yield出現的地方可以通過generator的next或throw方法向外界傳遞值。generator 函數是通過function*來聲明的

• yield 關鍵字:它可以暫停函數的執行,隨后可以再進進入函數繼續執行

模塊

在ES6標準中,JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規范中流行起來的,比如CommonJS和AMD模式。

將不同功能的代碼分別寫在不同文件中,各模塊只需導出公共接口部分,然后通過模塊的導入的方式可以在其他地方使用。下面的例子來自tutsplus:

//point.jsmodule"point"{exportclassPoint{constructor(x,y){publicx=x;publicy=y;}}}//myapp.js//聲明引用的模塊modulepointfrom"/point.js";//這里可以看出,盡管聲明了引用的模塊,還是可以通過指定需要的部分進行導入importPointfrom"point";varorigin=newPoint(0,0);console.log(origin);

Map,Set 和 WeakMap,WeakSet

這些是新加的集合類型,提供了更加方便的獲取屬性值的方法,不用像以前一樣用hasOwnProperty來檢查某個屬性是屬于原型鏈上的呢還是當前對象的。同時,在進行屬性值添加與獲取時有專門的get,set 方法。

下方代碼來自es6feature

//Setsvars=newSet();s.add("hello").add("goodbye").add("hello");s.size===2;s.has("hello")===true;//Mapsvarm=newMap();m.set("hello",42);m.set(s,34);m.get(s)==34;

有時候我們會把對象作為一個對象的鍵用來存放屬性值,普通集合類型比如簡單對象會阻止垃圾回收器對這些作為屬性鍵存在的對象的回收,有造成內存泄漏的危險。而WeakMap,WeakSet則更加安全些,這些作為屬性鍵的對象如果沒有別的變量在引用它們,則會被回收釋放掉,具體還看下面的例子。

正文代碼來自es6feature

//WeakMapsvarwm=newWeakMap();wm.set(s,{extra:42});wm.size===undefined//WeakSetsvarws=newWeakSet();ws.add({data:42});//因為添加到ws的這個臨時對象沒有其他變量引用它,所以ws不會保存它的值,也就是說這次添加其實沒有意思

Proxies

Proxy可以監聽對象身上發生了什么事情,并在這些事情發生后執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力,同時在數據綁定方面也很有用處。

以下例子借用自這里。

//定義被偵聽的目標對象varengineer={name:'JoeSixpack',salary:50};//定義處理程序varinterceptor={set:function(receiver,property,value){console.log(property,'ischangedto',value);receiver[property]=value;}};//創建代理以進行偵聽engineer=Proxy(engineer,interceptor);//做一些改動來觸發代理engineer.salary=60;//控制臺輸出:salaryischangedto60

上面代碼我已加了注釋,這里進一步解釋。對于處理程序,是在被偵聽的對象身上發生了相應事件之后,處理程序里面的方法就會被調用,上面例子中我們設置了set的處理函數,表明,如果我們偵聽的對象的屬性被更改,也就是被set了,那這個處理程序就會被調用,同時通過參數能夠得知是哪個屬性被更改,更改為了什么值。

Symbols

我們知道對象其實是鍵值對的集合,而鍵通常來說是字符串。而現在除了字符串外,我們還可以用symbol這種值來做為對象的鍵。Symbol是一種基本類型,像數字,字符串還有布爾一樣,它不是一個對象。Symbol 通過調用symbol函數產生,它接收一個可選的名字參數,該函數返回的symbol是唯一的。之后就可以用這個返回值做為對象的鍵了。Symbol還可以用來創建私有屬性,外部無法直接訪問由symbol做為鍵的屬性值。

以下例子來自es6features

(function(){//創建symbolvarkey=Symbol("key");functionMyClass(privateData){this[key]=privateData;}MyClass.prototype={doStuff:function(){...this[key]...}};})();varc=newMyClass("hello")c["key"]===undefined//無法訪問該屬性,因為是私有的

Math,Number,String,Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來自es6features,對這些新API進行了簡單展示。

Number.EPSILONNumber.isInteger(Infinity)//falseNumber.isNaN("NaN")//falsemath.acosh(3)//1.762747174039086Math.hypot(3,4)//5Math.imul(Math.pow(2,32)-1,Math.pow(2,32)-2)//2"abcde".contains("cd")//true"abc".repeat(3)//"abcabcabc"Array.from(document.querySelectorAll('*'))//ReturnsarealArrayArray.of(1,2,3)//SimilartonewArray(...),butwithoutspecialone-argbehavior[0,0,0].fill(7,1)//[0,7,7][1,2,3].findIndex(x=>x==2)//1["a","b","c"].entries()//iterator[0,"a"],[1,"b"],[2,"c"]["a","b","c"].keys()//iterator0,1,2["a","b","c"].values()//iterator"a","b","c"Object.assign(Point,{origin:newPoint(0,0)})

Promises

Promises是處理異步操作的一種模式,之前在很多三方庫中有實現,比如jQuery的deferred 對象。當你發起一個異步請求,并綁定了.when(), .done()等事件處理程序時,其實就是在應用promise模式。

//創建promisevarpromise=newPromise(function(resolve,reject){//進行一些異步或耗時操作if(/*如果成功*/){resolve("Stuffworked!");}else{reject(Error("Itbroke"));}});//綁定處理程序promise.then(function(result){//promise成功的話會執行這里console.log(result);//"Stuffworked!"},function(err){//promise失敗會執行這里console.log(err);//Error:"Itbroke"});