副队长ES6+教程(1)--ES6+初识

点此查看 所有教程、项目、源码导航

[0. 写在前面](#0. 写在前面)
[1. 背景介绍](#1. 背景介绍)
[2. ECMAScript 和 JavaScript](#2. ECMAScript 和 JavaScript)
[3. 与Vue框架的关系](#3. 与Vue框架的关系)
[4. ES6+ 代码运行环境](#4. ES6+ 代码运行环境)
- [4.1 浏览器控制台](#4.1 浏览器控制台)
- [4.2 Node.js](#4.2 Node.js)
- [4.3 Babel](#4.3 Babel)
[5. 小结](#5. 小结)

0. 写在前面

建议大家先学习完之前的教程，再来学ES6+比较好：

ECMAScript，简称 ES，是 JavaScript 遵循的语言标准，定义了这门语言的语法规则、内置对象、函数接口。我们平时写的 JavaScript，就是这个标准在浏览器里的具体实现。

在很长一段时间里，这份标准更新非常缓慢，开发者只能使用功能比较有限的语法。

直到 ES2015，也就是大家俗称的 ES6，一次性新增大量实用特性，后续规范改为每年迭代，持续扩充能力，这些新特性统一被叫做 ES6+。

很多初学者容易把这两个名词混在一起。

ECMAScript，简称 ES，是一份标准规范，规定了语言的语法、内置对象和接口，它本身并不能直接运行。而 JavaScript 是这套规范最主流的实现。简单理解：ECMAScript 定规则，JavaScript 是可以跑在浏览器、Node 里的实际语言。

在 2015 年之前，规范更新周期很长，好几年才出一个大版本。从 2015 开始，TC39 委员会改为每年发布一个版本：

我们平时提到的 ES6+，是一个统称，代表 ES2015 以及之后所有版本新增的语法和 API，并不单指 ES2015。

对于打算学习 Vue 的开发者来说，ES6+ 是绕不开的前置基础。

Vue 内部大量依托 ES6+ 的能力实现，不管是 Vue2 中常用的解构、箭头函数、Promise，还是 Vue3 的组合式 API、import / export、ref、reactive 背后依赖的 Proxy，全都建立在 ES6+ 特性之上。

如果不熟悉这部分内容，在看 Vue 文档、仿写示例、阅读组件源码时，经常会卡在语法层面，分不清哪些是 Vue 独有的 API，哪些属于 JS 原生语法，学习进度会被拖慢。

把 ES6+ 吃透之后，再进入 Vue 的学习，更容易理解它的设计思路，写组件、处理异步、封装工具函数也会更加顺手。

除此之外，ES6+ 本身也能让代码更简洁、可读性更好，更容易维护，也是现代前端开发、阅读各类开源项目必备的技能。

不学ES6+，不是 "绝对不能学"Vue，而是不推荐这样做。先把常用 ES6+ 过一遍，再上手 Vue，学习效率会高一大截。

学习阶段不需要搭建复杂工程，下面这几种方式足够运行后续所有示例。

打开 Chrome 或者 Edge，按下 F12，切换到 Console，就可以直接输入代码执行。现代浏览器对 ES6+ 的支持已经比较完善，大部分语法可以直接运行。

对于一些比较新的特性，低版本浏览器无法识别，这时就需要转译工具处理。

浏览器也是咱们真实使用的运行环境

安装稳定版 Node，新建 .js 文件，在终端执行命令：

bash 复制代码

node demo.js

即可运行代码。新版 Node 对 ES6+ 的支持度不错。

Node.js是后续教程内容，此处简单了解即可。

Babel 是语法转译工具，可以把 ES6+ 代码转为 ES5，用来兼容老旧浏览器。

现阶段学习，不用深入配置 Babel，知道它的用途就可以。另外要注意，Babel 只负责转换语法，新增的内置 API，还需要 polyfill 来补齐，不能指望它解决全部兼容问题。

Babel此处简单了解即可。

本篇主要做前期铺垫，没有复杂语法。ES6+ 已经是现代前端的基础，不管业务开发还是阅读源码，都会频繁用到。把概念和运行环境理顺，后面学习新语法会顺畅很多。

同时需要注意：ES6 特指 ES2015，ES6+ 是后续所有新特性的统称，不要等同看待。