日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
ES6：下一版本的JavaScript的新特性

你可能已經(jīng)聽(tīng)說(shuō)過(guò)EMCAScript6（ES6）了，這是下一個(gè)版本的Javascript，它包含了一些很棒的新特性。這些特性擁有不同程度的復(fù)雜性，對(duì)于簡(jiǎn)單的腳本和復(fù)雜的應(yīng)用程序都非常的有用。本文將盤(pán)點(diǎn)一些ES6的新特性，這些特性都可以用在你日常的編碼中。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的蟠龍網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

請(qǐng)注意，只有現(xiàn)代瀏覽器才能支持這些新的ES6特性，雖然瀏覽器的支持各不相同。如果你需要兼容那些不支持ES6新特性的舊瀏覽器，我也會(huì)談?wù)勱P(guān)于這方面的解決方案。

在本文中，大部分示例代碼都會(huì)帶有“運(yùn)行代碼”的鏈接，讀者可以點(diǎn)擊鏈接運(yùn)行示例。

變量

LET

通常我們使用var關(guān)鍵字來(lái)聲明變量，現(xiàn)在我們同樣可以使用let，它們之間的細(xì)微差別在于作用域。使用var聲明變量時(shí)，該變量的作用域是其最近的函數(shù)，而使用let聲明變量，它的作用域只在包含它的塊。

 
 
    
  
  
  1. if(true) {
    2. 
  
  
  2.    let x = 1;
    3. 
  
  
  3. }
    4. 
  
  
  4. console.log(x); // undefined
    5.

這樣可以讓代碼更加干凈整潔，可以減少無(wú)用的變量。

看看下面這個(gè)經(jīng)典的數(shù)組循環(huán)：

 
 
    
  
  
  1. for(let i = 0, l = list.length; i < l; i++) {
    2. 
  
  
  2.    // do something with list[i]
    3. 
  
  
  3. }
    4. 
  
  
  4. 
  
  
  5. console.log(i); // undefined
    6.

舉個(gè)例子，經(jīng)常會(huì)有人使用變量j在同一作用域中的另外一個(gè)循環(huán)中。但是使用let聲明變量，你可以很安全地再聲明一次，因?yàn)樗辉谧约簤K級(jí)作用域內(nèi)定義和有效。

CONST

聲明塊級(jí)作用域內(nèi)的變量的另一種方法是使用const。使用const，你可以聲明一個(gè)只讀的值，必須直接指定一個(gè)值，如果嘗試改變它的值或者沒(méi)有立即指定一個(gè)值，就會(huì)得到下面的錯(cuò)誤：

 
 
    
  
  
  1. const MY_CONSTANT = 1;
    2. 
  
  
  2. MY_CONSTANT = 2 // Error
    3. 
  
  
  3. const SOME_CONST; // Error
    4.

注意，你還是可以修改對(duì)象的屬性或者數(shù)組的成員

 
 
    
  
  
  1. const MY_CONSTANT = 1;
    2. 
  
  
  2. MY_CONSTANT = 2 // Error
    3. 
  
  
  3. const SOME_CONST; // Error
    4.

箭頭函數(shù)

箭頭函數(shù)對(duì)于Javascript來(lái)說(shuō)是一個(gè)非常棒的補(bǔ)充，它可以讓代碼更加精簡(jiǎn)。我們首先來(lái)介紹箭頭函數(shù)，在稍后的其他例子中就會(huì)使用到它的優(yōu)點(diǎn)。下面的代碼展示了一個(gè)箭頭函數(shù)和我們熟悉的ES5風(fēng)格的兩種寫(xiě)法的函數(shù)：

 
 
    
  
  
  1. const MY_CONSTANT = 1;
    2. 
  
  
  2. MY_CONSTANT = 2 // Error
    3. 
  
  
  3. const SOME_CONST; // Error
    4.

運(yùn)行代碼

我們來(lái)看看箭頭函數(shù)的語(yǔ)法，其中沒(méi)有function關(guān)鍵字，剩下的就是0個(gè)或多個(gè)參數(shù)、(=>)箭頭和函數(shù)表達(dá)式。注意：return語(yǔ)句將隱式地被添加進(jìn)來(lái)。

如果是0個(gè)或多個(gè)參數(shù)，必須添加括號(hào)：

 
 
    
  
  
  1. // No arguments
    2. 
  
  
  2. books.map( () => 1 ); // [1, 1]
    3. 
  
  
  3. // Multiple arguments
    4. 
  
  
  4. [1,2].map( (n, index) => n * index ); // [0, 2]
    5.

如果需要更多的邏輯或者空白區(qū)域，可以將函數(shù)表達(dá)式放在({…})塊中。

 
 
    
  
  
  1. let result = [1, 2, 3, 4, 5].map( n => {
    2. 
  
  
  2.    n = n % 3;
    3. 
  
  
  3.    return n;
    4. 
  
  
  4. });
    5.

運(yùn)行代碼

箭頭函數(shù)不僅僅意味著更少的字符，它的行為也不同于常規(guī)的函數(shù)。一個(gè)箭頭函數(shù)從它的外界上下文中繼承this和arguments關(guān)鍵字。這表示你 可以擺脫以前那些難看的語(yǔ)句，比如var that = this，而且不需要綁定函數(shù)到正確的上下文中。下面有一個(gè)例子（注意：this.title等同于ES5版本的that.title）：

 
 
    
  
  
  1. let book = {
    2. 
  
  
  2.    title: 'X',
    3. 
  
  
  3.    sellers: ['A', 'B'],
    4. 
  
  
  4.    printSellers() {
    5. 
  
  
  5.       this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));
    6. 
  
  
  6.    }
    7. 
  
  
  7. }
    8. 
  
  
  8. 
  
  
  9. // ES5 equivalent:
    10. 
  
  
  10. var book = {
    11. 
  
  
  11.    title: 'X',
    12. 
  
  
  12.    sellers: ['A', 'B'],
    13. 
  
  
  13.    printSellers: function() {
    14. 
  
  
  14.       var that = this;
    15. 
  
  
  15.       this.sellers.forEach(function(seller) {
    16. 
  
  
  16.          console.log(seller + ' sells ' + that.title)
    17. 
  
  
  17.       })
    18. 
  
  
  18.    }
    19. 
  
  
  19. }
    20.

運(yùn)行代碼

字符串

方法

String的prototype中添加了幾個(gè)方便的方法，大部分是indexOf方法的變通：

 
 
    
  
  
  1. 'my string'.startsWith('my'); //true
    2. 
  
  
  2. 'my string'.endsWith('my'); // false
    3. 
  
  
  3. 'my string'.includes('str'); // true
    4.

簡(jiǎn)單有效！另外，還添加了一個(gè)方便創(chuàng)建重復(fù)字符串的方法：

 
 
    
  
  
  1. 'my '.repeat(3); // 'my my my '
    2.

模板字符串

模板字符串提供了一個(gè)簡(jiǎn)潔的方式去創(chuàng)建字符串和實(shí)現(xiàn)字符串插值。你可能已經(jīng)熟悉了它的語(yǔ)法，模板字符串基于美元符號(hào)和花括號(hào) ${…}，并且要使用反引號(hào)(`)將其包圍。

下面是一個(gè)簡(jiǎn)單的演示：

 
 
    
  
  
  1. let name = 'John',
    2. 
  
  
  2.    apples = 5,
    3. 
  
  
  3.    pears = 7,
    4. 
  
  
  4.    bananas = function() { return 3; }
    5. 
  
  
  5. 
  
  
  6. console.log(`This is ${name}.`);
    7. 
  
  
  7. 
  
  
  8. console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);
    9. 
  
  
  9. 
  
  
  10. // ES5 equivalent:
    11. 
  
  
  11. console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');
    12.

上面的示例中，和ES5相比較，模板字符串僅僅只是方便字符串的串聯(lián)。模板字符串通常應(yīng)用于多行字符串，請(qǐng)記住，空白是字符串的一部分。

 
 
    
  
  
  1. let x = `1...
    2. 
  
  
  2. 2...
    3. 
  
  
  3. 3 lines long!`; // Yay
    4. 
  
  
  4. 
  
  
  5. // ES5 equivalents:
    6. 
  
  
  6. var x = "1...\n" +
    7. 
  
  
  7. "2...\n" +
    8. 
  
  
  8. "3 lines long!";
    9. 
  
  
  9. 
  
  
  10. var x = "1...\n2...\n3 lines long!";
    11.

數(shù)組

Array對(duì)象現(xiàn)在新增了一些靜態(tài)方法以及prototype上的一些方法。

第一、Array.from方法從類(lèi)數(shù)組或可迭代對(duì)象上創(chuàng)建Array的實(shí)例。類(lèi)數(shù)組對(duì)象的例子包括：

1、函數(shù)中的arguments對(duì)象
2、document.getElementsByTagName放回的一個(gè)nodeList對(duì)象
3、新的Map和Set數(shù)據(jù)結(jié)構(gòu)

 
 
    
  
  
  1. let itemElements = document.querySelectorAll('.items');
    2. 
  
  
  2. let items = Array.from(itemElements);
    3. 
  
  
  3. items.forEach(function(element) {
    4. 
  
  
  4.     console.log(element.nodeType)
    5. 
  
  
  5. });
    6. 
  
  
  6. 
  
  
  7. // A workaround often used in ES5:
    8. 
  
  
  8. let items = Array.prototype.slice.call(itemElements);
    9.

上面的示例中，可以看出items數(shù)組擁有forEach方法，但是在itemElements集合中，這個(gè)方法是不可用的。

Array.from有一個(gè)有趣的特性是它的第二個(gè)可選參數(shù)mapFunction，這個(gè)參數(shù)允許在單次調(diào)用中創(chuàng)建一個(gè)新的映射數(shù)組。

 
 
    
  
  
  1. let navElements = document.querySelectorAll('nav li');
    2. 
  
  
  2. let navTitles = Array.from(navElements, el => el.textContent);
    3.

第二、Array.of方法，這個(gè)方法的行為有點(diǎn)像Array的構(gòu)造函數(shù)，它修復(fù)了傳遞單個(gè)數(shù)字參數(shù)時(shí)的特殊情況，所以Array.of相比于new Array()更好。不過(guò)大多數(shù)情況下，我們推薦使用數(shù)組字面量。

 
 
    
  
  
  1. let x = new Array(3); // [undefined, undefined, undefined]
    2. 
  
  
  2. let y = Array.of(8); // [8]
    3. 
  
  
  3. let z = [1, 2, 3]; // Array literal
    4.

最后，Array的prototype中添加了幾個(gè)方法，其中的find方法我覺(jué)得Javascript開(kāi)發(fā)者將會(huì)非常喜歡。

1、find方法：獲取回調(diào)函數(shù)return true的第一個(gè)元素。
2、findIndex方法：獲取回調(diào)函數(shù)return true的第一個(gè)元素的索引
3、fill方法：根據(jù)給定的參數(shù)重寫(xiě)數(shù)組的元素

 
 
    
  
  
  1. [5, 1, 10, 8].find(n => n === 10) // 10
    2. 
  
  
  2. [5, 1, 10, 8].findIndex(n => n === 10) // 2
    3. 
  
  
  3. [0, 0, 0].fill(7) // [7, 7, 7]
    4. 
  
  
  4. [0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]
    5.

Math

Math對(duì)象也添加了幾個(gè)方法。

1、Math.sign 返回一個(gè)數(shù)字的符號(hào)，有1，-1或0三個(gè)值分別表示正值，負(fù)值或0
2、Math.trunc 返回一個(gè)數(shù)字去掉小數(shù)位數(shù)后的數(shù)
3、Math.cbrt 返回一個(gè)數(shù)字的立方根

 
 
    
  
  
  1. [5, 1, 10, 8].find(n => n === 10) // 10
    2. 
  
  
  2. [5, 1, 10, 8].findIndex(n => n === 10) // 2
    3. 
  
  
  3. [0, 0, 0].fill(7) // [7, 7, 7]
    4. 
  
  
  4. [0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]
    5.

如果你想要學(xué)習(xí)更多的新的Math內(nèi)容，點(diǎn)擊new number and math features in ES6。

擴(kuò)展操作符

擴(kuò)展操作符(…)是一個(gè)非常方便的語(yǔ)法，它用于在數(shù)組的特殊的地方擴(kuò)展元素，比如函數(shù)調(diào)用中的參數(shù)。下面展示一些例子來(lái)說(shuō)明它的用處。

首先，我們來(lái)看看如何通過(guò)另一個(gè)數(shù)組來(lái)擴(kuò)展數(shù)組的元素：

 
 
    
  
  
  1. let values = [1, 2, 4];
    2. 
  
  
  2. let some = [...values, 8]; // [1, 2, 4, 8]
    3. 
  
  
  3. let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]
    4. 
  
  
  4. // ES5 equivalent:
    5. 
  
  
  5. let values = [1, 2, 4];
    6. 
  
  
  6. // Iterate, push, sweat, repeat...
    7. 
  
  
  7. // Iterate, push, sweat, repeat...
    8.

當(dāng)使用參數(shù)調(diào)用函數(shù)時(shí)，擴(kuò)展操作符同樣非常強(qiáng)大。

 
 
    
  
  
  1. let values = [1, 2, 4];
    2. 
  
  
  2. doSomething(...values);
    3. 
  
  
  3. function doSomething(x, y, z) {
    4. 
  
  
  4.    // x = 1, y = 2, z = 4
    5. 
  
  
  5. }
    6. 
  
  
  6. // ES5 equivalent:
    7. 
  
  
  7. doSomething.apply(null, values);
    8.

正如你所看到的，這避免了我們經(jīng)常使用的fn.apply()這種委婉曲折的方式。擴(kuò)展操作符語(yǔ)法非常靈活，因?yàn)樗梢栽趨?shù)列表的任何地方使用，即下面的調(diào)用方式也會(huì)產(chǎn)生一樣的結(jié)果：

 
 
    
  
  
  1. let values = [2, 4];
    2. 
  
  
  2. doSomething(1, ...values);
    3.

我們已經(jīng)將擴(kuò)展操作符應(yīng)用到Array和arguents中了。實(shí)際上，所有的可迭代的對(duì)象都可以應(yīng)用擴(kuò)展操作符，比如NodeList：

 
 
    
  
  
  1. let form = document.querySelector('#my-form'),
    2. 
  
  
  2.    inputs = form.querySelectorAll('input'),
    3. 
  
  
  3.    selects = form.querySelectorAll('select');
    4. 
  
  
  4. let allTheThings = [form, ...inputs, ...selects];
    5.

現(xiàn)在allTheThings變成一個(gè)扁平的數(shù)組，其中包含form節(jié)點(diǎn)，input和select的子節(jié)點(diǎn)。

解構(gòu)

解構(gòu)提供了一個(gè)便捷的方式來(lái)從對(duì)象或數(shù)組中提取數(shù)據(jù)。下面給了一個(gè)使用數(shù)組的典型例子。

 
 
    
  
  
  1. let [x, y] = [1, 2]; // x = 1, y = 2
    2. 
  
  
  2. // ES5 equivalent:
    3. 
  
  
  3. var arr = [1, 2];
    4. 
  
  
  4. var x = arr[0];
    5. 
  
  
  5. var y = arr[1];
    6.

使用這種語(yǔ)法，可以一次性指定多個(gè)變量。還有另外一個(gè)作用是可以很簡(jiǎn)單的交換兩個(gè)變量值。

 
 
    
  
  
  1. let x = 1,
    2. 
  
  
  2.    y = 2;
    3. 
  
  
  3. [x, y] = [y, x]; // x = 2, y = 1
    4.

解構(gòu)也能用于對(duì)象上，要保證key值匹配。

 
 
    
  
  
  1. let obj = {x: 1, y: 2};
    2. 
  
  
  2. let {x, y} = obj; // x = 1, y = 2
    3.

也可以通過(guò)這個(gè)機(jī)制來(lái)修改變量的名稱(chēng)

 
 
    
  
  
  1. let obj = {x: 1, y: 2};
    2. 
  
  
  2. let {x: a, y: b} = obj; // a = 1, b = 2
    3.

還有另外一個(gè)有趣的用法是模擬多個(gè)返回值

 
 
    
  
  
  1. function doSomething() {
    2. 
  
  
  2.    return [1, 2]
    3. 
  
  
  3. }
    4. 
  
  
  4. let [x, y] = doSomething(); // x = 1, y = 2
    5.

解構(gòu)同樣也可以指定argument對(duì)象的默認(rèn)值，通過(guò)字面量對(duì)象，可以模擬命名參數(shù)。

 
 
    
  
  
  1. function doSomething({y = 1, z = 0}) {
    2. 
  
  
  2.    console.log(y, z);
    3. 
  
  
  3. }
    4. 
  
  
  4. doSomething({y: 2});
    5.

參數(shù)

默認(rèn)值

在ES6中，是可以給函數(shù)參數(shù)定義一個(gè)默認(rèn)值的，語(yǔ)法如下：

 
 
    
  
  
  1. function doSomething(x, y = 2) {
    2. 
  
  
  2.    return x * y;
    3. 
  
  
  3. }
    4. 
  
  
  4. doSomething(5); // 10
    5. 
  
  
  5. doSomething(5, undefined); // 10
    6. 
  
  
  6. doSomething(5, 3); // 15
    7.

這樣看起來(lái)就簡(jiǎn)潔多了，如果是ES5之前的寫(xiě)法，我們肯定要補(bǔ)充一些參數(shù)：

 
 
    
  
  
  1. function doSomething(x, y) {
    2. 
  
  
  2.    y = y === undefined ? 2 : y;
    3. 
  
  
  3.    return x * y;
    4. 
  
  
  4. }
    5.

undefined或者無(wú)參時(shí)將會(huì)觸發(fā)參數(shù)的默認(rèn)值。

剩余不定參數(shù)

我們已經(jīng)看過(guò)了擴(kuò)展操作符，不定參數(shù)與其非常相似。不定參數(shù)也使用…語(yǔ)法，它允許將函數(shù)末端的參數(shù)存儲(chǔ)在一個(gè)數(shù)組里面。

 
 
    
  
  
  1. function doSomething(x, ...remaining) {
    2. 
  
  
  2.    return x * remaining.length;
    3. 
  
  
  3. }
    4. 
  
  
  4. doSomething(5, 0, 0, 0); // 15
    5.

模塊

模塊是Javascript中非常受歡迎的一個(gè)補(bǔ)充，我認(rèn)為它是ES6中非常值得挖掘的一個(gè)特性。

現(xiàn)如今，任何重要的JS項(xiàng)目都會(huì)使用某種模塊系統(tǒng)-可能是“暴露型模塊模式”或者更廣泛的AMD和Common.js。但是，瀏覽器是沒(méi)有任何模塊 系統(tǒng)的特性的，總是需要為AMD或CommonJS模塊構(gòu)建加載模塊，處理這些的工具包括RequireJS，Browserify和Webpack。

ES6規(guī)范中同時(shí)包含了模塊中的語(yǔ)法和加載機(jī)制。如果你想要在以后使用模塊，應(yīng)該使用下面的語(yǔ)法?，F(xiàn)代的構(gòu)建工具可以通過(guò)插件支持這種格式，所以我們可以盡管去使用它。（不用擔(dān)心，我們?cè)诤竺娴摹癟ranspilation”章節(jié)中會(huì)討論這個(gè)問(wèn)題）。

現(xiàn)在，在ES6的模塊語(yǔ)法中，模塊被設(shè)計(jì)成使用export和import兩個(gè)關(guān)鍵字，我們來(lái)看看示例中的兩個(gè)模塊。

 
 
    
  
  
  1. // lib/math.js
    2. 
  
  
  2. export function sum(x, y) {
    3. 
  
  
  3.    return x + y;
    4. 
  
  
  4. }
    5. 
  
  
  5. export var pi = 3.141593;
    6. 
  
  
  6. 
  
  
  7. // app.js
    8. 
  
  
  8. import { sum, pi } from "lib/math";
    9. 
  
  
  9. console.log('2π = ' + sum(pi, pi));
    10.

如你所見(jiàn)，代碼中有多個(gè)export語(yǔ)句。每一個(gè)都必須顯式地聲明輸出的值，在這個(gè)例子中，就是function和var。

示例中的import語(yǔ)句使用了一個(gè)語(yǔ)法（類(lèi)似于解構(gòu)）來(lái)顯式地定義了輸出的內(nèi)容。要將整個(gè)模塊一起輸出，可以使用通配符“*”，結(jié)合as關(guān)鍵字給模塊一個(gè)本地名稱(chēng)。

 
 
    
  
  
  1. // app.js
    2. 
  
  
  2. import * as math from "lib/math";
    3. 
  
  
  3. console.log('2π = ' + math.sum(math.pi, math.pi));
    4.

模塊系統(tǒng)有一個(gè)默認(rèn)模塊，它也可以是函數(shù)。要導(dǎo)出模塊內(nèi)的默認(rèn)值，需要提供一個(gè)本地名稱(chēng)：

 
 
    
  
  
  1. // lib/my-fn.js
    2. 
  
  
  2. export default function() {
    3. 
  
  
  3.    console.log('echo echo');
    4. 
  
  
  4. }
    5. 
  
  
  5. // app.js
    6. 
  
  
  6. import doSomething from 'lib/my-fn';
    7. 
  
  
  7. doSomething();
    8.

注意：import語(yǔ)句是同步的，但是它會(huì)等到所有依賴(lài)的加載完畢才會(huì)執(zhí)行。

Classes

類(lèi)是ES6中討論得很多的一個(gè)特性。一些人類(lèi)違反了JS的原型性質(zhì)，而其他人覺(jué)得這降低了初學(xué)者和來(lái)自其他開(kāi)發(fā)語(yǔ)言的開(kāi)發(fā)者的入門(mén)門(mén)檻，并且能夠幫助他們編寫(xiě)大規(guī)模應(yīng)用。無(wú)論如何，它都是ES6中的一部分，我們簡(jiǎn)單地介紹一下。

我們通過(guò)class和constructor關(guān)鍵字構(gòu)建類(lèi)，下面是一個(gè)簡(jiǎn)短的示例：

 
 
    
  
  
  1. class Vehicle {
    2. 
  
  
  2.    constructor(name) {
    3. 
  
  
  3.       this.name = name;
    4. 
  
  
  4.       this.kind = 'vehicle';
    5. 
  
  
  5.    }
    6. 
  
  
  6.    getName() {
    7. 
  
  
  7.       return this.name;
    8. 
  
  
  8.    }  
    9. 
  
  
  9. }
    10. 
  
  
  10. // Create an instance
    11. 
  
  
  11. let myVehicle = new Vehicle('rocky');
    12.

注意：類(lèi)的定義并不是一個(gè)普通的對(duì)象，因此類(lèi)成員之間沒(méi)有使用逗號(hào)來(lái)分隔。

從一個(gè)類(lèi)創(chuàng)建實(shí)例必須使用new關(guān)鍵字，而從一個(gè)基類(lèi)繼承則使用extends：

 
 
    
  
  
  1. class Car extends Vehicle {
    2. 
  
  
  2.    constructor(name) {
    3. 
  
  
  3.       super(name);
    4. 
  
  
  4.       this.kind = 'car'
    5. 
  
  
  5.    }
    6. 
  
  
  6. }
    7. 
  
  
  7. let myCar = new Car('bumpy');
    8. 
  
  
  8. myCar.getName(); // 'bumpy'
    9. 
  
  
  9. myCar instanceof Car; // true
    10. 
  
  
  10. myCar instanceof Vehicle; //true
    11.

在派生類(lèi)中，可以使用super關(guān)鍵字來(lái)訪問(wèn)基類(lèi)的構(gòu)造函數(shù)或方法：

1、要訪問(wèn)基類(lèi)構(gòu)造函數(shù)，使用super()
2、要訪問(wèn)基類(lèi)中的方法，是用super.getName()

類(lèi)還有更多的用法，如果想要深入地學(xué)習(xí)這方面，可以看看Classes in ECMAScript6

Symbol

Symbol是一種新的原始數(shù)據(jù)類(lèi)型，和Number、String一樣。我們可以使用symbol來(lái)給對(duì)象創(chuàng)建唯一的ID或唯一的常量。

 
 
    
  
  
  1. const MY_CONSTANT = Symbol();
    2. 
  
  
  2. let obj = {};
    3. 
  
  
  3. obj[MY_CONSTANT] = 1;
    4.

注意：Object.getOwnPropertyNames方法不會(huì)返回Symbol生成鍵值，在for..in循環(huán) 中，Object.keys()和JSON.stringify()也是不可見(jiàn)的，這是與普通的字符串key值的區(qū)別所在。我們可以通過(guò) Object.getOwnPropertySymbols()獲取對(duì)象中的symbol數(shù)組。

因?yàn)椴豢勺兊奶攸c(diǎn)，Symbols常常與const一起配合使用：

 
 
    
  
  
  1. const CHINESE = Symbol();
    2. 
  
  
  2. const ENGLISH = Symbol();
    3. 
  
  
  3. const SPANISH = Symbol();
    4. 
  
  
  4. switch(language) {
    5. 
  
  
  5.    case CHINESE:
    6. 
  
  
  6.       //
    7. 
  
  
  7.       break;
    8. 
  
  
  8.    case ENGLISH:
    9. 
  
  
  9.       //
    10. 
  
  
  10.       break;
    11. 
  
  
  11.    case SPANISH:
    12. 
  
  
  12.       //
    13. 
  
  
  13.       break;
    14. 
  
  
  14.    default:
    15. 
  
  
  15.       //
    16. 
  
  
  16.       break;
    17. 
  
  
  17. }
    18.

也可以給Symbol一段字符串來(lái)描述，雖然無(wú)法通過(guò)字符串來(lái)訪問(wèn)symbol本身，但是調(diào)試的時(shí)候很有用。

 
 
    
  
  
  1. const CONST_1 = Symbol('my symbol');
    2. 
  
  
  2. const CONST_2 = Symbol('my symbol');
    3. 
  
  
  3. typeof CONST_1 === 'symbol'; // true
    4. 
  
  
  4. CONST_1 === CONST_2; // false
    5.

想要學(xué)習(xí)更多的symbol內(nèi)容可以查看symbol primitive

Transpilation

現(xiàn)在我們可以使用ES6來(lái)寫(xiě)代碼了。前面介紹中提到的瀏覽器還沒(méi)有廣泛地支持ES6的特性，而且支持性各不相同。你的用戶使用的瀏覽器很有可能不完 全懂得解析ES6代碼。所以我們要將這些代碼轉(zhuǎn)換成上一個(gè)版本的Javascript（ES5），它們可以很好地運(yùn)行在現(xiàn)代瀏覽器上，這種轉(zhuǎn)換通常被稱(chēng)為 Transpilation。在瀏覽器支持ES6之前，都需要在我們的應(yīng)用程序中做這一項(xiàng)轉(zhuǎn)換。

開(kāi)始

轉(zhuǎn)換代碼并不困難，可以直接通過(guò)命令行轉(zhuǎn)換代碼，或者在Grunt和Gulp中作為一個(gè)Task包含在插件里面。有很多轉(zhuǎn)換代碼的方案，比如Babel，Traceur和TypeScript。可以看看這個(gè)使用Babel的例子many ways to start using ES6，很多ES6的特性都會(huì)進(jìn)行處理。

那我們?nèi)绾问褂肊S6呢？首先，根據(jù)你想要使用的ES6特性和你需要支持的瀏覽器或運(yùn)行環(huán)境（比如Node.js）,在你的工作流中結(jié)合一個(gè)編譯轉(zhuǎn)換器。如果你希望的話，還有一些監(jiān)視文件變化和瀏覽器實(shí)時(shí)刷新的插件來(lái)讓你體驗(yàn)無(wú)縫的編碼。

如果是從頭開(kāi)始，你可能只是想要使用命令行來(lái)轉(zhuǎn)換代碼（查看例子Babel CLI documentation）。如果你已經(jīng)使用過(guò)grunt或gulp之類(lèi)的工具，你可以添加一個(gè)比如gulp-babel的插件，或者Webpack中的babel-loader插件。對(duì)于Grunt，有一個(gè)grunt-babel，還有很多其他的ES6-related plugins。對(duì)于使用Browserify的開(kāi)發(fā)者，可以看看babelify。

很多特性被轉(zhuǎn)換成ES5的兼容性代碼后，并不會(huì)有很大的開(kāi)銷(xiāo)，通過(guò)編譯器提供的臨時(shí)性方案會(huì)有一點(diǎn)點(diǎn)的性能損耗。你可以通過(guò)各種交互環(huán)境（也稱(chēng)作RELPs）來(lái)看看使用ES6代碼和編譯后的代碼是什么樣的：

1、Traceur：website,REPL
2、Babel：website,REPL
3、TypeScript：website,REPL
4、ScratchJS（chrome插件）

注意，TypeScript并不完全是一個(gè)轉(zhuǎn)換器，它是強(qiáng)類(lèi)型的Javascript的超集，可以編譯成Javascript，它和其他轉(zhuǎn)換器一樣，支持很多ES6特性。

究竟如何使用？

通常來(lái)說(shuō)，一些ES6的特性可以自由地使用，比如模塊、箭頭函數(shù)，不定參數(shù)和類(lèi)。這些特性不會(huì)用太多開(kāi)銷(xiāo)，就可以轉(zhuǎn)換成ES5代碼。而Array、 String和Math對(duì)象上和原型上的方法（比如Array.from等等）需要所謂的“polyfills”。Polyfills是對(duì)那些瀏覽器還沒(méi) 有原生支持的特性的一個(gè)臨時(shí)方案。你可以首先加載polyfills，如果瀏覽器有此函數(shù)，代碼就會(huì)正常運(yùn)行，Babel和Traceur都會(huì)提供類(lèi)似的 polyfills。

可以查看ES6兼容性表來(lái) 看看轉(zhuǎn)換器和瀏覽器對(duì)ES6新特性的支持情況。令人激動(dòng)的是，在寫(xiě)這篇文章的時(shí)候，最新的瀏覽器已經(jīng)支持了所有ES6特性的55%到70%。 Microsoft Edge，Google Chrome和Mozilla Firefox相互競(jìng)爭(zhēng)，這對(duì)整個(gè)Web的發(fā)展有很大的意義。

就我個(gè)人而言，我發(fā)現(xiàn)能夠很簡(jiǎn)單地使用ES6中的新特性，比如模塊，箭頭函數(shù)和不定參數(shù)等等是一種解脫，也是對(duì)自己編碼的一個(gè)顯著的提升?，F(xiàn)在我很享受使用ES6寫(xiě)代碼，然后將其轉(zhuǎn)換成ES5代碼。ES6的優(yōu)點(diǎn)隨著時(shí)間的增長(zhǎng)會(huì)越來(lái)越明顯。

下一步呢？

只要安裝了一個(gè)轉(zhuǎn)換器，就可以開(kāi)始使用一些小的特性，比如let和箭頭函數(shù)。記住，已經(jīng)編寫(xiě)好的ES5代碼，轉(zhuǎn)換器會(huì)原封不動(dòng)地保留下來(lái)。當(dāng)你使用 ES6去優(yōu)化你的代碼，慢慢地喜歡用它，你就可以逐步將越來(lái)越多的ES6特性應(yīng)用到代碼中。也許有一些代碼會(huì)有新的模塊或類(lèi)語(yǔ)法，但是我保證一切都會(huì)越來(lái) 越好的！

除了文章中提到的特性，還有更多的ES6的東西沒(méi)有被提到，比如Map，Set，標(biāo)簽?zāi)０遄址善?，Proxy和Promise，如果你想知道請(qǐng)關(guān)注后續(xù)的文章。另外，如果想要深入學(xué)習(xí)，我推薦Exploring ES6這本書(shū)，書(shū)里面提到了所有的ES6特性。

最后的思考

通過(guò)使用轉(zhuǎn)換器，所有的代碼實(shí)際上是轉(zhuǎn)換成了ES5。而瀏覽器一直在添加新特性，所以，即便瀏覽器完全支持某個(gè)特定的ES6特性，最后還是運(yùn)行 ES5兼容版本的代碼，這樣可能表現(xiàn)會(huì)更糟糕。你可以期待，在你需要兼容的瀏覽器和運(yùn)行環(huán)境里，所有的ES6特性最終都會(huì)被支持。但是在那之前，我們需要 管理好這些ES6特性的支持情況，選擇性地禁用某些ES6特性來(lái)減少轉(zhuǎn)換成ES5代碼后帶來(lái)的不必要的開(kāi)銷(xiāo)。知道了這些，你就可以決定是否要使用ES6中 的特性。

譯者信息

小駱，90后碼農(nóng)一個(gè)，潛水于互聯(lián)網(wǎng)中，專(zhuān)注web開(kāi)發(fā)，喜愛(ài)寫(xiě)代碼，個(gè)人博客狼狼的藍(lán)胖子

譯文鏈接：http://www.codeceo.com/article/es6-next-javascript.html
英文原文：ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript

 
 


文章名稱(chēng)：ES6：下一版本的JavaScript的新特性
轉(zhuǎn)載來(lái)于：http://www.dlmjj.cn/article/djijpcg.html