五分钟玩转 ES6 核心功能（一）

​​01 从 var 到 const/let

var 定义的变量的作用域是函数范围的，而且是它所在的最内层的(离它最近的)函数。如果没被函数「包裹」，则变量就是全局作用域的。

猜猜下面的代码中的 foo 函数调用会得到什么结果？

它是实际上会得到 undefined。

上面的代码等价于下面的代码：

也就是说函数 foo 执行的时候，return 语句返回的 x，来自于函数体内定义的 x，而该 x 并没有被初始化，所以是得到的是 undefined。

let 和 const 的作用域一样，都是基于 block 的，即作用于 {} 定义的范围。

const 和 let 唯一的区别是，被 const 修饰的变量，不能再进行任何修改(用于赋值语句)。

猜猜看下面代码中的 foo 函数调用的结果。

该函数调用会得到 3。

02 从 IIFEs 到 blocks

IIFE 的全称是 Immediate Invoked Function Expression，是 ES5 中用于把变量限制于 block 的一种实现方式。

示例代码如下：

上面的代码中，由于 tmp 被限制在了 block 中，确切说是「包裹」它的函数中，所以在外部引用该变量时，会得到 ReferenceError 的运行错误。

在 ES6 中，我们不需要使用 IIFE 来达到上面示例代码的目的了，直接使用 {} 把变量声明「包裹」起来即可。

示例代码如下：

03 从拼接字符串到字面值模版

String interpolation (字符串拼接)

在 ES5 中我们使用加号 + 来进行字符串和变量拼接，比如下面的代码：

上面的代码拼接出的字符串就是 (x,y)，其中 x 和 y 会被替换变量的值。

在 ES6 中使用反引号 ` 来实现上述的目的，参考下面的代码：

上面的代码中，使用 ${} 来实现对变量的引用。

-Template literals (模版字面值)

下面的示例代码给出了多行字符串的连接方式。

依然使用 plus (加号)：

使用 backslash (反斜杠)：

使用 backtick (反引号)：

其中，使用 backtick 是 ES6 中引入的方式。

04 从函数表达式到箭头函数

在 ES5 中，如果要在一个 callback 函数中，通过 this 关键字访问声明这个 callback 函数所在的对象，可以使用一个 shadow this 来保存对象中的 this。如下代码示例：

上面的代码中，变量 _this 就是一个 shadow this，在 button 的监听事件的 callback 函数中引用 _this，形成了一个 closure (闭包)。

除了 shadow this，我们还可以使用 bind 函数。

在 ES6 中，arrow function(箭头函数)可以让代码变得更简洁，它是编译器将函数中的 this 和父级对象中的 this 绑定。代码示例如下：

上面代码中的 this 实际上绑定到了 UiComponent 对象。

箭头函数给一些简短的，只返回一个表达式结果的 callback(回调函数)带来了便利。

在 ES5 中的 callback 的写法显得啰嗦，示例如下：

而 ES6 中,通过箭头函数会很简洁,示例如下:

-处理多个返回值

一些函数或方法会通过数组或对象来返回多个值。

在 ES5 中需要一个中间变量来访问那些值，在 ES6 中你可以通过 destructuring (解构)来避免使用中间变量。

（1）数组中的多个返回值

exec() 返回捕捉到的组到类似数组的对象中。在 ES5 中需要一个中间变量，即使你只对那个组感兴趣，示例代码如下:

在 ES6 中，destructuring 是代码更简单，示例如下：

数组中开头的那个空的 slot(插槽)表示略过返回结果的数组中，索引为 0 的元素。

（2）对象中的多个返回值

方法 Object.getOwnPropertyDescriptor() 返回一个属性描述符,即一个对象带有多个属性和值。

在 ES5 中，需要中间变量来保存你感兴趣的值，示例代码如下:

在 ES6 中，依然借助 destructuring，示例代码如下：

其中 {writable, configurable} 相当于下面的对象:

未完待续
查看更多文章请关注【实训在线】微信公众号
原文首发：www.shixun.online