解构赋值

es5中我们的做法如下：

[code]var people={
name:"zs",
age:20
}
var name=people.name;
var age=people.age;
console.log(name,age)
这里的结果就为："zs",20

在es6中我们就可以像下面这样写：

[code]var people={
name:"zs",
age:20
}
var {name,age}=people
console.log(name,age)
结果和上面一样："zs",20。

如果想重新命名，则：
var {name: name1,age:age1}=people
console.log(name1,age1)
结果也是一样的："zs",20

而数组中则可以：

[code]var ar=[11,22,33,55]
var [a,b,c]=ar;
console.log(a,b,c)
结果为：11，22，33

注意：对象解构时，键名必须相同，想要重新命名的话需要向上面那样操作，而数组解构时，是根据对位来实现的。

默认参数(Default) + 不定参数(Rest) + 扩展展开运算符(Spread)

默认参数

在es6中给入默认参数可以直接在形参后面跟上等式，比如：

[code]function fn(name="zs",age=20){
console.log("我叫"+name+"今年"+age+"岁")
}
当我们调用fn这个函数时，如果不传参，则会打印出：我叫zs今年20岁
当我们给入参数时，则会根据我们给入的参数打印，比如：fn("ls",18)
就会打印出：我叫ls今年18岁

不定参数

顾名思义就是不定数量的参数，比如：

[code]function nums(x,...y){
console.log(y)
}
nums(1,2,3,4,5)

结果为：[2,3,4,5]

展开运算符

用于赋值时直接展开所有元素，比如：

[code]var obj={
name:"zs",
age:18,
sex:"man"
}
var obj1={...obj,height:"183cm"}
这里的obj2就为：
{name:"zs",age:18,sex:"man",height:"183cm"}

数组也一样。

注意：给入不定参数时，必须放到最后一个参数，而展开运算符随便放到哪个位置。

增强的对象字面量 

给对象属性赋值时，无需写成键值对,例如：

[code]es5中：
var name="zs";
var age=18;
var obj={ name:name,age:age}

es6中：
var name="zs";
var age=18;
var obj={name,age}

箭头函数与this语法

语法：(参数体)=>{函数体}

s箭头函数中的箭头函数主要分为三部分

=>前的部分  【参数部分】

=>

=>后的部分  【函数体部分】

1.=>前的部分是函数的参数部分，主要有以下几种情况：

   参数为空(写一个空括号即可)

   ()=>

   只有一个参数a（只写a或者在a外加一个括号）

   (a)=> 或者 a=>

   有多个参数a,b,c,d(必须写在括号里)

   （ a,b,c,d)=>

   含有默认值的参数(直接给参数赋值就可以了，同以前一样)

   （a=1,b=2,c=3,d=4)=>

   含有不定参数(直接写就行，同以前一样)

    (a,b,…c)=>

   另外，箭头函数参数也支持解构赋值。

2.=>后的部分

        =>后的部分也就是函数体主，要有以下几种情况：

     1. 函数体只有一条语句

          写法： =>语句;

          当函数体只有一条语句时，可以不加花括号，直接将这条语句写在箭头后面即可.

          然后如果这条语句是一个return value这种的话，请去掉return，直接写那个值value即可。在箭头函数执行时，会自动将其作为返回值返回。

          当然，如果这个值是一个对象，请在他的外面加上一个括号如({value})因为如果不加的话，{会被认为是函数体的开始,而不会被认为是一个对象的开始。

     2.有多条语句(要加上花括号，写法和以前一样)

              =>{

                 语句1;

                 语句2;

                 语句3;

                 }

箭头函数中的this

箭头函数会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值。

类（classes）

ES6的类只是一个语法糖，通过class关键字让语法更接近传统的面向对象模式，本质上还是基于原型的。使用单一便捷的声明格式，使得类使用起来更方便，也更具互操作性。类支持基于原型的继承，调用父类的构造函数，生成实例，静态方法和构造函数。例如：

[code]ES5中：
function People(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex
}
People.prototype.show=function(){
console.log("我是"+this.name+",今年"+this.age+"岁，"+"性别："+this.sex)
}
var preson=new People("zs",20,"男")
调用：   preson.show()
我是zs,今年20岁，性别：男

ES6中：
class Peoples{
constructor(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex
}
show(){
console.log("我是"+this.name+",今年"+this.age+"岁，"+"性别："+this.sex)
}
}
var presons=new Peoples("zs",20,"男")
调用：   presons.show()
我是zs,今年20岁，性别：男

Map + Set

Set

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值;

Set函数可以接受一个数组（或类似数组的对象）作为参数，用 3ff7 来初始化。（可达到数组去重的目的）

[code]var myset=new Set([11,22,22,33,44,44])
调用myset就为：
{11,22,33,44}
它会自动去除重复的值

Set自身还有一些方法：add(),delete(),has(),clear(),forEach()

[code]接上段代码：
myset.add(88);
再次调用myset就会为：{11,22,33,44,88};
myset.delete(44);  --->返回布尔值，true代表删除成功，false代表删除失败
再次调用myset就会为：{11,22,33,88};
myset.has(22);
has代表判断当前这个是否含有22，如果有返回true,没有返回false
myset.clear();
clear代表清空当前
如果想要循环得到需要使用for of 方法
for(let i of myset){
console.log(i)
}
i就代表每个元素
myset.forEach(function(i,ele,arr){
console.log(i,ele,arr)
})
i,ele--->都代表元素本身
arr---->代表myset本身

注意：对于添加引用数据类型时，会判断地址是否相等，当添加NaN时，它会认为NaN都是同一个，只会添加一次。

     将Set转为数组的方法：

[code]方式一：
var myset=new Set([111,222]);
var arr=[...myset]
方式二：
var myset=new Set([111,222]);
var arrs=Array.from(myset);

myset:{111,222}
这里的arr和arrs都为[111, 222]

Map

Map类型（字典类型）是一种更完善的Hash结构实现。也就是我们常说的“键值对”的数据结构，它类似于对象为键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map比Object更适合表示键值对，或者说更加专业。例如：

[code]var mymap=new Map()
mymap.set("name","zs")
这时调用我们的mymap就为：
{"name"=>"zs"}

Map的方法：size、set、get、has、delete、clear 

[code]size  ---->相当于我们length，但是Map类型没有length属性，是用size代替；
set   ---->相当于添加，第一个参数为键名，第二个参数为值；
get   ---->获去某一个，参数为键名；
其他的has,delete,clear都跟上面的Set一样；
但是它的forEach方法与数组的forEach方法一样

 Promises

Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise

所谓Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，它可以获取异步操作的消息。 并返回一个含有此消息的promise对象

Promise对象提供统一的接口，使得控制异步操作更加容易。

[code]var p=new Promise(function(suc,fail){
//发起异步操作，ajax请求
if(*异步操作成功*){
suc(value);//在异步操作成功时调用，返回异步操作结果
}else{
fail(err);//在异步操作失败时调用，返回异步操作结果
}
})
var p1=p.then(function(data){
console.info(data);
//发起第二次请求
//返回请求结果
})

其中的参数suc代表成功执行时要做的操作；fail代表失败时要做的操作

.then()方法：

then方法可以接受两个回调函数作为参数。

第一个回调函数是Promise 对象的状态变为suc时调用，

第二个回调函数是Promise 对象的状态变为fail时调用。

其中，第二个函数是可选的，不一定要提供。

这两个函数都接受Promise 对象传出的值作为参数。

关于catch方法

正常情况then方法会接受两个参数，分别表示成功的处理函数和失败的处理函数。

但是很多时候我们可能含有多个then方法，这时如果要每个then里面都写上失败处理函数就太麻烦了，这时我们就可以使用catch方法。

我们在最末尾加上catch方法，那么它就可以捕获前面任何地方产生的错误，如下：

[code]//得到一个新的Promise
var p = new Promise((suc, fail) => {
//与后端连接并传入参数
$.get("http://127.0.0.1:8081/one",{username:"admin",password:"123"},data => {
if (data.username == "admin") {
suc(data)
} else {
fail(data)
}
})
}).then(data => console.log(data))
.then(data => console.log(data))
.catch(data => console.log("失败", data))

注意：

         一旦在catch前的某个then方法中写了第二个参数用于捕获错误，那么当前错误就会到此停止，后面就是正确的流程了。

如果在后面的流程中没产生其他错误，那么catch方法也不会再执行，如果出错了，那么catch仍然会继续执行。

Promise对象的两个特点

1. 对象的状态不受外界影响。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

      2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise 对象的状态改变，只有两种可能：从进行中变为已成功和从进行中变为已失败。只要这两种情况发生，状态就不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于进行中状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

使用Promise连续发起多次请求

如果要使用promise发起多次请求，那么从第二次开始我们就要把每次的ajax方法放入一个promise对象中，最后将promise对象返回，这样外部才会获取到本次请求的结果。

fecth

fetch定义

fetch就是除了XMLHttpRequest以外从前端获取后端数据的方法

fetch的使用方法

语法：fetch(url,init).then(function(response) { } )

其中url是指后端接口的路径，init是一个对象，里面包含一堆参数，比如：method--->向后端请求时的方法是get还是post;

body:------>post才具有的属性，传入的参数，比如：

[code] fetch("http://127.0.0.1:8085/three", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"},//post才具有的请求头
body: JSON.stringify({ username:"zs", password: "123" }),
})