,MS Edge,,,Node 和许多其他的环境都已内置支持大多数的 ES6 功能。所以,在本教程中你学到的每个知识,你都可以马上开始应用。

让我们开始学习 6 吧!

核心 ES6 功能

你可以在浏览器的控制台中测试所有下面的代码片段。

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

不要笃信我的话,而是要亲自去测试每一个 ES5 和 ES6 示例。让我们开始动手吧

变量的块级作用域

使用 ES6,声明变量我们可以用 var ,也可以用 let 或 const。

var 有什么不足?

使用 var 的问题是变量会漏入其他代码块中,诸如 for 循环或 if 代码块。

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

对于 test(fasle) ,你期望返回 outerjs箭头函数,但是,你得到的是 。

为什么?

因为尽管没有执行 if 代码块,第四行中的表达式 var x 也会被提升。

var 提升:

var 是函数作用域。在整个函数中甚至是声明语句之前都是可用的。

声明被提升。所以你能在声明之前使用一个变量。

初始化是不被提升的。如果你使用 var 声明变量,请总是将它放在顶部。

在应用了声明提升规则之后,我们就能更容易地理解发生了什么:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

2015 找到了解决的办法:

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

将 var 改为 let,代码将像期望的那样运行。如果 if 代码块没有被调用,x 变量也就不会在代码块外被提升。

let 提升 和“暂存死区( dead zone)”

IIFE

在解释 IIFE 之前让我们看一个例子。来看一下:

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

如你所见, 漏出(代码块)。你需要使用 IIFE(- ,立即执行函数表达式)来包含它:

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

如果你看一看 / 或其他开源项目,你会注意到他们用 IIFE 来避免污染全局环境而且只在全局中定义了诸如 _,$和。

在 ES6 上则一目了然,我们可以只用代码块和 let,也不再需要使用 IIFE了。

js箭头函数_箭头函数的this指向哪里_箭头函数和普通函数的区别

Const

如果你想要一个变量保持不变(常量),你也可以使用 const。

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

总之:用 let,const 而不是 var

对所有引用使用 const;避免使用 var。

如果你必须重新指定引用,用 let 替代 const。

模板字面量

有了模板字面量,我们就不用做多余的嵌套拼接了。来看一下:

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

现在你可以使用反引号 (`) 和字符串插值 ${}:

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

多行字符串

我们再也不需要添加 + n 来拼接字符串了:

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

在 ES6 上, 我们可以同样使用反引号来解决这个问题:

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

两段代码的结果是完全一样的。

解构赋值

ES6 的解构不仅实用而且很简洁。如下例所示:

从数组中获取元素

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

等同于:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

交换值

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

等同于:

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

多个返回值的解构

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

在第 3 行中,你也可以用一个像这样的数组返回(同时省去了一些编码):

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

但另一方面,调用者需要考虑返回数据的顺序。

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

用 ES6,调用者只需选择他们需要的数据即可(第 6 行):

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

注意: 在第 3 行中,我们使用了一些其他的 ES6 功能。我们将 { left: left } 简化到只有 { left }。与 ES5 版本相比,它变得如此简洁。酷不酷?

参数匹配的解构

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

等同于(但更简洁):

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

深度匹配

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

等同于(但更简洁):

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

这也称作对象的解构。

如你所见,解构是非常实用的而且有利于促进良好的编码风格。

最佳实践:

类和对象

用 6,我们从“构造函数” 来到了“类”。

在 中,每个对象都有一个原型对象。所有的 对象都从它们的原型对象那里继承方法和属性。

在 ES5 中,为了实现面向对象编程(OOP),我们使用构造函数来创建对象,如下:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

ES6 中有了一些语法糖。通过像 class 和 这样的关键字和减少样板代码,我们可以做到同样的事情。另外,speak() 相对照 ..speak = () 更加清晰:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

正如你所见,两种式样(ES5 与 6)在幕后产生相同的结果而且用法一致。

最佳实践:

继承

基于前面的 类。 让我们扩展它并定义一个 Lion 类。

在 ES5 中,它更多的与原型继承有关。

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

我不会重复所有的细节,但请注意:

在 ES6 中,我们有了新关键词 和 super

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

虽然 ES6 和 ES5 的代码作用一致,但是 ES6 的代码显得更易读。更胜一筹!

最佳实践:

使用 内置方法实现继承。

原生

从回调地狱 到

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

我们有一个接收一个回调的函数,当 done 时执行。我们必须一个接一个地执行它两次。这也是为什么我们在回调中第二次调用 的原因。

如果你需要第 3 次或第 4 次回调,可能很快就会变得混乱。来看看我们用 的写法:

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

如你所见,使用 我们能在函数完成后进行一些操作。不再需要嵌套函数。

箭头函数

ES6 没有移除函数表达式,但是新增了一种,叫做箭头函数。

在 ES5 中,对于 this 我们有一些问题:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

你需要使用一个临时的 this 在函数内部进行引用或用 bind 绑定。在 ES6 中,你可以用箭头函数。

箭头函数的this指向哪里_箭头函数和普通函数的区别_js箭头函数

For…of

从 for 到 再到 for...of:

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

ES6 的 for…of 同样可以实现迭代。

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

默认参数

从检查一个变量是否被定义到重新指定一个值再到 。 你以前写过类似这样的代码吗?

箭头函数和普通函数的区别_箭头函数的this指向哪里_js箭头函数

可能有过,这是一种检查变量是否赋值的常见模式,不然则分配一个默认值。然而,这里有一些问题:

如果你传入一个布尔值作为默认参数或将值设置为 0,它不能正常起作用。你知道为什么吗?在讲完 ES6 示例后我会告诉你。

用 ES6,现在你可以用更少的代码做到更好!

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

请注意第 5 行和第 6 行,我们得到了预期的结果。ES5 示例则无效。首先检查是否等于 ,因为 false,null, 和 0 都是假值,我们可以避开这些数字,

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

当我们检查是否为 后,获得了期望的结果。

剩余参数

从参数到剩余参数和扩展操作符。

在 ES5 中js箭头函数,获取任意数量的参数是非常麻烦的:

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

我们可以用 rest 操作符 ... 做到同样的事情。

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

展开运算符

从 apply() 到展开运算符。我们同样用 ... 来解决:

提醒:我们使用 apply() 将数组转换为一列参数。例如,Math.max() 作用于一列参数,但是如果我们有一个数组,我们就能用 apply 让它生效。

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

正如我们较早之前看过的,我们可以使用 apply 将数组作为参数列表传递:

箭头函数和普通函数的区别_js箭头函数_箭头函数的this指向哪里

在 ES6 中,你可以用展开运算符:

箭头函数的this指向哪里_js箭头函数_箭头函数和普通函数的区别

同样,从 数组到使用展开运算符:

js箭头函数_箭头函数和普通函数的区别_箭头函数的this指向哪里

在 ES6 中,你可以用展开运算符来压平嵌套:

js箭头函数_箭头函数的this指向哪里_箭头函数和普通函数的区别

总结

经历了相当多的修改。这篇文章涵盖了每个 开发者都应该了解的大多数核心功能。同样,我们也介绍了一些让你的代码更加简洁,易于理解的最佳实践。

关于本文

译者:@L9m

原文地址: of ES6 (a.k.a 6 and +)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注