JavaScript ES6 最值得掌握的5个特性

JavaScript ES6 添加了一系列新的语言特性，其中一些特性比其它更具有开创性以及更广的可用性。比如像 ES6 类 这样的特性，虽然新奇，但其实仅仅是在 JavaScript 中创建类的已有方法之上的一种语法糖。而像生成器（generator）这样的功能，虽然非常强大，但却是为了针对性的任务所保留的。

从在过去的12个月里所从事的不同 JavaScript 相关项目中，我发现有 5 个 ES6 特性是不可或缺的，因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样，如果是的话，我希望你能在结尾的评论区分享它们。

让我们正式开始！

箭头函数（Arrow Functions）

Promises

异步函数（Async Functions）

解构（Destructuring）

默认和剩余参数（Default and Rest Parameters）

1) 、JavaScript 箭头函数

在 ES6 JavaScript 中，我最喜欢的新增特性之一并不是一个全新特性，而是一个我每次使用都能让我微笑的新语法。我说的就是箭头函数，它提供了一种极致优雅和简洁的方式来定义匿名函数。

简而言之，箭头函数就是丢掉了关键字 ，然后用一个箭头 来分离一个匿名函数的参数部分和函数体：

(x, y) => x * y;

这相当于:

function(x, y){

return x * y;}

或者:

(x, y) => {

var factor = 5;

var growth = (x-y) * factor;}

完全等价于:

function(x, y){ var factor = 5;

var growth = (x-y) * factor;}

在使用传统的匿名函数时，箭头函数还消除了一个关键的错误源，即函数内的 对象的值。使用箭头函数， 是基于词法绑定，这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式，并且永远不会改变。如果一个箭头函数定义在一个自定义对象 中， 值毫无疑问地指向 。比如：

var countup = { counter: 15, start:function(){

window.addEventListener('click',

() => { alert(this.counter)

// correctly alerts 15 due

to lexical binding of this }) }};countup.start();

对比传统匿名函数， 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 ，结果将返回 ，这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数， 的值总是可预测并且容易推断的。

对于箭头函数的详细讲解， 请看 "Overview of JavaScript Arrow Functions".

2)、 JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性， 这是大多数现代Web应用程序中的一项任务。 而不是依靠回调函数 —— 通过JavaScript框架（如jQuery）普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易，而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 构造函数开始和结束:

const mypromise = new Promise

(function(resolve, reject)

{

// 在这编写异步代码 // 调用 resolve() 来表示任务成功完成 // 调用 reject() 来表示任务失败})

在内部使用 和 方法，当一个 Promise 被完成或拒绝时，我们可以分别向一个 Promise 对象发出信号。 与 方法随后可以被调用，用以处理完成或拒绝 Promise 后的工作。

我用下面一个被注入 XMLHttpRequest 函数的 Promise 的变种，来一个接一个的检索外部文件内容：

function getasync(url) {

return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() })}getasync('test.txt').then((msg) => {

console.log(msg)

// echos contents of text.txt

return getasync('test2.txt')}).then((msg) =>

{

console.log(msg)

// echos contents of text2.txt

return getasync('test3.txt')}).then((msg) => {

console.log(msg)

// echos contents of text3.txt})

要掌握 JavaScript Promises 的关键点，例如 Promise 链和并行执行 Promise，请阅读 "Beginner's Guide to Promises".

3)、 JavaScript 异步函数

除了 JavaScript Promise，异步函数进一步重写了传统的异步代码结构，使其更具可读性。每当我向客户展示带有async 编程功能的代码时，第一个反应总是令人惊讶，随之而来的是了解它是如何工作的好奇心。

一个异步函数由两部分构成:

1) 一个以 为前缀的常规函数

async function fetchdata(url){

// Do something // Always returns a promise}

2) 在异步函数（Async function）内，使用 关键字调用异步操作函数

一个例子胜过千言万语。下面是基于上面示例重写的 Promise，以便使用Async functions代替：

上面的例子运行时会输出“test.txt”，“test2.txt”，“test3.txt”，最后是“Finished”。

如你所见，在异步函数中，我们把异步函数 当作是同步函数调用 - 没有 方法或回调函数通知进行下一步。无论何时遇到关键字 ，执行都会暂停，直到 解决，然后再转到异步函数中的下一行。结果与纯粹的基于 Promise，使用一串 方法的方式一样。

要掌握异步函数，包括如何 并行执行函数，请阅读 "Introduction to JavaScript Async Functions- Promises simplified"

4) 、JavaScript 解构

除了箭头函数，这是我每天使用最多的 ES6 功能。ES6 解构并非一个新功能，而是一个新的赋值语法，可以让您快速解压缩对象属性和数组中的值，并将它们分配给各个变量。

var profile = var = profile

// destructure profile objectconsole.log(name)

// "George"console.log(h

这里我用解构快速提取 对象的 和 属性 。

使用别名，你可以使用与你正在提取值的对象属性不同的变量名：

var profile = var = profile

// destructure profile objectconsole.log(n)

// "George"console.log(h)

// "Tennis"嵌套对象解构

解构也可以与嵌套对象一起工作，我一直使用它来快速解开来自复杂的JSON请求的值：

var jsondata = { title: 'Top 5 JavaScript ES6 Features', Details: {

date: { created: '2017/09/19', modified: '2017/09/20', }, Category: 'JavaScript', }, url: '/top-5-es6-features/'};

var }} =

jsondataconsole.log(title)

// 'Top 5 JavaScript

ES6 Features'console.log(created)

// '2017/09/19'console.log(modified)

解构数组

数组的解构与在对象上的工作方式类似，除了左边的花括号使用方括号代替：

var soccerteam = ['George', 'Dennis', 'Sandy']

var [a, b] = soccerteam

// destructure soccerteamarrayc

你可以跳过某些数组元素，通过使用逗号（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']

var [a,,b] = soccerteam

// destructure soccerteamarra

对我而言，解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。要充分掌握ES6解构的复杂性和潜力，请阅读"Getting to Grips with ES6: Destructuring".

5) 、默认和剩余参数（Default and Rest Parameters）

最后，我最想提出的ES6的两个特性是处理函数参数。几乎我们在JavaScript中创建的每个函数都接受用户数据，所以这两个特性在一个月中不止一次地派上用场。

默认参数（Default Parameters）

我们都使用过一下模式来创建具有默认值的参数：

function getarea(w,h){ var w = w || 10 var h = h || 15 return w * h}

有了ES6对默认参数的支持，显式定义的参数值的日子已经结束：

function getarea(w=10, h=15){ return w * h}getarea(5) // returns 75

关于 ES6 默认参数的更多详情 在这.

剩余参数（Rest Parameters）

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

function addit(...theNumbers){

// get the sum of the array elementsreturn theNumbers.reduce

((prevnum, curnum) => prevnum + curnum, 0) }addit(1,2,3,4)

// returns 10

通过在命名参数前添加3个点 ，在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 我们不得不做一些复杂的操作比如 手动将参数转换为数组 ：

function addit(theNumbers){

// force arguments object into arrayvar numArray =

Array.prototype.slice.call(arguments) return numArray.reduce((prevnum, curnum) =>

prevnum + curnum, 0)}addit(1,2,3,4)

// returns 10

Rest parameters 只能应用于函数的参数的一个子集，就像下面这样，它只会将参数从第二个开始转换为数组：

function f1(date, ...lucknumbers)

{

return 'The Lucky Numbers for ' + date + ' are:

' + lucknumbers.join(', ')}alert( f1('2017/09/29', 3, 32, 43, 52) )

// alerts "The Lucky Numbers for

2017/09/29 are 3,32

对于 ES6 中 Rest Parameters 完整规范，看这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

结论

你同意我所说的 ES6 特性的前五名吗？哪个是你最常用的，请在评论区和大家分享。

来源：http://www.zcfy.cc/article/top-five-features-in-javascript-es6-worth-mastering