ES6為JavaScript開(kāi)發(fā)人員帶來(lái)了大量令人興奮的新功能和語(yǔ)法更新。這些語(yǔ)言更新中的一些更新很大，但是如果不小心，您可能會(huì)錯(cuò)過(guò)其中的一些小更新-這就是為什么我寫了《 六個(gè)小巧但很棒的ES6功能》這篇文章，列出了可以帶來(lái)很大不同的小事情當(dāng)您為當(dāng)今的瀏覽器編碼時(shí)。我想與您分享另外六個(gè)gem，您可以開(kāi)始使用它們來(lái)減少代碼并最大化效率。

1.對(duì)象簡(jiǎn)寫

新的對(duì)象創(chuàng)建速記語(yǔ)法允許開(kāi)發(fā)人員在不定義鍵的情況下創(chuàng)建鍵=>值對(duì)象：var名稱成為鍵，而var的值成為新對(duì)象的值：

var x = 12;
var y = 'Yes!';
var z = { one: '1', two: '2' };

// The old way:
var obj = {
    x: x,
    y: y,
    z: z
};

var obj = { x, y, z };
/*
    {
        x: 12,
        y: "Yes!",
        z: { one: '1', two: '2' }
    }
*/

我無(wú)法告訴您以完全相同的方式手動(dòng)編碼鍵=>值屬性的次數(shù)-現(xiàn)在我們只是有一種較短的方法來(lái)完成該任務(wù)。

2.方法屬性

當(dāng)涉及到這些ES6技巧時(shí)，似乎我很著迷于避免添加 function 關(guān)鍵字……我想這個(gè)技巧也沒(méi)有什么不同。無(wú)論如何，我們可以縮短對(duì)象函數(shù)的聲明，例如：

// Format: { myFn(param1) { ... } }
var davidwalsh = {
    makeItHappen(param) {
        /* do stuff */
    }
}

您必須承認(rèn)，省去所有function 關(guān)鍵字madness確實(shí)可以使代碼更簡(jiǎn)潔，維護(hù)更少。

3.塊與立即執(zhí)行的功能

創(chuàng)建立即執(zhí)行功能的模式有點(diǎn)難看：

(function() {

   /* do stuff */

})();

使用ES6，我們可以創(chuàng)建帶有Just的塊{}，而使用let，我們可以在沒(méi)有所有括號(hào)的情況下立即執(zhí)行類似函數(shù)的行為：

{ 
    let j = 12; 
    let divs = document.querySelectorAll('div');

    /* do more stuff */}j;  // ReferenceError: j is not defined...

如果在該塊內(nèi)聲明一個(gè)函數(shù)，則該函數(shù)將泄漏出去，但如果保留為let，則實(shí)際上已創(chuàng)建了一個(gè)沒(méi)有括號(hào)的IEF。

4.  for循環(huán)和let

由于JavaScript中存在變量提升功能，因此我們經(jīng)常在塊，代碼的頂部聲明“無(wú)用的”迭代器變量for(var x =...，或者最糟糕的是忘記執(zhí)行其中任何一個(gè)，從而泄漏了全局變量……只是通過(guò)該死的可迭代對(duì)象進(jìn)行迭代。ES6解決了此煩惱，使我們可以將其let 用作解決方法：

for(let x = 0; x <= elements.length; x++) {
  console.log(x); // x increments
}

x; // ReferenceError: x is not defined

在不久的將來(lái)，我們將看到let 使用的次數(shù)更多甚至更多var。

5.  get 和 set 

作為MooTools團(tuán)隊(duì)的成員，在JavaScript類成為真正的事物之前，我是JavaScript類的忠實(shí)粉絲?，F(xiàn)在他們是一回事：

class Cart {
  constructor(total) {
      this._total = total;
  }
  get total() { return this._total; }
  set total(v) { this._total = Number(v); }

  get totalWithTax() { return parseInt(this._total * 1.1, 10); } /* 10% tax */
}

var cart = new Cart(100);

cart.totalWithTax === 110;

最好的部分是創(chuàng)建屬性的getter和setter的新功能！無(wú)需通過(guò)功能創(chuàng)建特殊設(shè)置-通過(guò)basic設(shè)置時(shí)，這些功能會(huì)自動(dòng)執(zhí)行obj.prop = {value}。

6. startsWith，endsWith和includes

我們已經(jīng)在為自己的基本String函數(shù)編寫代碼了太久了-我記得在MooTools早期就這樣做了。的startsWith，endsWith和includes 字符串函數(shù)是這樣的函數(shù)的例子：

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

看到常識(shí)功能已成為一種語(yǔ)言，這令人難以置信。

ES6對(duì)于JavaScript來(lái)說(shuō)是不可思議的飛躍。我在這篇文章中指出的技巧和先例將顯示即使最小的ES6更新也可以對(duì)可維護(hù)性產(chǎn)生很大的影響。我等不及要看下一輪JavaScript更新為我們提供了什么！