ES6的常用新特性

1.let && const

1. var 【es5中的】
   1) 可以重复声明 var a =3 ; var a = true;
   2) 变量的声明会被提升
   3) 没有局部作用域

for(var i=0;i<100;i++){
	console.log(i);
}			

2. let 【变量的声明】
   1) 不可以重复声明
   2) 变量声明不会被提升
   3) 具有局部作用域
3. const 【常量声明，设定后值不会再改变】
   1) 不可以重复声明
   2) 变量声明不会被提升
   3) 具有局部作用域
   4) 常量的值无法改变

2.iterable类型

为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

3.解构赋值

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

1. 对象解构
   定义： 可以一次性从对象或者数组中获取多个值，并且把这些值赋值给不同的变量

//let {name,age} = {name:"terry",age:12}
//let {name:name,age:age} = {name:"terry",age:12}
//let {name:name,age:gender} = {name:"terry",age:12}
let {name,age:gender} = {name:"terry",age:12}

let obj = {
	realname:"terry",
	address:{
	province:"山西省",
	city:"太原市",
	area:"尖草坪"
	}
}
let {realname,address:{city}} = obj;

2. 数组解构

//let [a,b,c] = [8,2,5];
let [a,a1,a2,[b,b2,b3]] = [8,2,5,[12,3],4];
console.log(a,b,b3);

4.延展操作符

通过它可以将数组作为参数直接传入函数：
… 剥离

let o1 {
	name:"terry",
	...o2
}
let o2 = {
	age :12,
	gender:"male"
}
console.log(o1);     
//o1{name:"terry",age :12,gender:"male"}

5. apply&call

apply和call，都是对象本身没有某个属性或者方法，去引用其他对象的属性或方法，也就是说两者都可以改变this的属性

不同之处
apply(this的指向，数组/arguments)
call(this的指向，参数1，参数2，参数3)

var name ="your的name";
var obj = {    
	name:"obj的name",    
	showName:function(v1,v2,v3){
		console.log(v1,v2,v3)
    }
}
obj.showName.apply(window,[10,20,30]);	//10 20 30
//apply括号里的是谁，调用的前面的函数里面的this就是谁

var color = "yellow";
function showColor(){
	console.log(this.color)
}
var obj = {
	color:"red",
}
showColor();	//yellow
showColor.apply(obj);	//red
showColor.call(obj);	//red
showColor.apply(this);	//yellow
showColor.call(window);	//yellow

6.函数的简写

1. 函数声明在对象中

let obj = {
	sayName(){
		console.log(this.name);
	}
}

相当于

let obj  = {
	sayName:function(){
		console.log(this.name);
	}
}

2. 函数声明在参数中（回调函数）【箭头函数】

说明： 箭头函数中的this的取值为该箭头函数外部函数的this，如果箭头函数没有外部函数，那么这个this就指向全局对象。
特点： ES6中新增箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。

1. 极简模式

item表示形参，xxx为返回结果（方法体中只有这一个表达式）

item=>xxx
等价于
function(item){return xxx}

例如：从一个数组中筛选出满足条件的值
let result = arr.filter(item=>item.gender === "male")

2. 普通模式

当形参有多个的时候，参数必须添加小括号，当方法体中有多个表达式，方法体一定要加大括号

let result = arr.filter((item,index)=>{
	console.log(index);
	return item.gender === "male"
})

3. this指向

箭头函数还修复了this的指向，使其永远指向词法作用域：

let obj = {
	data:{
		name:"one",
		list:[1,3,4,2]
	},
	foo(){
		this.data.list.forEach((item)=>{
			//箭头函数的this指向外部函数的this也就是obj
		 	console.log(this.data.name);
		 })
	},
	bar(){
		let o = this;
		this.data.list.forEach(function(item){
		//回调函数的this指向global，而我们需要访问obj对象，所以提前先将obj保存到变量o中
			console.log(o.data.name);
		})
	}
}
obj.foo();
obj.bar();

7.类

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。

定义：es5中构造函数的语法糖

1. 构造函数

function Animal(name){
	this.name = name;
}
Animal.prototype.sayName = function(){
	console.log("my name is ",this.name);
}

function Dog(name,age){
	// 借用构造函数继承
	Animal.call(this.name);
	this.age = age;
}
// 原型链继承
Dog.prototype = new Animal();
Dig.prototype.sayAge = function(){
	console.log("my age is ",this.age);
}

let d = new Dog("一休",2);
s.sayName();
s.satAge();

2. class

class Animal {
	// 构造函数
	constructor(name){
	this.name = name;
}
	// 普通函数
	sayName(){
		console.log("my name is ",this.name);
	}
}

class Dog extends Animal {       //原型链继承
	constructor(name,age){
		super(name); 			//借用构造函数
		this.age = age;
	}
	sayAge(){
		console.log("我的年龄",this.age);
	}
}
let dog = new Dog("一休",2.5);
dog.sayName();
dog.sayAge();

8. 创建对象

ES5中创建对象的几种方法：

1. 字面量法
2. 工厂模式
3. 构造函数
4. 组合方式 构造函数+原型模式

ES6中创建对象

class 类名{
	//肯定存在一个构造函数
	//如果不写构造函数，有一个默认的构造函数,内容为空
    constructor(){}  //注意：这里不需要逗号
    //下面是函数属性 比如属性有run  dark
    run(){}
    dark(){}
}

比如

class Person{    //肯定存在一个构造函数
    constructor(name,age,sex,nativePlace){
    	this.name=name;//注意：这里是分号
        this.age=age;        
        this.sex=sex;        
        this.nativePlace=nativePlace;
    }    //下面是函数属性
    eat(){console.log("红烧排骨")}
    study(){console.log("英文")}
    play(){console.log("敲代码")}
}
var sunShine = new Person(
	"fanfan",
	"22",
	"女",
	"黑龙江"
);
console.log(sunShine)
//Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龙江"}