六个更小但更棒的ES6功能

ES6为JavaScript开发人员带来了大量令人兴奋的新功能和语法更新。这些语言更新中的一些更新很大，但是如果不小心，您可能会错过其中的一些小更新-这就是为什么我写了《 六个小巧但很棒的ES6功能》这篇文章，列出了可以带来很大不同的小事情当您为当今的浏览器编码时。我想与您分享另外六个gem，您可以开始使用它们来减少代码并最大化效率。

1.对象简写

新的对象创建速记语法允许开发人员在不定义键的情况下创建键=>值对象：var名称成为键，而var的值成为新对象的值：

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' }
    }
*/

我无法告诉您以完全相同的方式手动编码键=>值属性的次数-现在我们只是有一种较短的方法来完成该任务。

2.方法属性

当涉及到这些ES6技巧时，似乎我很着迷于避免添加 function 关键字……我想这个技巧也没有什么不同。无论如何，我们可以缩短对象函数的声明，例如：

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

您必须承认，省去所有function 关键字madness确实可以使代码更简洁，维护更少。

3.块与立即执行的功能

创建立即执行功能的模式有点难看：

(function() {

   /* do stuff */

})();

使用ES6，我们可以创建带有Just的块{}，而使用let，我们可以在没有所有括号的情况下立即执行类似函数的行为：

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

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

如果在该块内声明一个函数，则该函数将泄漏出去，但如果保留为let，则实际上已创建了一个没有括号的IEF。

4.  for循环和let

由于JavaScript中存在变量提升功能，因此我们经常在块，代码的顶部声明“无用的”迭代器变量for(var x =...，或者最糟糕的是忘记执行其中任何一个，从而泄漏了全局变量……只是通过该死的可迭代对象进行迭代。ES6解决了此烦恼，使我们可以将其let 用作解决方法：

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

x; // ReferenceError: x is not defined

在不久的将来，我们将看到let 使用的次数更多甚至更多var。

5.  get 和 set 

作为MooTools团队的成员，在JavaScript类成为真正的事物之前，我是JavaScript类的忠实粉丝。现在他们是一回事：

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;

最好的部分是创建属性的getter和setter的新功能！无需通过功能创建特殊设置-通过basic设置时，这些功能会自动执行obj.prop = {value}。

6. startsWith，endsWith和includes

我们已经在为自己的基本String函数编写代码了太久了-我记得在MooTools早期就这样做了。的startsWith，endsWith和includes 字符串函数是这样的函数的例子：

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

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

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

看到常识功能已成为一种语言，这令人难以置信。

ES6对于JavaScript来说是不可思议的飞跃。我在这篇文章中指出的技巧和先例将显示即使最小的ES6更新也可以对可维护性产生很大的影响。我等不及要看下一轮JavaScript更新为我们提供了什么！