ES6语法（第一节）

Es6语法基础

1、插件

运行插件 code runner
高低版本转换插件 babel

2、let

let定义的变量，{}中的变量都是局部变量；var声明的变量在{}中的变量外部可以访问，只有遇到函数的时候才是局部变量。
要注意let和var的区别。
（1）块级作用域

let arr=[];
		  for(let i=0;i<3;i++){
				arr.push(function(){
						console.log(i);
				})	
			}
			console.log(arr[0],arr[1],arr[2])
			输出结果为：0,1，2

因为let是局部变量，是可以在{}中获取到的。

		  for(var i=0;i<3;i++){
				arr.push(function(){
						console.log(i);
				})	
			}
			console.log(arr[0],arr[1],arr[2])
			输出结果为：2,2,2

因为var是遇到函数即为局部变量，因此在函数中获取不到变量i,就会往外找全局变量i,即等循环过后才能取到变量I，因此输出全为2。
(2)变量的提升

console.log(str);
var str='11'

变量提升，输出结果为undefined

console.log(str);
let str = '1';

运行会报错

3、顶层对象的属性

浏览器环境是指window对象，在node指的是global对象。
Es6中全局变量和顶层对象脱钩
（1）let,const,class定义的全局变量不属于顶层对象；
var，function定义的全局变量属于顶层对象。
（2）globalThis对象
全局环境中，this会返回顶层对象，但是在node模块和Es6模块中，this会返回当前模块。
函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。

function demo(){
	console.log(this);
}
demo();

这里的this是顶层对象。node模块和ES6模块默认为严格模式。
不管是严格模式还是普通模式，new function（‘return()’）(),总是会返回全局对象，但是，如果浏览器使用了csp，那么eval，new，function这些方法都无法使用。

4、const

const 声明一个只读的常量，一旦声明，常量的值就不能改变，发生改变就会报错。

const obj={user:'wrj'};
obj.user = 'yh';

这样是不会报错的，因为对象时地址引用型数据。只是不能将obj修改为新的对象，不能修改引用地址。常量保存的只是一个地址，和对象中的具体内容没有关系。
剩余const属性和let属性相同。

5、解构赋值

原来赋值方式：

let arr = [1,2,3,4];
let arr1 = arr[0];
let arr2 = arr[2];
let user = {name:'wrj',age:'18'};
let name = user.name;
let age = user.age;

ES6语法解构赋值

let arr = [1,2,3];
let [b1,b2,b3] = arr;
console.log(b1,b2,b3);
//输出结果为1,2，3

定义变量的结构和目标数组的结构一致，即定义三个变量b1,b2,b3正好对应arr数组中的三个值。对应位置的变量获取到对应位置的值，也可以定义小于数组长度的变量个数。例如：

let arr = [1,[2,[3,[4]]]];
let [c1] = arr[0];//值为1；
let [c1,[c2,[c3,[c4]]]] = arr;
console.log(c1,c2,c3,c4);
//结果为1,2,3,4，
let [,[,[d3,[]]]] = arr;
//d3 为3
arr1=[];
let [f1 = 2] = arr1; //能取到值就赋值为取到的值，否则赋值为默认值2

rest参数：

[a1，...rest] = 	[1,2,3,4,5];
a1 = 1;
rest = [2,3,4,5]; //存储剩余的元素

对象的结构赋值：定义变量名称和对象中的属性名一样。

let obj = {
	user:'wrj',
	age:'18',
	sex:'nv',
}
let {age,user,sex} = obj;
console.log(user,age,sex); // 结果为'wrj','18','nv'

let obj2 = {
	info:{
		text:'1111',
	}
}
let {info:{text}} = obj2;
//此时info为模式，取不到值
let {info,info:{text}} = obj2;
//用这种方式取info 
let {info:{text:text1}} = obj2;
//把text变量名重新命名为text1；

函数的参数的解构赋值
例如：

function demo([a1,a2,a3,a4]){
	console.log(a1,a2,a3,a4); //1,2,3，4,
}
demo([1,2,3,4])
//默认值的写法
function demo1({a=5,b=6} = {}){
	console.log(a,b); //5,6
}
demo1();

async函数

语法：

async function demo(){
	await 1; //执行完成后才会往下执行 await也能执行.then方法
	await 2;
	return 123;
}
demo();
//返回是promise类型
demo().then(function(data){
	console.log(data);
}).catch(){
}

整理

1、对象的扩展
（1）属性简介表示法

let num = 10;
let obj = {
	num,
	demo(){},
}

(2)属性名表达式

let str = 'uname';
let obj = {
	[str]:'kevn'
}

(3)object.is()全值相等
功能和===基本上一样，除了 +0 不等于 -0， NaN 等于 NaN
(4)object.assign() 合并对象
可枚举性的属性和方法才可以被合并
2、promise
容器 存储未来才会结束的事件的结果

new Promise(function(resove,reject){
	//一般存放异步的代码 手动调用
	resolve(data);
	reject(err);
})

三个状态： pending 初始状态 、resolved 请求成功、rejected 请求失败
promise.prototype.then(function(data){},function(err){})
promise.all([p1,p2,p3]),让p1,p2,p3并发执行，若都执行成功则返回成功结果，若一个失败，则返回失败结果。
promise.race([p1,p2,p3]) 获取最快执行完成的结果。
promise.allSelect([p1,p2,p3])，多个promise实例并发执行，并返回所有的执行结果，不管成功还是失败。
3、generator函数
状态机 每次调用next()才能往下执行
语法：
function * demo(){
yield promise.resolve;
yield …
}
co库 可以自动执行
4、async 函数
是generator的语法糖
（1）错误捕获
async函数返回一个promise对象
promise对象的状态变化：默认的，async函数返回的promise对象，必须等到内部所有await命令后面的promise对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误
任何一个await语句后面的promise对象变为reject状态，那么整个async函数都会终端执行，则reject的参数会被catch方法的回调函数接收到
（2）await
正常情况下，await命令后面是一个promise对象，返回该对象的结果，如果不是promise对象，就直接返回对应的值。

推荐链接

es6.ruanyifeng.com/#docs/async#语法