六个更小但更棒的ES6功能

发布于:2021-02-19 00:02:59

0

348

0

ES6 JavaScript 语法更新

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更新为我们提供了什么!