今天如何使用顶级ES6功能

ES6: partial support

没有浏览器完全支持ES6。点击查看深入指南。

第六个ECMAScript规范于2015年6月完成,现在有一系列JavaScript功能出现。如果您知道正确的工具,您可以立即开始使用这些功能。在本教程中,我将介绍最令人兴奋的新功能,以及几种不同的方法,您可以立即开始在项目中使用它们。

了解新的语言功能以及如何使用它们将帮助您决定是采用ES6还是留在ES5阵营。您可能希望处于最前沿,并认为ES6是您团队生产力的重要补充,但这需要您和您的团队花费时间学习ES6。

到目前为止,没有浏览器对ES6的覆盖率达到100%。该规范仍然很新鲜,实现正在积极开发中。完全依赖于今天的JavaScript引擎意味着您会发现许多ES6功能不起作用,仅部分实现或完全缺失。

Transpilers

补丁浏览器支持的解决方案是使用转换器。 Transpilation只是说类似语言汇编的一种奇特方式。通过使用转换器将ES6代码转换为ES5,浏览器(现在具有很好的ES5支持)可以在不抱怨的情况下解释ES6,因为您可以向它们提供已编译的ES5代码。

Transpilers为您的ES6程序提供了一致的基线,但它们并不完美。例如,代理在ES5代码中很难表示,并且不适用于转换器。

您可以在线使用Babel REPL尝试本文中的示例。您可以在左侧编写ES6代码,并在右侧实时查看已转换的版本更改。在学习ES6方面,这是一种享受。为了在ES6中开发整个应用程序,最好的办法是将Babel转换器与webpack或Browserify配对,以处理多个互连的小模块。

ES6: Babel transpiler

如果你现在想要开始使用ES6,你需要使用像Babel这样的JavaScript转换器

该语言的最新版本包括箭头功能,模板文字,块范围,集合,本机承诺等功能。我不可能一次性覆盖所有这些,但我们将超越我的最爱,以及最实用的功能。

模板文字

在ES6中,我们获得的模板与Mustache中的模板类似,但是原生于JavaScript。在它们最纯粹的形式中,除了使用反引号(`)作为分隔符而不是单引号或双引号之外,它们几乎与常规JavaScript字符串无法区分。

以下所有字符串都是等效的:

“快速的棕色狐狸跳过懒狗”'快速的棕色狐狸跳过懒狗'快速的棕色狐狸跳过懒狗

反引号不方便,因为它们很少出现在文本中。这些字符串可以是多行的,无需代表您进行任何额外的工作。这意味着您不再需要使用+连接字符串,或使用数组连接它们。

Var Text =`这是一个多行字符串。

模板文字还允许您通过将变量包装在插值中来将变量添加到混合中:

var color ='brown'; var target ='懒狗'; `快速$ {color}狐狸跳过$ {target}`; // < - '快速的棕色狐狸跳过懒狗'

你不仅限于变量;您可以在模板中插入任何表达式。

var input = -10; var modifier = 2; `将$ {input}乘以$ {modifier}的结果是$ {input * modifier}`; // < - '将-10乘以2得到的结果是-20'`$ {input}的绝对值是$ {Math.abs(input)}`; // < - '-10的绝对值是10'

阻止范围并让

ES6: block scoping

函数声明在ES6中是块作用域,这意味着它们将无法泄漏放置在块作用域变量声明中的机密

让我们继续讨论其他一些实用的功能。 let语句是ES6中最着名的功能之一。它的工作方式类似于var语句,但具有不同的范围规则。 JavaScript总是有一些复杂的范围规则,这使得许多程序员在第一次尝试解决问题时会疯狂。

使用var的声明是函数作用域。这意味着可以从声明它们的函数中的任何位置访问var声明。

另一方面,让声明是block.scoped。块范围是ES6中JS的新功能,但它在Java或C#等语言中相当普遍。

让我们看看两者之间的一些差异。如果你必须在if的代码分支中使用var声明一个变量,你的代码将如下所示:

function sortCoordinates(x,y){if(y> x){var temp = y; y = x; x = temp; } return [x,y]; }

这代表了一个问题,因为称为提升的过程意味着temp的声明将被“拉”到其范围的顶部。实际上,我们的代码就像我们编写了以下代码段一样。因此,在处理要作为代码分支范围的变量时,var是无效的。

function sortCoordinates(x,y){var temp; if(y> x){temp = y; y = x; x = temp; } return [x,y]; }

该问题的解决方案是使用let。 Let声明也被提升到其范围的顶部,但其范围是直接块(由最近的括号对表示),这意味着提升不会导致意外行为或变量混淆。

尽管让声明仍然被提升到其作用域的顶部,但是在达到实际的let语句之前尝试以任何方式访问它们都会抛出。这种机制被称为“时间死区”。

但是,这个功能实际上通常不会帮助用户捕获代码中的错误,而不是一个问题。在声明变量之前尝试访问变量通常会在使用var时导致意外行为,所以让它完全阻止它是一件好事。

的console.log(有); // < - 运行时错误,临时死区让那里='龙';

Const声明

除了声明之外,我们还可以观察到添加到语言中的const声明。与var和let相比,const声明必须在声明时分配。

const pi = 3.141592653589793; const max; // < -  SyntaxError

尝试为const变量分配不同的值会导致语法错误,因为编译器可能会告诉您尝试分配给const变量。

const max = 123; max = 456; // < -  SyntaxError

请注意,const仅表示声明是常量引用 - 它并不意味着引用的对象变为不可变。如果我们将一个对象分配给一个const变量客户端,我们将无法将客户端更改为对其他东西的引用,但我们将能够在客户端上更改属性,就像我们习惯使用其他声明样式一样。

const client = getHttpClient('http://ponyfoo.com'); client.maxConcurrency = 3; //有效,因为我们没有分配给客户

箭头功能

这些可能是ES6中最着名的功能。您可以使用_“arrow”_表示法,而不是使用function关键字声明函数,如下所示。注意返回是如何隐式的,以及x参数周围的括号。

[1,2] .map(function(x){return x * 2}); // ES5 [1,2] .map(x => x * 2); // ES6

箭头函数具有灵活的语法。如果您有一个参数,您可以放弃括号(尽管您可以根据需要添加它),但是对于具有零,两个或更多参数的方法,您将需要它。

[1,2] .map((x,i)=> x * 2 + i); // < -  [2,5]

如果您的方法不仅仅返回计算表达式的结果,您可以将声明的右侧部分包装在一个块中,并根据需要使用尽可能多的行。如果是这种情况,您需要再次添加return关键字。

X => {//多个语句返回结果}

箭头函数的一个重要方面是它们是词法范围的。这意味着你可以亲吻你的var Self =这句话再见。

以下示例增加计数器并每秒打印当前值。没有词法范围,你必须.bind方法调用,使用.call,.apply,或者我之前提到过的自我黑客。

function count(){this.counter = 0; setInterval(()=> console.log(++ this.counter),1000); } count(); // < -  1,.. 2,.. 3,...

对于简短方法,建议使用箭头函数,例如通常提供给.map和.filter迭代器的方法。使用箭头功能可能需要一两天的时间来习惯,但你会很快爱上新的语法。

请注意,您可能不应该在任何地方使用箭头功能。相反,请考虑每种情况。例如,箭头函数可能是匿名函数的一个很好的替代品,但对于命名函数则没有那么多。

结论

ES6: Ponyfoo

ES6系列中关于Pony Foo的文章涵盖了从入门到掌握代理和生成器的各个主题

现在你已经了解了Babel,模板文字,块范围,let,const和箭头函数,你已经准备好第一次给ES6一个镜头了。前往Babel REPL并开始尝试代码。

Nicolas Bevacqua

NicolásBevacqua是一名JavaScript和Web性能顾问。本文最初出现在第276期网络杂志

喜欢这个?阅读这些!



翻译字数超限