ES6新增功能

一、块做用域-let

（1） 在es6以前，js只用全局做用域、函数做用域，如今新添一个块做用域 使用 let 和 const建立块做用域，他们声明的变量只存在块内 ，及在{}中使用let定义一个变量，变量在{}外部没法访问；

if(true){
	let temp = 123;
}
console.log(temp);
//Uncaught ReferenceError: temp is not defined

相比之下，使用var声明的变量，在整个做用域内有效

if(true){
	var temp = 123;
}
console.log(temp);
//123

（2）let不存在变量提高，var 会是变量定义提高；

console.log(foo);// 报undefined
var foo = "abc";
console.log(str);//报is not defined;
let str ;

(3)es6规范明确，若是代码块出现let,const声明，那么一旦造成了封闭做用域，在声明以前使用就会报错；

var foo = 100;
if(true){
	foo = "abc";//is not defined
	let foo;
}

二、const建立不可变的变量（常量）

const fruit = 'apple';
const fruit ='orange';
console.log(fruit)//apple

注： const限制的是给恒量分配值的动做，并非限制恒量里面的值；

fruit.push('apple');
fruit.push('orange');
console.log(fruit);//["apple", "orange"]

fruit=[];
console.log(fruit);//Uncaught TypeError: Assignment to constant variable.

三、解构数组-Array Destructuring

var [a, b, c] = [1, 2, 3];

上面代码表示，能够从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];//foo // 1    bar // 2     baz // 3


function fun(){
	return ['apple','water','icecream'];
}
let [fruit,drink,sweets]=fun();
console.log(fruit,drink,sweets);//apple water icecream

四、解构对象-Object Destructuring

var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

对象的解构与数组有一个重要的不一样。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

也就是说，对象的解构赋值的内部机制，是先找到同名属性，而后再赋给对应的变量。真正被赋值的是后者，而不是前者。

function fun(){
	return {fruit:'apple',drink:'water',sweets:'icecream'};
}

let {fruit:a1,drink:a2,sweets: a3}=fun();
console.log(a1,a2,a3);//apple water icecream

初始化：

var {x = 3} = {};//x =3;
var {x:y = 3} = {x: 5};//y=5;

函数参数结构：

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

五、模板字符串-Templates String

let fruit='apple',drink='water';
	let str = '这里有水果'+fruit+'饮料'+drink;
	console.log(str);
	let str2 = `这里有水果${fruit}饮料${drink}`;
	console.log(str2);
	//这里有水果apple饮料water

注：str2 中的反引号是按键 ~ 出的反引号

六、带标签的模板字符串- Tagged Templates String

<script type="text/javascript">
let fruit='apple',drink='water';
// let str = fun'这里有水果'+fruit+'饮料'+drink;
let str = fun`这里有水果${fruit}和饮料${drink}`;
function fun(strings,...values){
	console.log(strings);//["这里有水果", "和饮料↵", "", raw: Array[3]]
	console.log(values);//["apple", "water"]
}
console.log(str);//undefined

注：

• 在此处fun标签至关一个函数，改函数包含两个参数；
• strings:表明中字符串中字符的集合；
• values:表明字符串中变量的集合；

七、判断字符中是否包含其余字符串

使用 let 定义一个字符串 str

• str.startsWidth('');//判断字符串是否以某个字符串开头；
• str.endsWidth('');//判断字符串是否以某个字符串结尾；
• str.includes('');//判断字符串是否包含某个字符

八、默认参数-Default Parameter Values

function fun(fruit='apple',drink='water'){
	return `${fruit}和${drink}`;
}
console.log(fun());//apple和water
console.log(fun('orange','tea'));orange和tea

九、展开操做符-Spread

es6新增的操做符 '...'

let str=['apple','water','icecreams'];
console.log(str);//["apple", "water", "icecreams"]
console.log(...str);//apple water icecreams

十、剩余操做符-Rest

function fun(fruit,drink,...other){
	cnsole.log(fruit,drink,other);
}
fun('apple','water','orange','tea','icecreams');
//apple water ["orange", "tea", "icecreams"]

注：fun函数中除了传入两个参数外，还能够传入n个参数，可是其他传入的参数被放在了other的数组中

十一、解构参数-Destructured Parameters

function fun(fruit,drink,{fruit1,drink2} = {}){
	console.log(fruit,drink,fruit1,drink2);
}
fun('apple','water',{fruit1:'Orange',drink2:'tea'});
//apple water Orange tea

十二、获取函数的名称-name属性

function fun(arguments){}//函数声明
console.log(fun.name);//fun
let fun1=function(arguments){};//匿名函数声明
console.log(fun1.name);//fun1
let fun2=function superFun(arguments){}
console.log(fun2.name);//superFun

1三、箭头函数-Arrow Functions

let fun=(fruit,drink)=>{return fruit+"  "+drink};
console.log(fun('apple','tea'));

=>至关于

var fun=function(fruit,drink){
	return fruit+"  "+drink
}
console.log(fun('apple','tea'));

1五、对象表达式

let fruit='apple',drink='tea';
let obj={
	fruit:fruit,
	drink:drink,
	fun=function(){}
}
如上所示，当属性名与属性值的变量名相同时，能够只写一个变量，
let obj={fruit,drink,fun(){}};

1六、对象属性名

let obj={};
obj.name='xiaohong';
当对象的属性名带有空格时要写成以下这种形式：
obj['fruit drink']
当对象的属性名为变量是，要写成以下形式：
var str='frui drink';
obj[str]='';

1七、把对象的值复制到另外一个对象里-Object.assign

let fruit={}
Object.assign(fruit,{drink:'tea'})
console.log(fruit.drink);//tea

**注：**Object.assign方法里面有两个参数，第一个参数是接受者，复制到的对象；第二个参数是复制原，将第二个参数的对象复制到一个参数的对象中

1八、设置对象的prototype-ObjectsetPrototypeOf()

在建立对象后能够改变对象的prototype（实例的原型对象）

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday=Object.create(fruit);
console.log(sunday.getFruit());//apple
console.log(Object.getPrototypeOf(sunday)===fruit);//true

Object.setPrototypeOf(sunday,drink);
console.log(sunday.getDrink());//apple
console.log(Object.getPrototypeOf(sunday)===drink);//true

**注：**Object.setPrototypeOf()方法有两个参数，第一个是实例名称，第二是实例对象所要指向的原型对象

1九、__proto__

__proto__指向实例对象的原型对象

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday = {
	__proto__:fruit
}
console.log(sunday.getFruit());//apple
console.log(Object.getPrototypeOf(sunday));//{getFruit: ƒ}

sunday.__proto__=drink;
console.log(Object.getPrototypeOf(sunday));//{getDrink: ƒ}

20、super

super在函数中调用的是原型中的属性，方法；

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday = {
	__proto__:fruit,
	fun(){
		return super.getFruit()+" Orange";
	}
}
console.log(sunday.fun());

2一、类-class

class chef{
	constructor(food){this.food = food}
	cook(){console.log(this.food)};
}	
let obj=new chef('apple');
obj.cook();//apple

**注：**class方法中不须要逗号隔开

2二、get和set方法

• get：获得值

• set：设置值

  class chef{
    	constructor(food){this.food = food;this.dish = []}
    	get menu(){return this.dish; }
    	set menu(dish){return this.dish.push(dish)};
    }	
    let obj = new chef();
    console.log(obj.menu="apple");//apple
    console.log(obj.menu="orange");//orange
    console.log(obj.menu);//(2) ["apple", "orange"]

2三、静态方法-static

class chef{
	constructor(food){this.food = food;this.dish = []}
	static cook(food){console.log(food)};
}	
chef.cook('orange');//orange

**注：**静态方法能够不用实例化就能够直接调用；

2四、继承-extends

class Person{
	constructor(name,age){this.name = name,this.age = age}
	intro(){return `${this.name}有${this.age}岁了`}
}
class chef extends Person{
	constructor(name,age){super(name,age)}
}

let obj = new chef('xiaohong','5');
console.log(obj.intro());//xiaohong有5岁了

2五、Set

Set是一组数据的集合

let fruit = new Set('orange','apple',);

• .add('') : 添加数据；
• .size :返回集合的长度；
• .has('') : 验证集合中是否包含某条数据；
• .delete('') : 删除指定数据；
• .forEach(key=>({}) : 遍历集合中全部数据；
• .clear('') : 清空集合；

2六、Map

Map是一组名词性数据结构的集合

let food = new Map();
let fruit = {},cook=function(){},sweets='iceCreams';
food.set(fruit,'apple');//添加一个fruit项目
food.set(cook,'fire');//添加一个cook项目
food.set(sweets,'Iice');//添加一个sweets项目
console.log(food.size);//3
console.log(food.get(fruit));//apple
food.delete(cook);
console.log(food.has(cook));//false;
food.forEach((value,key)=>{
	console.log('$(key) = $(value) ');
})
foode.clear();//清空数据

• .set('项目名称','项目值')*:添加一个项目,第一个参数项目的名称，第二个参数是项目的值；
• .size:获得项目的个数；
• .get(项目名称)：获得项目的值；
• .delete(项目名称)：删除指定项目；
• .has(项目名称)：判断是否有该项目；
• .forEach((value,key)=>{}):遍历集合中的数据，value：项目的值，key:项目的名称；