當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ES6新特性（转）

發布時間：2024/4/15 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 ES6新特性（转）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文基于lukehoban/es6features?，同時參考了大量博客資料，具體見文末引用。

ES6（ECMAScript?6）是即將到來的新版本JavaScript語言的標準，代號harmony(和諧之意，顯然沒有跟上我國的步伐，我們已經進入中國夢版本了)。上一次標準的制訂還是2009年出臺的ES5。目前ES6的標準化工作正在進行中，預計會在14年12月份放出正式敲定的版本。但大部分標準已經就緒，且各瀏覽器對ES6的支持也正在實現中。要查看ES6的支持情況請點此。

目前想要運行ES6代碼的話，可以用google/traceur-compiler將代碼轉譯。點此訪問traceur-compiler 在線版本時實編輯ES6代碼并查看轉換后的結果，代碼運行結果會在console顯示。

另外，關于Google Traceur，業界大神Addy Osmani利用前者寫了個Chrome插件ES6 Tepl，安裝后也可以進行ES6的測試。

當然，并不是所有ES6新特性都被實現了，所以上面的方法可以測試大部分，有一些還是無法測試的。

雖然ES6都還沒真正發布，但已經有用ES6重寫的程序了，各種關于ES789的提議已經開始了，這你敢信。潮流不是我等大眾所能追趕的。

潮流雖然太快，但我們不停下學習的步伐，就不會被潮流丟下的，下面來領略下ES6中新特性，一堵新生代JS的風采。

箭頭操作符

如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。

我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符后可以方便地寫回調了。請看下面的例子。

var array = [1, 2, 3]; //傳統寫法 array.forEach(function(v, i, a) {console.log(v); }); //ES6 array.forEach(v = > console.log(v));

大家可以打開文章開頭提到的traceur在線代碼轉譯頁面輸入代碼來查看效果。

類的支持

ES6中添加了對類的支持，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到，現在終于派上用場了）。JS本身就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持后，對象的創建，繼承更加直觀了，并且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化。

下面代碼展示了類在ES6中的使用。再次啰嗦一句，你可以將代碼貼到traceur自己查看運行結果。

//類的定義 class Animal {//ES6中新型構造器constructor(name) {this.name = name;}//實例方法sayName() {console.log('My name is '+this.name);} } //類的繼承 class Programmer extends Animal {constructor(name) {//直接調用父類構造器進行初始化super(name);}program() {console.log("I'm coding...");} } //測試我們的類 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//輸出 ‘My name is dummy’ wayou.sayName();//輸出 ‘My name is wayou’ wayou.program();//輸出 ‘I'm coding...’

增強的對象字面量

對象字面量被增強了，寫法更加簡潔與靈活，同時在定義對象的時候能夠做的事情更多了。具體表現在：

可以在對象字面量里面定義原型
定義方法可以不用function關鍵字
直接調用父類方法

這樣一來，對象字面量與前面提到的類概念更加吻合，在編寫面向對象的JavaScript時更加輕松方便了。

//通過對象字面量創建對象 var human = {breathe() {console.log('breathing...');} }; var worker = {__proto__: human, //設置此對象的原型為human,相當于繼承humancompany: 'freelancer',work() {console.log('working...');} }; human.breathe();//輸出 ‘breathing...’ //調用繼承來的breathe方法 worker.breathe();//輸出 ‘breathing...’

字符串模板

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

//產生一個隨機數 var num=Math.random(); //將這個數字輸出到console console.log(`your num is ${num}`);

解構

自動解析數組或對象中的值。比如若一個函數要返回多個值，常規的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然后數組中的值會自動被解析到對應接收該值的變量中。

var [x,y]=getVal(),//函數返回值的解構[name,,age]=['wayou','male','secrect'];//數組解構function getVal() {return [ 1, 2 ]; }console.log('x:'+x+', y:'+y);//輸出：x:1, y:2 console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect

參數默認值，不定參數，拓展參數

默認參數值

現在可以在定義函數的時候指定參數的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變量來達到這一目的。不定參數的格式是三個句點后跟代表所有不定參數的變量名。比如下面這個例子中，…x代表了所有傳入add函數的參數。

//將所有參數相加的函數 function add(...x){return x.reduce((m,n)=>m+n); } //傳遞任意個數的參數 console.log(add(1,2,3));//輸出：6 console.log(add(1,2,3,4,5));//輸出：15

拓展參數

拓展參數則是另一種形式的語法糖，它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

let與const 關鍵字

可以把let看成var，只是它定義的變量被限定在了特定范圍內才能使用，而離開這個范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1 console.log(i);//輸出：undefined,嚴格模式下會報錯

for of 值遍歷

我們都知道for in?循環用于遍歷數組，類數組或對象，ES6中新引入的for of循環功能相似，不同的是每次循環它提供的不是序號而是值。

var someArray = [ "a", "b", "c" ];for (v of someArray) {console.log(v);//輸出 a,b,c }

注意，此功能google traceur并未實現，所以無法模擬調試,下面有些功能也是如此

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.js module "point" {export class Point {constructor (x, y) {public x = x;public y = y;}} }// myapp.js //聲明引用的模塊 module point from "/point.js"; //這里可以看出，盡管聲明了引用的模塊，還是可以通過指定需要的部分進行導入 import Point from "point";var origin = new Point(0, 0); console.log(origin);

Map，Set 和 WeakMap，WeakSet

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

下方代碼來自es6feature

// Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true;// Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34;

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

正文代碼來自es6feature

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

Proxies

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

以下例子借用自這里。

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

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

Symbols

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

以下例子來自es6features

Math，Number，String，Object 的新API

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

Number.EPSILON Number.isInteger(Infinity) // false Number.isNaN("NaN") // falseMath.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2"abcde".contains("cd") // true "abc".repeat(3) // "abcabcabc"Array.from(document.querySelectorAll('*')) // Returns a real Array Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior [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() // iterator 0, 1, 2 ["a", "b", "c"].values() // iterator "a", "b", "c"Object.assign(Point, { origin: new Point(0,0) })

Promises

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

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

總結

總結就是一句話，前后端差異越來越小了。

<div id="topics"><div class="post"><h1 class="postTitle"><a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/Wayou/p/es6_new_features.html">ES6新特性概覽</a></h1><div class="clear"></div><div class="postBody"><div id="cnblogs_post_body" class="blogpost-body">本文基于<a href="https://github.com/lukehoban" target="_blank">lukehoban</a>/<a href="https://github.com/lukehoban/es6features" target="_blank">es6features</a> ，同時參考了大量博客資料，具體見文末引用。ES6（<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCoQFjAA&url=%68%74%74%70%3a%2f%2f%65%6e%2e%77%69%6b%69%70%65%64%69%61%2e%6f%72%67%2f%77%69%6b%69%2f%45%43%4d%41%53%63%72%69%70%74&ei=Q99JU5jwAoGC8gWq9YDoCQ&usg=AFQjCNGgS-TjEL_-efubqc1RnkUfmn6wew&sig2=Kx2DkQ1Qtv0Wu2E_v_fwGQ&bvm=bv.64542518,d.dGc" target="_blank">ECMAScript</a> 6）是即將到來的新版本JavaScript語言的標準，代號harmony(和諧之意，顯然沒有跟上我國的步伐，我們已經進入中國夢版本了)。上一次標準的制訂還是2009年出臺的ES5。目前ES6的標準化工作正在進行中，預計會在14年12月份放出正式敲定的版本。但大部分標準已經就緒，且各瀏覽器對ES6的支持也正在實現中。要查看ES6的支持情況請<a href="http://kangax.github.io/es5-compat-table/es6/" target="_blank">點此</a>。目前想要運行ES6代碼的話，可以用<a href="https://github.com/google" target="_blank">google</a>/<a href="https://github.com/google/traceur-compiler" target="_blank">traceur-compiler</a>將代碼轉譯。<a href="http://google.github.io/traceur-compiler/demo/repl.html" target="_blank">點此</a>訪問traceur-compiler 在線版本時實編輯ES6代碼并查看轉換后的結果，代碼運行結果會在console顯示。另外，關于Google Traceur，業界大神<a href="https://plus.google.com/+AddyOsmani" target="_blank">Addy Osmani</a>利用前者寫了個Chrome插件<a href="https://chrome.google.com/webstore/detail/es6-repl/alploljligeomonipppgaahpkenfnfkn" target="_blank">ES6 Tepl</a>，安裝后也可以進行ES6的測試。當然，并不是所有ES6新特性都被實現了，所以上面的方法可以測試大部分，有一些還是無法測試的。雖然ES6都還沒真正發布，但已經有用<a href="http://blog.tastejs.com/rewriting-a-webapp-with-ecmascript-6" target="_blank">ES6重寫的程序</a>了，各種關于ES789的提議已經開始了，這你敢信。潮流不是我等大眾所能追趕的。潮流雖然太快，但我們不停下學習的步伐，就不會被潮流丟下的，下面來領略下ES6中新特性，一堵新生代JS的風采。<h1>箭頭操作符</h1>如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符后可以方便地寫回調了。請看下面的例子。<div class="highlight" style="background: #272822;"><pre>var array = [1, 2, 3];//傳統寫法array.forEach(function(v, i, a) {? ? console.log(v);});//ES6array.forEach(v = > console.log(v));</pre></div>大家可以打開文章開頭提到的traceur在線代碼轉譯頁面輸入代碼來查看效果。<h1>類的支持</h1>ES6中添加了對類的支持，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到，現在終于派上用場了）。JS本身就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持后，對象的創建，繼承更加直觀了，并且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化。下面代碼展示了類在ES6中的使用。再次啰嗦一句，你可以將代碼貼到<a href="http://google.github.io/traceur-compiler/demo/repl.html" target="_blank">traceur</a>自己查看運行結果。<div class="highlight" style="background: #272822;"><pre>//類的定義class Animal {//ES6中新型構造器? ? constructor(name) {? ? ? ? this.name = name;? ? }? ? //實例方法? ? sayName() {? ? ? ? console.log('My name is '+this.name);? ? }}//類的繼承class Programmer extends Animal {? ? constructor(name) {? ? //直接調用父類構造器進行初始化? ? ? ? super(name);? ? }? ? program() {? ? ? ? console.log("I'm coding...");? ? }}//測試我們的類var animal=new Animal('dummy'),wayou=new Programmer('wayou');animal.sayName();//輸出 ‘My name is dummy’wayou.sayName();//輸出 ‘My name is wayou’wayou.program();//輸出 ‘I'm coding...’</pre></div> <h1>增強的對象字面量</h1>對象字面量被增強了，寫法更加簡潔與靈活，同時在定義對象的時候能夠做的事情更多了。具體表現在：<ul><li>可以在對象字面量里面定義原型</li><li>定義方法可以不用function關鍵字</li><li>直接調用父類方法</li></ul>這樣一來，對象字面量與前面提到的類概念更加吻合，在編寫面向對象的JavaScript時更加輕松方便了。<div class="highlight" style="background: #272822;"><pre>//通過對象字面量創建對象var human = {? ? breathe() {? ? ? ? console.log('breathing...');? ? }};var worker = {? ? __proto__: human, //設置此對象的原型為human,相當于繼承human? ? company: 'freelancer',? ? work() {? ? ? ? console.log('working...');? ? }};human.breathe();//輸出 ‘breathing...’//調用繼承來的breathe方法worker.breathe();//輸出 ‘breathing...’</pre></div> <h1>字符串模板</h1>字符串模板相對簡單易懂些。ES6中允許使用反引號 ` 來創建字符串，此種方法創建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。如果你使用過像C#等后端強類型語言的話，對此功能應該不會陌生。<div class="highlight" style="background: #272822;"><pre>//產生一個隨機數var num=Math.random();//將這個數字輸出到consoleconsole.log(`your num is ${num}`);</pre></div><h1>解構</h1>自動解析數組或對象中的值。比如若一個函數要返回多個值，常規的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然后數組中的值會自動被解析到對應接收該值的變量中。<div class="highlight" style="background: #272822;"><pre>var [x,y]=getVal(),//函數返回值的解構? ? [name,,age]=['wayou','male','secrect'];//數組解構
function getVal() {? ? return [ 1, 2 ];}
console.log('x:'+x+', y:'+y);//輸出：x:1, y:2 console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect </pre></div><h1>參數默認值，不定參數，拓展參數</h1><h2>默認參數值</h2>現在可以在定義函數的時候指定參數的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。<div class="highlight" style="background: #272822;"><pre>function sayHello(name){//傳統的指定默認參數的方式var name=name||'dude';console.log('Hello '+name);}//運用ES6的默認參數function sayHello2(name='dude'){console.log(`Hello ${name}`);}sayHello();//輸出：Hello dudesayHello('Wayou');//輸出：Hello WayousayHello2();//輸出：Hello dudesayHello2('Wayou');//輸出：Hello Wayou</pre></div> <h2>不定參數</h2>不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變量來達到這一目的。不定參數的格式是三個句點后跟代表所有不定參數的變量名。比如下面這個例子中，…x代表了所有傳入add函數的參數。<div class="highlight" style="background: #272822;"><pre>//將所有參數相加的函數function add(...x){return x.reduce((m,n)=>m+n);}//傳遞任意個數的參數console.log(add(1,2,3));//輸出：6console.log(add(1,2,3,4,5));//輸出：15</pre></div> <h2>拓展參數</h2>拓展參數則是另一種形式的語法糖，它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。<div class="highlight" style="background: #272822;"><pre>var people=['Wayou','John','Sherlock'];//sayHello函數本來接收三個單獨的參數人妖，人二和人三function sayHello(people1,people2,people3){console.log(`Hello ${people1},${people2},${people3}`);}//但是我們將一個數組以拓展參數的形式傳遞，它能很好地映射到每個單獨的參數sayHello(...people);//輸出：Hello Wayou,John,Sherlock 
//而在以前，如果需要傳遞數組當參數，我們需要使用函數的apply方法sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock </pre></div><h1>let與const 關鍵字</h1>可以把let看成var，只是它定義的變量被限定在了特定范圍內才能使用，而離開這個范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。<div class="highlight" style="background: #272822;"><pre>for (let i=0;i<2;i++)console.log(i);//輸出: 0,1console.log(i);//輸出：undefined,嚴格模式下會報錯</pre></div><h1>for of 值遍歷</h1>我們都知道for in 循環用于遍歷數組，類數組或對象，ES6中新引入的for of循環功能相似，不同的是每次循環它提供的不是序號而是值。<div class="highlight" style="background: #272822;"><pre>var someArray = [ "a", "b", "c" ];?for (v of someArray) {? ? console.log(v);//輸出 a,b,c}</pre></div>注意，此功能google traceur并未實現，所以無法模擬調試,下面有些功能也是如此<h1>iterator, generator</h1>這一部分的內容有點生澀，詳情可以參見<a href="http://domenic.me/2013/09/06/es6-iterators-generators-and-iterables/" target="_blank">這里</a>。以下是些基本概念。<ul><li>iterator:它是這么一個對象，擁有一個next方法，這個方法返回一個對象{done,value}，這個對象包含兩個屬性，一個布爾類型的done和包含任意值的value</li><li>iterable: 這是這么一個對象，擁有一個obj[@@iterator]方法，這個方法返回一個iterator</li><li>generator: 它是一種特殊的iterator。反的next方法可以接收一個參數并且返回值取決與它的構造函數（generator function）。generator同時擁有一個throw方法</li><li>generator 函數: 即generator的構造函數。此函數內可以使用yield關鍵字。在yield出現的地方可以通過generator的next或throw方法向外界傳遞值。generator 函數是通過function*來聲明的</li><li>yield 關鍵字：它可以暫停函數的執行，隨后可以再進進入函數繼續執行</li></ul><h1>模塊</h1>在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規范中流行起來的，比如CommonJS和AMD模式。將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共接口部分，然后通過模塊的導入的方式可以在其他地方使用。下面的例子來自<a href="http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175" target="_blank">tutsplus</a>:<div class="highlight" style="background: #272822;"><pre>// point.jsmodule "point" {? ? export class Point {? ? ? ? constructor (x, y) {? ? ? ? ? ? public x = x;? ? ? ? ? ? public y = y;? ? ? ? }? ? }}?// myapp.js//聲明引用的模塊module point from "/point.js";//這里可以看出，盡管聲明了引用的模塊，還是可以通過指定需要的部分進行導入import Point from "point";?var origin = new Point(0, 0);console.log(origin);</pre></div><h1>Map，Set 和 WeakMap，WeakSet</h1>這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬于原型鏈上的呢還是當前對象的。同時，在進行屬性值添加與獲取時有專門的get，set 方法。下方代碼來自<a href="https://github.com/lukehoban/es6features" target="_blank">es6feature</a><div class="highlight" style="background: #272822;"><pre>// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;
// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;</pre></div>有時候我們會把對象作為一個對象的鍵用來存放屬性值，普通集合類型比如簡單對象會阻止垃圾回收器對這些作為屬性鍵存在的對象的回收，有造成內存泄漏的危險。而WeakMap,WeakSet則更加安全些，這些作為屬性鍵的對象如果沒有別的變量在引用它們，則會被回收釋放掉，具體還看下面的例子。正文代碼來自<a href="https://github.com/lukehoban/es6features" target="_blank">es6feature</a><div class="highlight" style="background: #272822;"><pre>// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined
// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });//因為添加到ws的這個臨時對象沒有其他變量引用它，所以ws不會保存它的值，也就是說這次添加其實沒有意思</pre></div> <h1>Proxies</h1>Proxy可以監聽對象身上發生了什么事情，并在這些事情發生后執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數據綁定方面也很有用處。以下例子借用自<a href="http://ariya.ofilabs.com/2013/07/es6-and-proxy.html" target="_blank">這里</a>。<code> </code><div class="highlight" style="background: #272822;"><pre>//定義被偵聽的目標對象var engineer = { name: 'Joe Sixpack', salary: 50 };//定義處理程序var interceptor = {? set: function (receiver, property, value) {? ? console.log(property, 'is changed to', value);? ? receiver[property] = value;? }};//創建代理以進行偵聽engineer = Proxy(engineer, interceptor);//做一些改動來觸發代理engineer.salary = 60;//控制臺輸出：salary is changed to 60</pre></div>上面代碼我已加了注釋，這里進一步解釋。對于處理程序，是在被偵聽的對象身上發生了相應事件之后，處理程序里面的方法就會被調用，上面例子中我們設置了set的處理函數，表明，如果我們偵聽的對象的屬性被更改，也就是被set了，那這個處理程序就會被調用，同時通過參數能夠得知是哪個屬性被更改，更改為了什么值。<h1>Symbols</h1>我們知道對象其實是鍵值對的集合，而鍵通常來說是字符串。而現在除了字符串外，我們還可以用symbol這種值來做為對象的鍵。Symbol是一種基本類型，像數字，字符串還有布爾一樣，它不是一個對象。Symbol 通過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是唯一的。之后就可以用這個返回值做為對象的鍵了。Symbol還可以用來創建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。以下例子來自<a href="https://github.com/lukehoban/es6features" target="_blank">es6features</a><div class="highlight" style="background: #272822;"><pre>(function() {
? // 創建symbol? var key = Symbol("key");
? function MyClass(privateData) {? ? this[key] = privateData;? }
? MyClass.prototype = {? ? doStuff: function() {? ? ? ... this[key] ...? ? }? };
})();
var c = new MyClass("hello")c["key"] === undefined//無法訪問該屬性，因為是私有的</pre></div> <h1>Math，Number，String，Object 的新API</h1>對Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來自es6features，對這些新API進行了簡單展示。<div class="highlight" style="background: #272822;"><pre>Number.EPSILONNumber.isInteger(Infinity) // falseNumber.isNaN("NaN") // false
Math.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('*')) // Returns a real ArrayArray.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior[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() // iterator 0, 1, 2["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })</pre></div> <h1>Promises</h1>Promises是處理異步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的<a href="http://api.jquery.com/category/deferred-object/" target="_blank">deferred</a> 對象。當你發起一個異步請求，并綁定了.when(), .done()等事件處理程序時，其實就是在應用promise模式。<div class="highlight" style="background: #272822;"><pre>//創建promisevar promise = new Promise(function(resolve, reject) {? ? // 進行一些異步或耗時操作? ? if ( /*如果成功 */ ) {? ? ? ? resolve("Stuff worked!");? ? } else {? ? ? ? reject(Error("It broke"));? ? }});//綁定處理程序promise.then(function(result) {//promise成功的話會執行這里? ? console.log(result); // "Stuff worked!"}, function(err) {//promise失敗會執行這里? ? console.log(err); // Error: "It broke"});</pre></div><h1>總結</h1>總結就是一句話，前后端差異越來越小了。<h1>REFERENCE</h1><ul><li>Google traceur online compiler <a href="http://google.github.io/traceur-compiler/demo/repl.html" target="_blank">http://google.github.io/traceur-compiler/demo/repl.html</a></li><li>array destruction <a href="http://ariya.ofilabs.com/2013/02/es6-and-destructuring-assignment.html" target="_blank">http://ariya.ofilabs.com/2013/02/es6-and-destructuring-assignment.html</a></li><li>class <a href="http://www.joezimjs.com/javascript/javascript-prototypal-inheritance-and-what-es6-classes-have-to-say-about-it/" target="_blank">http://www.joezimjs.com/javascript/javascript-prototypal-inheritance-and-what-es6-classes-have-to-say-about-it/</a></li><li>enhanced object literal <a href="http://maximilianhoffmann.com/posts/object-based-javascript-in-es6" target="_blank">http://maximilianhoffmann.com/posts/object-based-javascript-in-es6</a></li><li>parameters <a href="http://globaldev.co.uk/2013/10/es6-part-4/" target="_blank">http://globaldev.co.uk/2013/10/es6-part-4/</a></li><li>let keyword <a href="http://globaldev.co.uk/2013/09/es6-part-2/" target="_blank">http://globaldev.co.uk/2013/09/es6-part-2/</a></li><li>for of iterator <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility</a></li><li>the Iterator protocol <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol</a></li><li>generators <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*</a></li><li>ES6 Iterators, Generators, and Iterables <a href="http://domenic.me/2013/09/06/es6-iterators-generators-and-iterables/" target="_blank">http://domenic.me/2013/09/06/es6-iterators-generators-and-iterables/</a></li><li>proxies <a href="http://ariya.ofilabs.com/2013/07/es6-and-proxy.html" target="_blank">http://ariya.ofilabs.com/2013/07/es6-and-proxy.html</a></li><li>symbols <a href="http://tc39wiki.calculist.org/es6/symbols/" target="_blank">http://tc39wiki.calculist.org/es6/symbols/</a></li><li>promise http://www.html5rocks.com/en/tutorials/es6/promises/</li><li>8 cool features in ES6 <a href="http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175" target="_blank">http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175</a> （此文章錯誤較多）</li></ul><a class="fastCom" id="fastCom" title="快速評論" href="#comment_form_container"></a></div><div id="MySignature" style="display: block;">Feel free to repost but keep the link to this page please!</div><div class="clear"></div><div id="blog_post_info_block"><div id="BlogPostCategory">分類: <a href="http://www.cnblogs.com/Wayou/category/467062.html" target="_blank">JavaScript</a></div><div id="EntryTag">標簽: <a href="http://www.cnblogs.com/Wayou/tag/javascript/">javascript</a>, <a href="http://www.cnblogs.com/Wayou/tag/es6/">es6</a>, <a href="http://www.cnblogs.com/Wayou/tag/ecmascript6/">ecmascript6</a>, <a href="http://www.cnblogs.com/Wayou/tag/harmony/">harmony</a></div><div id="blog_post_info"><div id="green_channel">? ? ? ? <a href="javascript:void(0);" id="green_channel_digg" οnclick="DiggIt(3663567,cb_blogId,1);green_channel_success(this,'謝謝推薦！');">好文要頂</a>? ? ? ? ? ? <a id="green_channel_follow" οnclick="follow('c5e8573b-1ed6-e111-aa3f-842b2b196315');" href="javascript:void(0);">關注我</a>? ? <a id="green_channel_favorite" οnclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏該文</a>? ? <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" οnclick="ShareToTsina()"><img src="//common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>? ? <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" οnclick="shareOnWechat()"><img src="//common.cnblogs.com/images/wechat.png" alt=""></a></div><div id="author_profile">? ? <div id="author_profile_info" class="author_profile_info">? ? ? ? ? ? <a href="http://home.cnblogs.com/u/Wayou/" target="_blank"><img src="//pic.cnblogs.com/face/431064/20140914104240.png" class="author_avatar" alt=""></a>? ? ? ? <div id="author_profile_detail" class="author_profile_info">? ? ? ? ? ? <a href="http://home.cnblogs.com/u/Wayou/">劉哇勇</a> ? ? ? ? ? ? <a href="http://home.cnblogs.com/u/Wayou/followees">關注 - 10</a> ? ? ? ? ? ? <a href="http://home.cnblogs.com/u/Wayou/followers">粉絲 - 2494</a>? ? ? ? </div>? ? </div>? ? <div class="clear"></div>? ? <div id="author_profile_honor">榮譽：<a href="http://www.cnblogs.com/expert/" target="_blank">推薦博客</a></div>? ? <div id="author_profile_follow">? ? ? ? ? ? ? ? <a href="javascript:void(0);" οnclick="follow('c5e8573b-1ed6-e111-aa3f-842b2b196315');return false;">+加關注</a>? ? </div></div><div id="div_digg">? ? <div class="diggit" οnclick="votePost(3663567,'Digg')">? ? ? ? 65? ? </div>? ? <div class="buryit" οnclick="votePost(3663567,'Bury')">? ? ? ? 0? ? </div>? ? <div class="clear"></div>? ? <div class="diggword" id="digg_tips">? ? </div></div></div><div class="clear"></div><div id="post_next_prev"><a href="http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html" class="p_n_p_prefix">? </a> 上一篇：<a href="http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html" title="發布于2014-04-10 19:58">前端不為人知的一面--前端冷知識集錦</a> <a href="http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext_style.html" class="p_n_p_prefix">? </a> 下一篇：<a href="http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext_style.html" title="發布于2014-04-14 17:24">如何在博客中使用SublimeText風格的代碼高亮樣式</a> </div></div>

</div><div class="postDesc">posted @ 2014-04-14 11:17 <a href="http://www.cnblogs.com/Wayou/">劉哇勇</a> 閱讀(184768) 評論(36) ?<a href="https://i.cnblogs.com/EditPosts.aspx?postid=3663567" rel="nofollow">編輯</a> <a href="#" οnclick="AddToWz(3663567);return false;">收藏</a></div></div><script type="text/javascript">var allowComments=true,cb_blogId=123544,cb_entryId=3663567,cb_blogApp=currentBlogApp,cb_blogUserGuid='c5e8573b-1ed6-e111-aa3f-842b2b196315',cb_entryCreatedDate='2014/4/14 11:17:00';loadViewCount(cb_entryId);var cb_postType=1;</script></div>

轉載于:https://www.cnblogs.com/Vayne-N/p/8094680.html

總結

以上是生活随笔為你收集整理的ES6新特性（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

新特性

上一篇： elasticsearch 自定义rou
下一篇：团队冲刺个人总结7