ES6 迷你速成课程：如何编写现代 JavaScript

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

这最初是在 Twitter 上发布的：https://twitter.com/chrisachard/status/1169223691122749440

想要像一个理智的人一样编写 JavaScript 吗？

🔥 这是专为您准备的迷你速成课程 🔥

ES6+ JavaScript 编写起来确实很有趣！

（codesandbox 链接在最后）

1.

var 已死。别用 var。😐

（为什么？词法作用域）

如果变量将发生变化，请使用let

如果变量不会改变，则使用const

2.

箭头函数自动绑定this

所以 95% 的情况下它都会如你所想

3.

如果你将 {} 从箭头函数中移除，它会自动返回

如果只有一个参数，则可以省略 ()

不同的语法可能会有点令人困惑 - 但你很快就会习惯它

4.

您现在可以为函数参数定义默认值。

超级好用！🎉

5.

通过解构赋值，你可以从对象或数组中提取特定值

在函数签名中也常用——现在你可以拥有命名参数了！🎉🎉

6.

导出和导入模块有新的语法

您可以从模块中导出单个默认值以及任意数量的命名值

（注意使用解构赋值来导入命名值！）

7.

使用三个点获取对象或数组中的“其余”值...

（又称rest操作员）

8.

三个点也可用于将对象或数组扩展为新的对象或数组。

这被称为spread运算符

（是的 - 三个点既是rest和spread。它们是不同的，尽管概念上相似）

9.

反引号现在可用于包装字符串，称为“模板文字”

在反引号内部，您可以使用它${}来进行字符串插值！

这比说以下的话要容易得多："Hello " + name + "!"

10.

现在大多数浏览器都原生支持这些功能！🎉

（IE 除外😐）

除了 ES6 模块之外，大多数功能都可以在 Node 中运行，但有一种方法可以解决这个问题👇

11.

好的，但是为什么 ES6+ JS 更好呢？

• let/const 作用域正确
• () => {}this正确绑定
• 解构赋值，...rest 和 spread 节省了大量的输入

简而言之：它消除了黑客攻击，做了您认为它应该做的事情，更少的打字意味着更少的错误。

哇！🎉

12.

以下是 codesandbox 链接，您可以探索：

var/let/const
https://codesandbox.io/s/es6-var-let-const-xz50k?fontsize=14

箭头函数
https://codesandbox.io/s/es6-arrow-function-gye29?fontsize=14

解构赋值
https://codesandbox.io/s/es6-destructuring-assignment-3cv3b?fontsize=14

导入/导出
https://codesandbox.io/s/es6-import-export-2q3px?fontsize=14

rest/spread 和模板文字
https://codesandbox.io/s/es6-rest-spread-template-literals-puli0?fontsize=14

写这个速成班真有趣！希望你喜欢它😁

如果您喜欢它，您可以通过以下方式找到更多：

• 在 Twitter 上关注我：@chrisachard
• 订阅新闻通讯：chrisachard.com

感谢阅读！