ES6 的全称是 ECMAScript 6，是 JavaScript 的一个版本。uni-app 支持了绝大部分 ES6 API，同时也支持 ES7 的 await/async。我们需要掌握箭头函数、解构赋值、数组扩展、Promise、module 等知识点。

ES6 是 ECMAScript 6 的简称，是于 2015 年 6 月正式发布的 JavaScript 语言的标准，正式名为 ECMAScript 2015（简称 ES2015）。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。同时 ES6 增加了很多 API 极大地拓展了 JavaScript 的功能，使他更像一门编程语言，可以承担更多的事。ES6 因为是 2015 年发布的，也称作 ES2015，对应的版本是 ES6，后面的命名方式以此类推。ES6 从起草到正式发布，经过了一个很漫长的时间。从 2000 年 ES4 开始酝酿的时候就已经开始了，由于 ES4 添加的 API 过多，导致这个版本没有通过，后来 ES5 就直接发布了。但是 ES4 提出的很多内容也被 ES6 所继承，因此，ES6 制定的起点其实是 2000 年。ES5 到 ES6 的演变其实经过了漫长的时间，而且 ES6 也算是 ECMAScript 的一个分水岭，它做了很多工作，修补了 ES5 之前 JavaScrept 存在的各种缺陷，并添加了很多新的功能，尽量能使得 JavaScript 成为一个更高级的，能承担更大型项目的语言。Tips： 在后面的文章中，我们所说的 ES5 统称 ES6 之前的所有 ECMAScript 的特性，ES6 则是 ES6 之后的版本内容。从 2015 年发布的 ECMAScript6 之后每年 ECMAScript 都会正式发布一个版本 ECMAScript。所以很多特性不能直接在浏览器中使用，需要借助 babel 这样的工具，把 ES6 的语法转换成 ES5，这样浏览器才能识别。

ES5 不能满足前端的复杂度，无论是 jQuery 这样的库，还是像 Vue 和 React 这样的框架，都在使用一些降级的方案来解决现有的问题，所以 ES6 的引入就是为了解决 ES5 以前存在的各种问题。另外，ES6 是一个大换血的版本，也是一个分水岭，标志着 JavaScript 向着更高的方向发展。ES6 也是对 ES5 的增强和升级。主流的浏览器都已经全面支持 ES6；行业内较新的前端框架都已经全面使用 ES6 的语法；微信小程序，uni-app 等都是基于 ES6 的语法；从就业出发，现在公司基本都在使用新的语法，增加必备技能获得更好的offer。以上都是学习 ES6 的场景，也是大势所趋。

require 命令加载 ES6 模块时，所有的输出接口都会成为输入对象的属性。// es.jslet foo = {bar : 'my-default'};exxport default foo;foo = null;// cjs.jsconst es_namespace = require('./es')console.log(es_namespace.default);// {bar:'my-default'}

使用浏览器运行原生 ES6 模块的源码在 ES6-wiki 的 mjs 文件中，浏览器是不能直接运行 ES6 模块化的，需要做一些准备工作。首先，在引入 js 文件时需要定义 script 的类型：type="module" 。另外，js 文件的后缀不能使用 .js 了，需要使用 .mjs 。这样还是不能在浏览器中运行，还需要最后一步。模块化会涉及到文件系统，而本地打开的 html 文件是没有服务的，所以我们要使用 node 服务的方式打开 html 文件，这里我们使用 node 的包 http-server 可以在相应的文件目录中启动 node 服务。安装如下：npm install --global http-server安装完启动服务的工具还是会有问题，依然打不开，这是需要在浏览器中打开一些配置：浏览器地址栏输入：chrome://flags/ 然后搜索 JavaScript 把 Experimental JavaScript 项选择 Enabled 启用状态。如下图。到这里我们就把前期的工作做完了，如何打开 html 文件呢？在控制台中进入对应的目录中执行：http-server 命令。本节的目录在 ES6-wiki/packages/module/mjs 下。在浏览器打开控制台返回的地址即可，本实例的地址是：http://127.0.0.1:8080/index.html

includes() 方法是区分大小写的。'imooc es6'.includes('imooc'); // true'imooc es6'.includes('Imooc'); // false

本节我们将什么是 ES5 ？什么是 ES6 ？为什么要学习 ES6 ？以及 ES6 与 ES5 之间的关系。本教程会通过在 ES5 中使用的知识点，对应的引出在 ES6 的知识点，深入浅出讲解 ES6 为什么会被引入？以及它背后的思想。

前面我们对 ES6 进行了介绍，本章来介绍一下配置 ES6 的执行环境，用于学习 ES6。现在市面上的大部分浏览器基本上都已经支持 ES6 的绝大部分语法，但是有些语法需要进行转译，或者在特定的环境中才能运行。其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

ES6 的出现，让 JavaScript 的代码质量有了质的飞跃，也解决、优化了以前存在的许多问题。现在找前端岗位的工作，ES6 是必备技能，务必要掌握。慕课网针对 ES6 也有对应的 Wiki，相关知识点可以参阅，相信阅读完会有更多收获;

本节主要介绍了 ES6 对 Math 这个对象的扩展，ES6 主要丰富了更多的数学方法，让我们更好地处理数学问题。

本节主要讲解了 ES6 Module 的使用，通过对 export、import、default、as 命令的讲解学习了 ES6 Module 的基本用法，基本上涵盖了日常使用的场景。

babel 是现在市面上使用得最多的一个 JavaScript 编译器，它可以把 ES6 语法编译成 ES5 语法，这样就可以让 ES6 代码在不支持 ES6 语法的低版本浏览器中运行了。babel 的官网是一个国外网站，我们可以访问 国内的站点 基本内容是一致的，网站还进行了翻译，更适合国内同学使用。在试一试中我们可以看到 ES6 语法转化为 ES5 后是什么样的，更加明了地展示语法的编译过程。 71

2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。(MDN)ES6 的发布让 JavaScript 的编写体验有了里程碑式的飞跃。各种概念性的特性都被纳入标准，如 Promise、模块化 。Google Chrome 浏览器支持绝大部分的 ES6 特性，可以直接在浏览器上体验。慕课网针对 ES6 也有对应的 Wiki教程，这个课程讲解比较全面，使用 ES5 与 ES6 做对比的方式进行的讲解，想全面掌握的同学可以参阅。

图片来源于网络，版权归原作者所有

在 ES6 之前，对象字面量的属性一定要书写上属性值和属性名。在 ES6 中，如果对象的属性名和存放属性值的变量相同，则只需要写一次。// 在 ES5 中function getInfo() { // 通过某种方式拿到的数据 var username = '张三'; var enemy = '罗老师'; var gender = '男'; var age = 12; return { username: username, enemy: enemy, gender: gender, age: age, };}// 在 ES6 中function getInfo() { // 通过某种方式拿到的数据 var username = '张三'; var enemy = '罗老师'; var gender = '男'; var age = 12; return { username, enemy, gender, age, };}可以看到 ES6 使得代码更清晰，也可以直接看出对象的属性名和存放属性值的变量是同名的。同样的，方法也提供了简写的方式：var obj = { say() { // ES6 console.log('说话'); }, walk: function() { // ES5 console.log('走路'); },},

本节学习了搭建 ES6 的两个运行环境，当然还可以使用 Webpack 进行搭建，后面在学习模块化和实战时会使用到，这里我们就使用最简单的两种方式来运行我们的 ES6 代码。本教程的所有代码实例都是基于浏览器和 VS Code 两个环境下实现的。而且这两个环境配置简单上手快，让我们更加关注 ES6 语法本身。