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:項目的名稱；