1.新的聲明方式

字面理解ES6的三種聲明方式：

• var 它是variable的簡寫，可以理解成變量的意思。
• let 它在英文中是“讓”的意思，也可以理解為一種聲明的意思。
• const 它在英文中也是常量的意思，在ES6也是用來聲明常量的，常量你可以簡單理解為不變的量。

2.變量的解構賦值

• 數(shù)組的解構賦值：

以前，為變量賦值，我們只能直接指定值。比如下面的代碼：

let a=0;
let b=1;
let c=2;

而現(xiàn)在我們可以用數(shù)組解構的方式來進行賦值。

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

上面的代碼表示，可以從數(shù)組中提取值，按照位置的對象關系對變量賦值。

• 數(shù)組模式和賦值模式統(tǒng)一

可以簡單的理解為等號左邊和等號右邊的形式要統(tǒng)一，如果不統(tǒng)一解構將失敗。

let [a,[b,c],d]=[1,[2,3],4];

如果等號兩邊形式不一樣，很可能獲得undefined或者直接報錯。

• 解構的默認值

解構賦值是允許你使用默認值的，先看一個最簡單的默認是的例子。

let [foo = true] =[];
console.log(foo); //控制臺打印出true

上邊的例子數(shù)組中只有一個值，可能你會多少有些疑惑，我們就來個多個值的數(shù)組，并給他一些默認值。

let [a,b="天天向上"]=['好好學習']
console.log(a+b); //控制臺顯示“好好學習天天向上”

現(xiàn)在我們對默認值有所了解，需要注意的是undefined和null的區(qū)別。

let [a,b="天天向上"]=['好好學習',undefined];
console.log(a+b); //控制臺顯示“好好學習天天向上”

undefined相當于什么都沒有，b是默認值。

let [a,b="天天向上"]=['好好學習',null];
console.log(a+b); //控制臺顯示“好好學習null”

null相當于有值，但值為null。所以b并沒有取默認值，而是解構成了null。

• 對象的解構賦值

解構不僅可以用于數(shù)組，還可以用于對象。

let {foo,bar} = {foo:'好好學習',bar:'天天向上'};
console.log(foo+bar); //控制臺打印出了“好好學習天天向上”

注意：對象的解構與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

• 圓括號的使用

如果在解構之前就定義了變量，這時候你再解構會出現(xiàn)問題。下面是錯誤的代碼，編譯會報錯。

let foo;
{foo} = {foo:'好好學習'};
console.log(foo);

要解決報錯，使程序正常，我們這時候只要在解構的語句外邊加一個圓括號就可以了。

let foo;
({foo} ={foo:'好好學習'});
console.log(foo); // 好好學習

• 字符串解構

字符串也可以解構，這是因為，此時字符串被轉換成了一個類似數(shù)組的對象。

const [a,b,c,d,e,f]="好好學習";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);

3.擴展運算符和rest運算符

• 對象擴展運算符（…）

當編寫一個方法時，我們允許它傳入的參數(shù)是不確定的。這時候可以使用對象擴展運算符來作參數(shù)，看一個簡單的列子：

function fun(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);

}
fun(1,2,3);

這時我們看到控制臺輸出了 1,2,3，undefined，這說明是可以傳入多個值，并且就算方法中引用多了也不會報錯。

• 擴展運算符的用處

我們先用一個例子說明，我們聲明兩個數(shù)組arr1和arr2，然后我們把arr1賦值給arr2，然后我們改變arr2的值，你會發(fā)現(xiàn)arr1的值也改變了，因為我們這是對內存堆棧的引用，而不是真正的賦值。

let arr1=['www','baidu','com'];
let arr2=arr1;
console.log(arr2); 
arr2.push('Google');
console.log(arr1);

控制臺輸出：

["www", "baidu", "com"]
["www", "baidu", "com", "Google"]

這是我們不想看到的，可以利用對象擴展運算符簡單的解決這個問題，現(xiàn)在我們對代碼進行改造。

let arr1=['www','baidu','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('Google');
console.log(arr2);
console.log(arr1);

現(xiàn)在控制臺預覽時，你可以看到我們的arr1并沒有改變，簡單的擴展運算符就解決了這個問題。

• rest運算符

如果你已經很好的掌握了對象擴展運算符，那么理解rest運算符并不困難，它們有很多相似之處，甚至很多時候你不用特意去區(qū)分。它也用…（三個點）來表示，我們先來看一個例子。

function fun(first,...arg){
    console.log(arg.length);
}

fun(0,1,2,3,4,5,6,7);

這時候控制臺打印出了7，說明我們arg里有7個數(shù)組元素，這就是rest運算符的最簡單用法。

• 如何循環(huán)輸出rest運算符

這里我們用for…of循環(huán)來進行打印出arg的值。

function fun(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}

fun(0,1,2,3,4,5,6,7);

4.字符串模版

• 字符串模版

先來看一個在ES5下我們的字符串拼接案例:

let skill='js';
let blog = '我是一名前端工程師，我會 '+skill;
document.write(blog);

ES5下必須用+skill這樣的形式進行拼接，這樣很麻煩而且很容易出錯。ES6新增了字符串模版，可以很好的解決這個問題。字符串模版不再使用‘xxx’這樣的單引號，而是換成了xxx這種形式，也叫連接號。這時我們再引用skill變量就需要用${skill}這種形式了，我們對上邊的代碼進行改造。

let skill='js';
let blog = `我是一名前端工程師，我會${skill}`;
document.write(blog);

可以看到瀏覽器出現(xiàn)了和上邊代碼一樣的結果。而且這里邊支持html標簽，可以試著輸入一些。

• 對運算的支持

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

字符串查找

• 查找是否存在

//es5 中
let skill='js';
let blog = `我是一名前端工程師，我會${skill}`;
document.write(blog.indexOf(skill));

這是網頁中輸出了12，我們還要自己判斷。

ES6直接用includes就可以判斷，不再返回索引值，這樣的結果我們更喜歡，更直接。

let skill='js';
let blog = `我是一名前端工程師，我會${skill}`;
document.write(blog.includes(skill));

• 判斷開頭是否存在

blog.startsWith(skill);

• 判斷結尾是否存在

blog.endsWith(skill)

需要注意的是：starts和ends 后邊都要加s。

• 復制字符串

我們有時候是需要字符串重復的，比如分隔符和特殊符號，這時候復制字符串就派上用場了，語法很簡單。

document.write('skill|'.repeat(3));

5.ES6的數(shù)組

• JSON數(shù)組格式轉換

let  json = {
    '0': '好好學習',
    '1': '天天向上',
    '2': '努力工作',
    length:3
}

這就是一個標準的JSON數(shù)組格式，跟普通的JSON對比是在最后多了一個length屬性。只要是這種特殊的json格式都可以輕松使用ES6的語法轉變成數(shù)組。在ES6中絕大部分的Array操作都存在于Array對象里。我們就用Array.from(xxx)來進行轉換。我們把上邊的JSON代碼轉換成數(shù)組，并打印在控制臺。

let  json = {
    '0': '好好學習',
    '1': '天天向上',
    '2': '努力工作',
    length:3
}

let arr=Array.from(json);
console.log(arr)

實際開發(fā)中這種方法還是比較常用的，畢竟節(jié)省了我們代碼行數(shù)，也讓我們的程序更清晰。

• Array.of()

它負責把一堆文本或者變量轉換成數(shù)組。在開發(fā)中我們經常拿到了一個類似數(shù)組的字符串，需要使用eval來進行轉換，如果你一個老手程序員都知道eval的效率是很低的，它會拖慢我們的程序。這時候我們就可以使用Array.of方法。我們看下邊的代碼把一堆數(shù)字轉換成數(shù)組并打印在控制臺上：

let arr =Array.of(3,4,5,6);
console.log(arr);

當然它不僅可以轉換數(shù)字，字符串也是可以轉換的，看下邊的代碼：

let arr =Array.of('好好學習','天天向上','努力工作');
console.log(arr);

• find()

所謂的實例方法就是并不是以Array對象開始的，而是必須有一個已經存在的數(shù)組，然后使用的方法，這就是實例方法（不理解請看下邊的代碼，再和上邊的代碼進行比對，你會有所頓悟）。這里的find方法是從數(shù)組中查找。在find方法中我們需要傳入一個匿名函數(shù)，函數(shù)需要傳入三個參數(shù)：

1. value：表示當前查找的值。
2. index：表示當前查找的數(shù)組索引。
3. arr：表示當前數(shù)組。

在函數(shù)中如果找到符合條件的數(shù)組元素就進行return，并停止查找。你可以拷貝下邊的代碼進行測試，就會知道find作用。

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

• fill( )

fill()也是一個實例方法，它的作用是把數(shù)組進行填充，它接收三個參數(shù)，第一個參數(shù)是填充的變量，第二個是開始填充的位置，第三個是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('好好學習',2,5);//把數(shù)組從第二位到第五位用“好好學習”進行填充
console.log(arr);//[0, 1, "好好學習", "好好學習", "好好學習", 5, 6, 7, 8, 9]

上邊的代碼是把數(shù)組從第二位到第五位用“好好學習”進行填充。

• for…of循環(huán)

這種形式比ES5的for循環(huán)要簡單而且高效。先來看一個最簡單的for…of循環(huán)

let arr=['好好學習','天天向上','努力工作']

for (let item of arr){
    console.log(item);
}
//好好學習
//天天向上
//努力工作

for…of數(shù)組索引:有時候開發(fā)中是需要數(shù)組的索引的，那我們可以使用下面的代碼輸出數(shù)組索引。

let arr=['好好學習','天天向上','努力工作']
for (let index of arr.keys()){
    console.log(index);
}

可以看到這時的控制臺就輸出了0,1,2，也就是數(shù)組的索引。

同時輸出數(shù)組的內容和索引：我們用entries()這個實例方法，配合我們的for…of循環(huán)就可以同時輸出內容和索引了。

let arr=['好好學習','天天向上','努力工作']
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}

• entries( )

entries()實例方式生成的是Iterator形式的數(shù)組，那這種形式的好處就是可以讓我們在需要時用next()手動跳轉到下一個值。我們來看下面的代碼：

let arr=['好好學習','天天向上','努力工作']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);

6. ES6中的箭頭函數(shù)和擴展

之前我們寫函數(shù)：

function add(a,b){
    return a+b;
}
console.log(add(1,2));

我們聲明了一個add函數(shù)，然后傳入a和b兩個值，返回a+b的值。 然后我們在控制臺打印了這個函數(shù)的返回結果，這里是3.

• 默認值

在ES6中給我們增加了默認值的操作，我們修改上邊的代碼，可以看到現(xiàn)在只需要傳遞一個參數(shù)也是可以正常運行的。

function add(a,b=2){
    return a+b;
}
console.log(add(1));//3

• 主動拋出錯誤
  在使用Vue的框架中，可以經?？吹娇蚣苤鲃訏伋鲆恍╁e誤，比如v-for必須有:key值。那尤大神是如何做到的那？其實很簡單，ES6中我們直接用throw new Error( xxxx ),就可以拋出錯誤。

function add(a,b=1){

    if(a == 0){
        throw new Error('This is error')
    }
     return a+b;
}

console.log(add(0));

• 函數(shù)中的嚴謹模式

我們在ES中就經常使用嚴謹模式來進行編程，但是必須寫在代碼最上邊，相當于全局使用。在ES6中我們可以寫在函數(shù)體中，相當于針對函數(shù)來使用。

function add(a,b=1){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add(1));

上邊的代碼如果運行的話，你會發(fā)現(xiàn)瀏覽器控制臺報錯，這是ES6中的一個坑,這個錯誤的原因就是如果你使用了默認值，再使用嚴謹模式的話，就會有沖突，所以我們要取消默認值的操作，這時候你在運行就正常了。

• 獲得需要傳遞的參數(shù)個數(shù)

如果你在使用別人的框架時，不知道別人的函數(shù)需要傳遞幾個參數(shù)怎么辦？ES6為我們提供了得到參數(shù)的方法(xxx.length).我們用上邊的代碼看一下需要傳遞的參數(shù)個數(shù)。

function add(a,b){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add.length);

這時控制臺打印出了2，但是如果我們去掉嚴謹模式，并給第二個參數(shù)加上默認值的話，這時候add.length的值就變成了1， 也就是說它得到的是必須傳入的參數(shù)。

箭頭函數(shù)

改造一下之前學的add函數(shù)，寫成箭頭函數(shù)

var add =(a,b=1) => a+b;
console.log(add(1));

• {}的使用

在箭頭函數(shù)中，方法體內如果是兩句話，那就需要在方法體外邊加上{}括號。例如下邊的代碼就必須使用{}.

var add =(a,b=1) => {
    console.log('111111')
    return a+b;
};
console.log(add(1));

箭頭函數(shù)中不可加new，也就是說箭頭函數(shù)不能當構造函數(shù)進行使用。

7. ES6中的函數(shù)和數(shù)組補漏

• 對象的函數(shù)解構

我們在前后端分離時，后端經常返回來JSON格式的數(shù)據，前端的美好愿望是直接把這個JSON格式數(shù)據當作參數(shù)，傳遞到函數(shù)內部進行處理。ES6就為我們提供了這樣的解構賦值。

let json = {
    a:'好好學習',
    b:'天天向上'
}
function fun({a,b='努力工作'}){
    console.log(a,b);
}
fun(json);//好好學習 天天向上

• 數(shù)組的函數(shù)解構

函數(shù)能解構JSON，那解構我們的數(shù)組就更不在話下了，我們看下邊的代碼。我們聲明一個數(shù)組，然后寫一個方法，最后用…進行解構賦值。

let arr = ['好好學習','天天向上','努力工作'];
function fun(a,b,c){
    console.log(a,b,c);
}

fun(...arr);

• in

in是用來判斷對象或者數(shù)組中是否存在某個值的。我們先來看一下用in如何判斷對象里是否有某個值。

對象判斷

let obj={
    a:'好好學習',
    b:'天天向上'
}
console.log('a' in obj); //true

• 數(shù)組判斷

先來看一下ES5判斷的弊端，以前會使用length屬性進行判斷，為0表示沒有數(shù)組元素。但是這并不準確，或者說真實開發(fā)中有弊端。

let arr=[,,,,,];
console.log(arr.length); //5

上邊的代碼輸出了5，但是數(shù)組中其實全是空值，這就是一個坑啊。那用ES6的in就可以解決這個問題。

let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['好好學習','天天向上'];
console.log(0 in arr1);  // true

注意：這里的0指的是數(shù)組下標位置是否為空。

• 數(shù)組的遍歷方法

1.forEach

let arr=['好好學習','天天向上','努力工作'];

arr.forEach((val,index)=>console.log(index,val));

2.filter

let arr=['好好學習','天天向上','努力工作'];

arr.filter(x=>console.log(x));

3.some

let arr=['好好學習','天天向上','努力工作'];

arr.some(x=>console.log(x));

4.map

let arr=['好好學習','天天向上','努力工作'];

console.log(arr.map(x=>'web'));

map在這里起到一個替換的作用，這個我們后續(xù)課程會詳細講解。

5.join()

let arr=['好好學習','天天向上','努力工作'];

console.log(arr.join('|'));

6.toString()

let arr=['好好學習','天天向上','努力工作'];

console.log(arr.toString());

8.ES6中對象

• 對象賦值

ES6允許把聲明的變量直接賦值給對象，我們看下面的例子。

let name="xiaoxianxian";
let skill= 'web';
var obj= {name,skill};
console.log(obj);  //Object {name: "xiaoxianxian", skill: "web"}

• 對象Key值構建

有時候我們會在后臺取出key值，而不是我們前臺定義好的，這時候我們如何構建我們的key值那。比如我們在后臺取了一個key值，然后可以用[ ] 的形式，進行對象的構建。

let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);

自定義對象方法

var obj={
    add:function(a,b){
        return a+b;
    }
}
console.log(obj.add(1,2));  //3

• Object.is( ) 對象比較

對象的比較方法,以前進行對象值的比較，經常使用===來判斷，比如下面的代碼：

var obj1 = {name:'xiaoxianxian'};
var obj2 = {name:'xiaoxianxian'};
console.log(obj1.name === obj2.name);//true

那ES6為我們提供了is方法進行對比。

var obj1 = {name:'xiaoxianxian'};
var obj2 = {name:'xiaoxianxian'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.name)); //true

區(qū)分=== 和 is方法的區(qū)別是什么，看下面的代碼輸出結果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

"===為同值相等，is()為嚴格相等。"

• Object.assign( )合并對象

操作數(shù)組時我們經常使用數(shù)組合并，那對象也有合并方法，那就是assgin( )。看一下啊具體的用法。

var a={a:'好好學習'};
var b={b:'天天向上'};
var c={c:'努力工作'};

let d=Object.assign(a,b,c)
console.log(d);

9.Symbol在對象中的作用

• 聲明Symbol

var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object; 
var f= Symbol();
console.log(typeof(d));

• Symbol的打印

我們先聲明一個Symbol，然后我們在控制臺輸出一下。

var g = Symbol('web');
console.log(g);
console.log(g.toString());

這時候我們仔細看控制臺是有區(qū)別的，沒有toString的是紅字，toString的是黑字。

• Symbol在對象中的應用

var xx = Symbol();
var obj={
    [xx]:'前端開發(fā)'
}
console.log(obj[xx]);
obj[xx]='web';
console.log(obj[xx]);

• Symbol對象元素的保護作用
  在對象中有很多值，但是循環(huán)輸出時，并不希望全部輸出，那我們就可以使用Symbol進行保護

沒有進行保護的寫法：

var obj={name:'xiaoxianxian',skill:'web',age:18};

for (let item in obj){
    console.log(obj[item]);
}

現(xiàn)在我不想別人知道我的年齡，這時候我就可以使用Symbol來進行循環(huán)保護。

let obj={name:'xiaoxianxian',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
    console.log(obj[item]);
} 
console.log(obj);

9.Set和WeakSet數(shù)據結構

• set的聲明

let setArr = new Set(['好好學習','天天向上']);
console.log(setArr);//Set {'好好學習','天天向上'}

Set和Array 的區(qū)別是Set不允許內部有重復的值，如果有只顯示一個，相當于去重。雖然Set很像數(shù)組，但是他不是數(shù)組。

• Set值的增刪查

追加add

在使用Array的時候，可以用push進行追加值，那Set稍有不同，它用更語義化的add進行追加。

let setArr = new Set(['好好學習','天天向上']);
console.log(setArr);//Set {'好好學習','天天向上'}

setArr.add('前端職場');
console.log(setArr);

刪除delete

let setArr = new Set(['好好學習','天天向上']);
console.log(setArr);//Set {'好好學習','天天向上'}

setArr.add('前端職場');
console.log(setArr); //Set {'好好學習','天天向上', "前端職場"}

setArr.delete('前端職場');
console.log(setArr); //Set {'好好學習','天天向上'}

查找has

用has進行值的查找，返回的是true或者false。

let setArr = new Set(['好好學習','天天向上']);
console.log(setArr);//Set {'好好學習','天天向上'}

console.log(setArr.has('好好學習'));//true

刪除clear

let setArr = new Set(['好好學習','天天向上']);
console.log(setArr);//Set {'好好學習','天天向上'}
setArr.clear();

console.log(setArray);//true

set的循環(huán) for…of…循環(huán)

let setArr = new Set(['好好學習','天天向上']);
for (let item of setArr){
    console.log(item);
}

size屬性 size屬性可以獲得Set值的數(shù)量。

let setArr = new Set(['好好學習','天天向上']);
for (let item of setArr){
    console.log(item);
}

console.log(setArr.size);

forEach循環(huán)

let setArr = new Set(['好好學習','天天向上']);
setArr.forEach((value)=>console.log(value));

• WeakSet的聲明

let weakObj=new WeakSet();
let obj={a:'好好學習',b:'天天向上'}
weakObj.add(obj);

console.log(weakObj);

這里需要注意的是，如果你直接在new 的時候就放入值，將報錯。

WeakSet里邊的值也是不允許重復的，我們來測試一下。

let weakObj=new WeakSet();
let obj={a:'好好學習',b:'天天向上'}
let obj1=obj;

weakObj.add(obj);
weakObj.add(obj1);

console.log(weakObj);

10.map數(shù)據結構

• Json和map格式的對比

let json = {
    name:'xiaoxianxian',
    skill:'web'
}
console.log(json.name);

但是這種反應的速度要低于數(shù)組和map結構。而且Map的靈活性要更好，你可以把它看成一種特殊的鍵值對，但你的key可以設置成數(shù)組，值也可以設置成字符串，讓它不規(guī)律對應起來。

let json = {
    name:'xiaoxianxian',
    skill:'web'
}
console.log(json.name);

var map=new Map();
map.set(json,'iam');
console.log(map);

當然也可key字符串，value是對象。我們調換一下位置，依然是符合map的數(shù)據結構規(guī)范的。

map.set('xiaoxianxian',json);
console.log(map);

• 取值get

現(xiàn)在取json對應的值。

console.log(map.get(json));

• 刪除delete

刪除delete的特定值：

map.delete(json);
console.log(map)

• size屬性

console.log(map.size);

• 查找是否存在has

consolec .log(map.has('xiaoxianxian'))

• 清楚所有元素clear

map.clear()

11.用Proxy進行預處理

先了解一個概念“鉤子函數(shù)”：當我們在操作一個對象或者方法時會有幾種動作，比如：在運行函數(shù)前初始化一些數(shù)據，在改變對象值后做一些善后處理。這些都算鉤子函數(shù)。

Proxy的存在就可以讓我們給函數(shù)加上這樣的鉤子函數(shù)，你也可以理解為在執(zhí)行方法前預處理一些代碼。你可以簡單的理解為他是函數(shù)或者對象的生命周期。

在學習新知識之前，先來回顧一下定義對象的方法。

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am xiaoxianxian'

};
console.log(obj.add(100));
console.log(obj.name);

• 聲明Proxy

我們用new的方法對Proxy進行聲明?？梢钥匆幌侣暶鱌roxy的基本形式。new Proxy（{},{}）;

需要注意的是這里是兩個花括號，第一個花括號就相當于我們方法的主體，后邊的花括號就是Proxy代理處理區(qū)域，相當于我們寫鉤子函數(shù)的地方。

現(xiàn)在把上邊的obj對象改成我們的Proxy形式。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am xiaoxianxian'
}, 
{
    get:function(target,key,property){
        console.log('come in Get');
        return target[key];
    }
});

console.log(pro.name);

可以在控制臺看到結果，先輸出了come in Get。相當于在方法調用前的鉤子函數(shù)。

• get屬性

get屬性是在你得到某對象屬性值時預處理的方法，他接受三個參數(shù)

target：得到的目標值

key：目標的key值，相當于對象的屬性

property：這個不太常用，用法還在研究中，還請大神指教。

• set屬性

set屬性是值你要改變Proxy屬性值時，進行的預先處理。它接收四個參數(shù)。

target:目標值。
key：目標的Key值。
value：要改變的值。
receiver：改變前的原始值。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am xiaoxianxian'
}, 
{
    get:function(target,key){
        console.log('come in Get');
        return target[key];
    },
    set:function(target,key,value,receiver){
        console.log(`    setting ${key} = ${value}`);
        return target[key] = value;
    }

});

console.log(pro.name);
pro.name='xiaoxianxian';
console.log(pro.name);

• apply的使用

apply的作用是調用內部的方法，它使用在方法體是一個匿名函數(shù)時?？聪逻叺拇a。

get = function () {
    return 'I am xiaoxianxian';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}

var pro = new Proxy(target, handler);

console.log(pro());

proxy的知識是非常多的，這里我建議看阮一峰大神的《ES6》

12.promise對象的使用

• promise的基本用法

promise執(zhí)行多步操作非常好用，那我們就來模仿一個多步操作的過程，那就以吃飯為例吧。要想在家吃頓飯，是要經過三個步驟的。

1.洗菜做飯。
2.坐下來吃飯。
3.收拾桌子洗碗。

這個過程是有一定的順序的，你必須保證上一步完成，才能順利進行下一步。我們可以在腦海里先想想這樣一個簡單的過程在ES5寫起來就要有多層的嵌套。那我們現(xiàn)在用promise來實現(xiàn)。

let state=1;

function step1(resolve,reject){
    console.log('1.開始-洗菜做飯');
    if(state==1){
        resolve('洗菜做飯--完成');
    }else{
        reject('洗菜做飯--出錯');
    }
}


function step2(resolve,reject){
    console.log('2.開始-坐下來吃飯');
    if(state==1){
        resolve('坐下來吃飯--完成');
    }else{
        reject('坐下來吃飯--出錯');
    }
}


function step3(resolve,reject){
    console.log('3.開始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出錯');
    }
}

new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);

}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

13.class類的使用

先聲明一個最簡單的coder類，類里只有一個name方法，方法中打印出傳遞的參數(shù)。

class coder{
    name(val){
        console.log(val);
    }
}

• 類的聲明
  我們已經聲明了一個類，并在類里聲明了name方法，現(xiàn)在要實例化類，并使用類中的方法。

class Coder{
    name(val){
        console.log(val);
    }
}

let xiaoxianxian= new Coder;
xiaoxianxian.name('xiaoxianxian');

• 類的多方法聲明

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('xiaoxianxian')+':'+'Skill:'+val);
    }
}

let xiaoxianxian= new Coder;
xiaoxianxian.name('xiaoxianxian');
xiaoxianxian.skill('web');

這里需要注意的是兩個方法中間不要寫逗號了，還有這里的this指類本身，還有要注意return 的用法。

• 類的傳參

在類的參數(shù)傳遞中我們用constructor( )進行傳參。傳遞參數(shù)后可以直接使用this.xxx進行調用。

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('xiaoxianxian')+':'+'Skill:'+val);
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }

    add(){
        return this.a+this.b;
    }
}

let xiaoxianxian=new Coder(1,2);
console.log(xiaoxianxian.add());

我們用constructor來約定了傳遞參數(shù)，然后用作了一個add方法，把參數(shù)相加。這和以前我們的傳遞方法有些不一樣，所以需要注意下。

• class的繼承

class htmler extends Coder{

}

let pang=new htmler;
pang.name('xiaoxianxian');

聲明一個htmler的新類并繼承Coder類，htmler新類里邊為空，這時候我們實例化新類，并調用里邊的name方法。結果也是可以調用到的。

14.模塊化操作

在ES5中我們要進行模塊華操作需要引入第三方類庫，隨著前后端分離，前端的業(yè)務日漸復雜，ES6為我們增加了模塊話操作。模塊化操作主要包括兩個方面。

export :負責進行模塊化，也是模塊的輸出。
import : 負責把模塊引，也是模塊的引入操作。

export

export可以讓我們把變量，函數(shù)，對象進行模塊話，提供外部調用接口，讓外部進行引用。先來看個最簡單的例子，把一個變量模塊化。我們新建一個temp.js文件，然后在文件中輸出一個模塊變量。

export var a = 'xiaoxianxian';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';

console.log(a);

這就是一個最簡單的模塊的輸出和引入。

• 多變量的輸出
  這里聲明了3個變量，需要把這3個變量都進行模塊化輸出，這時候我們給他們包裝成對象就可以了。

var a ='xiaoxianxian';
var b ='xiaoxianxian2';
var c = 'web';

export {a,b,c}

函數(shù)的模塊化輸出

export function add(a,b){
    return a+b;
}

as的用法 有些時候我們并不想暴露模塊里邊的變量名稱，而給模塊起一個更語義話的名稱，這時候我們就可以使用as來操作。

var a ='好好學習';
var b ='天天向上';
var c = 'web';

export {
    x as a,
    y as b,
    z as c
}

export default的使用 加上default相當是一個默認的入口。在一個文件里export default只能有一個。我們來對比一下export和export default的區(qū)別

• export

export var a ='xiaoxianxian';

export function add(a,b){
    return a+b;
}

對應的導入方式

import {a,add} form './temp';//也可以分開寫

• export defalut

export default var a='xiaoxianxian';

對應的引入方式

import str from './temp';

ES6的模塊化不能直接在瀏覽器中預覽，必須要使用Babel進行編譯之后正?？吹浇Y果。