ES6的特性

参考其他博客资料，理理ES6特性。

 1.箭头操作符

       我们在写js的时候，会经常用到回调函数，每次用回调的函数，都会用到function，而ES6的箭头操作符就与function作用相似，让代码更简洁。

    

var a = document.getElementById('a');

a.onclick = function(){
 console.log(this);
}
//相当于
a.onclick = () => {
	console.log(this);
}
	

2.支持类的使用

    在新的ES6特性中，引入了class关键字，与java中使用类似，面向对象的操作。

class person{
	constructor(name) {
		this.name = name
	}
		
	getName () {
		console.log('my name is ' + this.name);
	}
}
class family extends person{
	constructor(name){
		super(name);
	}
		
	record(){
		console.log('record...' + this.name);
	}
}
	
var person1 = new person('zhangsan');
var family1 = new family('wang wu');
person1.getName();
family1.getName();
family1.record();

结果如下：

3.模板字符

    在ES5中，我们常用的模板字符是用拼接的方法

var a = "11";
var b = "22";
var c = a + ":" + b;
console.log(a + b);
console.log(c);

   ES6中模板字符使用 `` 来连接字符串，里面的变量用${xxx}，让代码简单明了，如下：

var a = "11";
var b = "22";
var c = `${a}:${b}`;
console.log(`${a}${b}`);
console.log(`${c}`);

4.解构赋值

    ES5中赋值和在ES6中赋值的区别：

var user = document.getElementById('xxx');
var id = user.id; 
var href = user.href;//ES5

var {id,href}=document.getElementById('a')//ES6

很明显，代码量比之前简洁得多，同样，如json，数组都可以解构。

var [a,b] = [1,2,3,4,5];//结果为 a = 1 ; b = 2;

var [c,,d] = [1,2,3,4,5]; //结果为 c = 1 ; d = 3; 

var [e,f,...g] = [1,2,3,4,5]; //结果为e = 1 ; f = 2 ; c = [3,4,5] ;     //数组解构

var {t1,t2,tt} = {
 t1 : 't1',
 t2 : 't2',
 tt : 'tt'
}
console.log(t1,t2,tt); //结果为 t1,t2,tt      //json解构

var {t1,t2,...tt} = {
 t1 : 't1',
 t2 : 't2',
 tt : 'tt',
 ts : 'ts'
}
console.log(t1,t2,tt); //结果为 t1,t2,{tt:'tt',ts : 'ts'}  ...xx的时候是指剩余的对象

5.let 和 const

 let有着var没有的特点，就是let的块级作用域，下面让我们试一下let与var的区别：

{
 var a = 1;
 let b = 1;
 console.log(a,b);a = 1 , b = 1
}
 console.log(a,b);//a= 1 ; ReferenceError

我们再看一个经典的例子:

for(var i = 0 ; i < 4 ; i ++)
{
 console.log(i);
}
console.log(i);
//第一个i的结果为 0,1,2,3
//第二个i的结果为 4
for( let a = 0 ; a < 4 ; a ++)
{
 console.log(a);
}
 console.log(a);
//第一个a的结果为 : 0,1,2,3
//第二个a的结果为 : ReferenceError，a is not define

以上例子可以说明var不存在块级作用域，let因为块级作用域不会用于全局变量，所以在作用域外时，会出现没有定义的错误。let的作用域可以理解为闭包，闭包就是所在作用域中， 可以引用上一级的对象，而上一级作用域不能使用闭包中的对象、变量。let不能重复定义，而且没有变量提升，看一下例子：

var a = 0;
var a = 1;
console.log(a);//a = 1;
let b = 0 ;
let b = 1;
console.log(b);//'b' has already been declared

console.log(a);
var a = 0 ; //undefine
console.log(b);
let b = 0;//b is not defined

总结一下let特点：（1）. 无变量提升 （2）.有块级作用域 （3）.不能重新声明

const与let特点相同，但const只能声明静态的变量，不能改变其值，需要初始化

const a; //Missing initializer in const declaration
const b = 0 ;
//const b = 1;    //'b' has already been declared
 b = 1;  //Assignment to constant variable.

6.函数默认值

//ES5
function test(num , name){
 num = num || 0;
 name = name || 1;
}
//test(); // num = 0 ; name = 1;
//test(11,22) // num = 11 ; name = 22;

这个是ES5在函数内部定义的默认值，ES6设置默认值的方法，就是在函数设置虚参的时候，可以设置默认值。

function test(num , name = 2){
 console.log(`${num} : ${name}`);
}
test();//结果为undefine,2 

7.Promise

 promise运用在ES6中，是将回调函数一个一个分离出来，形成一个单链形式。

var p1 = new Promise(function(resolve,reject){
	resolve('200 OK');//回调函数
}).then(function(data){//接收值
	console.log(data);
})

以上就是ES6中，promise简单的例子，将resolve回调函数变成单链，将值传给data，再进行以后的操作。

var p1 = new Promise(function(resolve,reject){
	var rad = Math.random();
	if(rad > 0.5)
	 resolve('200 OK');
	else
	 reject('error');
}).then(function(data){
	console.log(data);
}).catch(function(error){//第二个回调reject值
	console.log(error)
})

而用第二个回调reject的时候，用catch接收，通过是判断异常

8.For遍历

var Ary = ['a','b'];
for(a of Ary)
{
 cosnole.log(a);
}

类似与foreach，直接遍历出结果，结果为a,b。与foreach不同的是，它可以使用break，continue，return语句。同时它也避免了for in，传入字符串的不便情况；

9.Iterator 与 Generator

Iterator（迭代器）是任意具有.next()方法的对象。可以循环调用.next()方法，例子如下：

var iterator = {
	iter : function(){
		return this;
	},
	next : function(){
		return {done : false,value:0}
	}
}
	
var p = iterator.iter();
console.log(p);
var q = p.next();
console.log(q);
p = p.next();
q = q.next();

以上就是迭代器，其中具有done和value属性，每次next以后，value的值都为0。

Generator（生成器）是一种返回迭代器的函数，用function* XX（）使用，例子如下：

function* test(){
 var a = 0,
     b,c,d;
     b = 1;
     console.log(b);
     yield c = 2;
     console.log(c);
}
var p = test();
p.next();

yield的好处是可以控制，yield相当于return，但yield可以使函数运行到yield时候，停止函数，等待下一次的函数。而运行到yield函数的done是false，为未执行状态。

10.模块

模块是指将不同功能代码写在不同的代码块中，然后导出模块，在其他模块中运用其模块。

//test.js

    export var a = Math.random();
    
	export function sqr(){
		return a * a;
	}
	
	export function cir(){
		return a * 4;
    }

//main.js中
 	import {cir,sqr} form './test';
 	console.log(cir());
        console.log(sqr());

其模块的特点：

    1.每一个模块只加载一次，每一次只运行一次js。

    2.每一个模块变量都是局部变量，不会全局变量。

    3.函数内部变量、函数可以用export导出

    4.一个模块可以导入其他模块