## ES6新特性

ES6新特性

1.const、let关键字
①const：用来定义一个常量，一旦定义后是不可以修改的。注意：如果用来定义引用类型，是可以修改他的属性值的

	const PI = 3.14;
	console.log(PI);//3.14
	//PI = 10; //报错：常量不可以重新赋值
	const PERSON = {'age':17};
	console.log(PERSON.age);
	PERSON.age = 16;//引用类型可以重新赋值
	console.log(PERSON.age);
	

②let：用来定义块级作用域的的变量，详细用法和解释可以参考：https://www.cnblogs.com/JuFoFu/p/6726359.html

	if(1){
	    let jj = 'tim';
	    console.log(jj);
	}
	//console.log(jj);//报错 ReferenceError: jj is not defined

2.箭头函数
第一：单箭头函数

function a(a,b){//普通函数的写法
	   console.log(a + b);
	}
	a(2,1);
	ad = (e,f)=> {//箭头函数的写法相对简单整洁
	    console.log(e+f)
	};
	ad(22,11);

第二种：双箭头函数

let getters = {
    total: (state) => (symbol) => {
        return (symbol || '$') + state.count;
    }
}

转化后

let getters = {
    total: (state) => {
        return (symbol) => {
                    return (symbol || '$') + state.count;
                }
    }
}

如果要调用方法的话需要这样写：getters.total()()

3.this关键字
有箭头函数，this的指向问题就可以轻松解决，没有的话需要用第二、三种方法去处理，比较麻烦，第一种写法直接是报 错的。

var kitty1 = {
	    age:1,
	    grow: function(){
	        setTimeout(function(){
	            console.log(this.age);
	            console.log(++this.age);
	        },100);
	    }
	};
	var kitty2 = {
	    age:1,
	    grow: function(){
	        const self = this;
	        setTimeout(function(){
	            console.log(self.age);
	            console.log(++self.age);
	        },100);
	    }
	};
	var kitty3 = {
	    age:1,
	    grow: function(){
	        setTimeout(function(){
	            console.log(this.age);
	            console.log(++this.age);
	        }.bind(this),100);
	    }
	};
	var kitty4 = {
	    age:1,
	    grow: function(){
	        setTimeout(() =>{
	            console.log(this.age);
	            console.log(++this.age);
	        },100);
	    }
	};
	kitty1.grow();//undefined  NaN
	kitty2.grow();//1  2
	kitty3.grow();//1  2
	kitty4.grow();//1  2

4.函数的默认参数

function desc(name = 'peter',age = 18){
	    return name + ' is ' + age + ' years old';
	}
	var de = desc();
	console.log(de);//peter is 18 years old

5.Rest参数
当一个函数的最后一个参数有 “…” 这样的前缀，它就会变成一个参数的数组。
注：其实rest参数和参数组arguments的区别：
①Rest是没有指定变量名称的参数组，有可能仅是参数的一部分，而arguments是所有参数的集合。
②arguments是对象不是数组，而Rest是真正的数组。

function test(...args){
console.log(args); // [ 1, 2, 35, 66 ]
    console.log(Array.isArray(arguments));//false
    console.log(Object.prototype.toString.call(args) === '[object Array]');//true
    console.log(args.length);// 4
    console.log(typeof(args));//object
}
test(1,2,35,66);

function test2(abc,...args){
    console.log(abc);// 9
    console.log(arguments);//{ '0': 9, '1': 4, '2': 77, '3': 23 }
    console.log(args);// [ 4, 77, 23 ]
    console.log(args.length);// 3
}
test2(9,4,77,23);

6.展开操作符“…”
对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
多用于react文件：https://segmentfault.com/q/1010000015225190?utm_source=tag-newest
redux里面的reducer：https://www.cntofu.com/book/4/docs/recipes/UsingObjectSpreadOperator.md
①用于函数调用

function test(x,y,z){console.log(x+y+z);}
		var arg = [1,2,3];
		test.apply(null,arg);

	//使用ES6后，可以简化为已下代码
	function test1(x,y,z){console.log(x+y+z);}
	let args = [1,2,3];
	test(...args);
②用于数组字面量
	var arr1 = [1,23,3];
	var arr2 = [4,5,6];
	console.log(arr1.concat(arr2)); // [ 1, 23, 3, 4, 5, 6 ]
	console.log([...arr1,...arr2]); // [ 1, 23, 3, 4, 5, 6 ]
③对象的展开运算符
	var jack = {name:'jack',age:18}
	jack ={...jack,sex:'male'}
	console.log(jack);// { name: 'jack', age: 18, sex: 'male' }

7.模板字符串

let name = 'tom';
	let detail = `my name is ${name}`;
	console.log(detail);//my name is tom
	let add =`this is beautiful day,
					I love it,
					I can play outside with my friends`;
	console.log(add);

8.解构赋值
①解构数组

let food =['apple','orange','been'];
		let [one,two ,three] = food;
		console.log(one,two,three);//apple orange been
		console.log(`${one},${two},${three}`);//apple orange been

②解构对象
	let food ={name:'orange',age:15};
	let {name,age} = food;
	console.log(name,age);//orange 15
	console.log(`${name},${age}`);//orange 15

9.class类

    constructor方法：类的默认方法，通过new命令生成对象实例时，自动调用该方法。
	
	super:关键字用于访问父对象上的函数。
	
	es6的static方法：不需要实例化类，即可直接通过该类来调用的方法，即称之为“静态方法”。注意：这样该方法就不会被实例继承！
	
	get和set方法：将方法的调用赋值在get、set方法上，使用时无需调用
	

class Animal{
	    constructor(name,age){
	        this.name = name;
	        this.age = age;
	         console.log('自动执行');//当实例化对象时该行代码会执行。
	    }
	    get prop(value) {
		     return 'getter'+value;
		 }
		 set prop(value) {
		     console.log('setter: '+value);
		 }
	    shot(){
	        console.log(`my name is ${this.name},age is ${this.age}`);
	    }
	    //静态方法
	    static foo(){
	        console.log('Here is static method');
	    }
	}
	const cow = new Animal('James',3);
	cow.shot();
	Animal.foo();
	
cow.prop = 123;
// setter: 123

cow.prop
// 'getter'

class Dog extends Animal{
    constructor(name,age = 2,color = 'red'){
        //构造函数中可以直接使用super方法
        super(name,age);
        this.color = color;
    }
    shot(){
        //非构造函数中不能直接使用super方法，但可以使用super.+父类方法名
        console.log(super.shot()+`, color is ${this.color}`);
    }
}
const JanpanDog = new Dog('jack');
JanpanDog.shot();

10.模块
①单一模块导出导入

//hello.js文件
		function hello(){
			console.log('hello world');
		}
		export hello;
	//main.js文件
		import hello from './hello';
		hello();// hello world

②多模块导入导出

//hello.js
	export PI = 3.14;
	export function hello(){
		console.log('hello world');
	}
	export let person = {name:'wide'};
//main.js解构
	//使用对象解构加载这个三个变量
	import {PI,hello,person} from './hello';
	console.log(PI);
	或者import * as util from './hello';

console.log(util.PI);

③使用default关键字来实现模块的导出（适合单一模块导出）
注意：1.一个模块只能有一个export default，2.export default导出的模块在import的时候不需要{ }。

//hello.js文件
		export default function (){
			console.log('hello world');
		}
	//main.js文件
		import hello from './hello';
		hello();// hello world

11.event
事件包含的方法由on(), off(), offAll(), emit()等