一.前言

注:有ES6的基础可以直接跳过此章节 当然，会有人告诉你，即便不学ES6也是可以直接学习Vue的。但是我不这么看，因为不学一些ES6的语法，直接使用vue会让你更多时间只会知其然而不知其所有然。

二. 什么是ES6

• ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范
• ES6就是现在最新的JS语法
• 后期更多使用年号来做版本(ES2017,ES2018,...)

三. ES6常用语法

3.1 let&const

3.1.1 let:声明变量

• 它的用法类似于var(但是声明的变量只在 let 命令所在的代码块内有效。)
  • 代码块有效
  • 不能重复声明
  • 没有变量提升

  /*
      var的测试结果,在循环外部可以获取，但是let是无法获取的
      大家可以注意,let更加符合我们java对于一个变量的定义
  */
  for (var i = 0; i < 5; i++) {
      console.debug(i);
  }
  console.debug("外部i:"+i); //外部i:5

  for (let j = 0; j < 5; j++) {
      console.debug(j)
  }
  console.debug("外部j:"+j); //ReferenceError: j is not defined

3.1.2 const:声明常量

• 常量不能修改

const val = "abc";
val = "bcd"; //invalid assignment to const `val'

3.2 解构表达式

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

3.2.1 解构变量赋值

//以前变量赋值
let a = "张三";
let b = "李四";
let c = "王五";
console.debug(a,b,c);
//使用解构变量赋值
let [a,b,c] = ["张三","李四","王五"]
console.debug(a,b,c);

3.2.2 数组解构

let arr = ["哪吒","金吒","木吒"];
let [a,b,c] = arr;
console.debug(a,b,c);

3.2.3 对象解析

let person = {name:"哪吒",age:12};
//把person对象中的值根据名称直接赋值给name与age两个属性
let {name,age} = person;
console.debug(name,age);

3.3 箭头函数

相当于咱们Java中的lambda表达式

3.3.1 案例一 : 原生函数与箭头函数

• 原来的写法

    let hi = function(){
        console.debug("hi....");
    };

• 箭头函数写法

let hi = ()=>{
    console.debug("hi.....")
};

3.3.2 案例二 : 带参数的函数

let hi = (name) => {
    console.debug("你好啊，"+name);
}
hi("小明");

3.3.3 案例三 : 对象中添加相应的参数

var person = {
    //以前的方式
    say:function(){
        console.debug("你好嘛？");
    },
    //使用箭头函数
    hi:()=>{
        console.debug("你是真的牛皮！")
    },
    //箭头函数进一步精简,也是用得最多的方式
    hello(){
        console.debug("是时候表演真正的技术！");
    }
};
person.say();
person.hi();
person.hello();

3.3.4 案例四 : 解构与箭头函数的混用

//定义对象
let person ={name:"张三",age:32};
//传统方式
function hello(person) {
    console.debug(person.name,person.age);
}
hello(person);

//箭头函数+解构
let hi=({name,age})=>{
    console.debug(name,age);
}
hi(person);

3.4 Promise:更强大的异步编程

注:以后咱们会使用axios(更加的简单啦)，它是对Promise的底层的封装，大家可以先简单理解为就是咱们原生Ajax与JQuery封装后的区别

• 异步编程的解决方案(比传统的解决方案更加强大)
• Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件
• 我们可以在Promise中封装一个异步请求的结果

//Promise:许诺,承诺
// resolve:解决,决定 -> 成功执行的方法
// reject: 废品;次品 -> 失败后执行的方法
//创建对象的时候，里面可以加一个匿名函数 -> 这个函数后面会自动调用,可以先不用管它
var promise = new Promise((resolve, reject)=>{
   // resolve();
   // reject();
    //使用方法调用
    setTimeout(()=>{
        var num = Math.random();
        if(num>0.5){
            resolve("结果给你！");
        }else{
            reject("操作失败");
        }
    },1000)
});
//这里的代码是在上面的对象执行了对应的方法后才会执行
// 如果上面执行的是resolve，则会执行then里面的方法
// 如果上面执行的是reject，则会执行catch里面的方法
//等待相当的promise成功后会执行的代码
promise.then((result)=>{
    //成功后执行的代码
    console.debug("成功了？我是真的牛皮！！！"+result);
}).catch((msg)=>{
    //失败后执行的代码
    console.debug("年青人要讲武德！！！"+msg);
})

3.5 模块化规范

• 简单理解这个概念即可,现在这个功能浏览器还不支持，我们无法测试
• 模块化就是把代码拆分,可以重复利用(有点像咱们JAVA中的一个类引入其它类的意思)
• 模块化是一种思想,前端有很多规范可以实现这种思想
  • commonJs:nodeJS中的实现方案
  • amd/cmd:可以在浏览器中直接实现
  • ES6：可以在浏览器中直接实现
• ES6咱们使用两个命令构成：export和import
  • export命令用于规定模块的对外接口
  • import命令用于导入其他模块提供的功能

3.5.1 一个值的导入导出

• 导出数据(一个常量)

//定义一个常量，这里一个工具，并且导出可以让其它的js可以使用
export const util ={
    say(){
        console.debug("我是牛逼工具!");
    },
    hello(){
        console.debug("我当然也很牛逼!");
    }
};

• 导入数据
  • ./ 代表当级目录
  • 注意点一:后缀js可以省略
  • 注意点二:util的名称必需保证和导出的变量/常量名称一致

import {util} from './b';
util.hello(); //调用引入的对象的功能

• 代码图示

3.5.2 导出多个值

• 导出功能

let a ={
    hello(){}
}
let b ={
    say(){},
}
//导入多个数据
export {a,b};

• 导入功能

//从文件中导入多个数据
import {a,b} from "./b";

a.hello();
b.say();

• 代码图示

3.5.3 导出默认值

默认值的话导入功能的名称可以自己随便取

• 导出功能

//导出默认的值
export default {
    sum(){},
    hello(){}
}

• 导入功能

//导入默认的值，名称可以随便写
import {haha} from "./b";
haha.hello();
haha.sum();