ES6常用语法

ES6是ECMAScript 6的简写，ECMAScript是JavaScript的标准，ECMAScript 6泛指“下一代JavaScript语言”，具体每年发布的都有自己的专属名称。

一、定义变量

（一）let：
跟var一样，也是用来定义变量，但是他比var更加的安全，体现在以下两点：
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的，所以依然会发生变量提升。

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.。
（二）const：
const是用来定义常量的，常量是一旦定义好了以后，就不能够再修改了。比如以下代码：

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

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

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

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

二、函数

（一）默认参数：
在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:"男"});

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

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

（三）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，就知道分别对应的是成功的回调以及失败的回调。

三、类

在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类的非常简单的方式。

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

class Utils{
  constructor(){}
  static timeFormat(time){
    // 时间格式化的代码
  }
}

// 直接调用
Utils.timeFormat("2019/1/1")

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

四、模块

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

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}

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

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