微信小程序 ES6语法

能够正确创建一个自定义组件并且使用
掌握子组件如何向父组件通信
掌握父组件如何向子组件通信
掌握WXS模块的建立及使用

一、一个常见的问题是：ECMAScript 和 JavaScript 到底是什么关系

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。

二、ES6 与 ECMAScript 2015 的关系：

ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。

但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

以上内容引用自《ECMAScript 6 入门》：ES6 入门教程

三、一句话总结：

ES6是ECMAScript 6的简写，ECMAScript是JavaScript的标准，ECMAScript 6泛指“下一代JavaScript语言”，具体每年发布的都有自己的专属名称，比如2015年发布的则为ESMAScript 2015.目前说的ES6语法，一般值得都是ESMAScript 2015版。

四、在小程序开发工具中开启ES6：

在微信开发者工具中->详情->ES6转ES5，勾选上就可以了！

五：ES6语法：

因为本文章不是专业的前端，只是为了微信小程序的学习做一些铺垫，所以只介绍到一些常用的语法。

5.1 定义变量的新关键字 let：

let跟var一样，也是用来定义变量，但是他比var更加的安全，体现在以下两点：

5.1.1 不会出现变量提升的情况

console.log(a);
var a = 10;

按道理变量a是在打印的后面定义的，但是以上的代码并不会出错，而是会打印undefined，因为var会把变量a提升到代码最开始的地方进行定义，但是如果使用let就不会出现这种问题了。

console.log(b);
let b = 10;

此时再去打印的时候，就直接会抛出一个错误ReferenceError: b is not defined.，这才是正确的方式。

注意：小程序中不能真正解析ES6语法，他只是借助了第三方工具将ES6语法转成ES5语法运行的，在底层也是用var来代替let的，所以依然会发生变量提升。

5.1.2 只在当前代码块内有效

for(var i=0;i<=3;i++){console.log(i);
}
console.log(i);

按道理来说i在for循环结束后，应该就不能够再使用了，但是我们下面再打印i的时候，会发现打印的结果是3而不是抛出异常，这在一些情况下也会产生莫名其妙的错误。但是let就不会出现这种情况了。示例代码如下：

for(let i=0; i<=3; i++){console.log(i);
}
console.log(i);

此时再打印i的时候，就会抛出错误ReferenceError: b is not defined

5.2 定义常量的新关键字 const：

const是用来定义常量的，常量是一旦定义好了以后，就不能够再修改了。比如以下代码：

const PI = 3.14;
PI = 3 // 会抛出异常

const只是用来限制指向的内存地址不能改变，但是如果这个内存地址上的数据改变了，是可以的。或者说得直白一点，就是指向的如果是一个可变的容器，容器中的数据改变了，那么是允许的。比如以下代码：

const mylist = [1,2,3];
mylist.push(4);
console.log(mylist);

以上代码后面会打印一个[1,2,3,4]的数组

5.3 函数

5.3.1 默认参数

在ES 2015之前，函数是不能指定默认参数的，在ES 2015后，就可以使用默认参数了。比如以下代码：

function fetch(url,method="get"){// 发送网络请求案例console.log(url);console.log(method);
}

那么以后我们在使用fetch函数的时候，可以不传method参数，他会默认使用get：

fetch("http://www.baidu.com/"); //method == get
fetch("http://www.baidu.com/","post") // method == post

定义默认参数的时候，默认参数必须要在非默认参数的后面。

如果有多个默认值，我们只想提供其中的一个默认值，那么这时候需要与解构赋值默认值结合使用，示例代码如下：

function person(name,age=18,gender='男'){console.log(name,age,gender);
}

比如我只想提供gender这个默认参数，age这个参数不提供，那么必须与解构赋值默认值结合使用实现：

function person(name,{age=18,gender='女'}={}){console.log(name,age,gender);
}
person("李朋",{gender:"男"});

5.3.2 箭头函数

有时候，函数作为一个参数变量传进去的时候，为了简化他的写法，我们可以使用箭头函数来实现。比如以下：

wx.request({url: "http://www.baidu.com/",success: function(res){// 做一些事情}
});

以上代码可以使用箭头函数进行简化：

wx.request({url: 'http://www.baidu.com/',success: res => {//做一些事情}
});

可以看到使用箭头函数更加的简洁

箭头函数的语法是：

(参数1,参数2) => {代码块}如果只有一行代码，那么可以不用花括号：
(a,b) => a+b // 返回a+b的结果 // 如果只有一个参数，可以不使用圆括号
a => a+1

5.3.3 Promise风格的调用

在云开发中，提供的API有大量的Promise方式调用，在这里就简单的讲解一下Promise的实现原理，看以下代码：

const p = new Promise(function(resolve,reject){// 如果执行以下代码，那么会执行下面的then函数setTimeout(() => {resolve("success");},1000);// 如果执行以下代码，那么会执行下面的catch函数setTimeout(() => {reject("fail")},1000);// 如果以上两个代码都执行，那么只会调用下面的then方法，因为resolve的调用在前面。
});p.then((res) => {console.log(res);
}).catch((error) => {console.log(error);
});

以后在云开发中，如果出现then和catch，就知道分别对应的是成功的回调以及失败的回调

5.4 类

在ES5中，如果想要实现一个类，那么需要通过以下代码来实现：

function Point(x, y) {this.x = x;this.y = y;
}Point.prototype.toString = function () {return '(' + this.x + ', ' + this.y + ')';
};var p = new Point(1, 2);

这种写法虽然可以实现，但是不够清晰，让有其他编程语言的小伙伴看了后会有一脸问号，那么ES6就提供了一个新的语法class来实现。示例代码如下：

class Person{// 构造函数constructor(name,age){this.name = name;this.age = age;}sayHello(){console.log("hello world");}
}let p = new Person("zhiliao",18);
p.sayHello();

以上便是定义一个Person类的非常简单的方式

5.5 定义静态方法

在定义方法的时候，可以使用static关键字定义静态方法，静态方法是只属于类的，不属于对象的。示例代码如下：

class Utils{constructor(){}static timeFormat(time){// 时间格式化的代码}
}// 直接调用
Utils.timeFormat("2019/1/1")

以上定义了一个timeFormat的方法，并且在这个方法前面加了一个static关键字，所以他就是一个静态方法了，那么以后在使用这个方法的时候直接通过类名就可以调用了

5.6 模块

在传统的JS中，是没有办法在多个js文件中互相导入的，这对于大型项目来说很不方便。因此ES6提供了一个模块的功能。要学会使用模块，只要掌握两个关键字export以及import即可。

5.6.1 export

默认在一个js文件中写好的代码或者变量，是不能够给其他的文件使用的，如果想要被外部使用，那么需要使用export关键字。示例代码如下：

// utils.js
var name = "zhiliao";
function dateFormat(date){// 格式化代码
}
class Person{constructor(name,age){this.name = name;this.age = age;}
}
export {name,dateFormat,Person}

5.6.2 import

以上文件进行export了，那么以后其他文件想要使用的，则需要从这个文件中把需要的进行import。示例代码如下：

// from 后面是一个相对路径
import {name,dateFormat,Person} from "utils.js";