##ES6
### 一、解構(gòu)賦值
? ES6允許按照一定模式要门,從數(shù)組和對象中提取值虏肾,對變量進(jìn)行賦值,這被稱為結(jié)構(gòu)賦值欢搜,解構(gòu)賦值主要包括數(shù)組的結(jié)構(gòu)賦值封豪、對象的結(jié)構(gòu)賦值、字符串的結(jié)構(gòu)賦值狂巢、函數(shù)參數(shù)的結(jié)構(gòu)賦值撑毛。
**數(shù)組的解構(gòu)賦值**
代碼如下
```js
//傳統(tǒng)賦值
var num1=1;
var num2=2;
var num3=3;
//結(jié)構(gòu)賦值
let [str1,str2,str3]=['aa','bb','cc'];
console.log(str1);
console.log(str2);
console.log(str3);
```
**對象的解構(gòu)賦值**
代碼如下:
```js
let {num1,num2}={num1:100,num2:10};
console.log(num1);
console.log(num2);
```
**字符串的解構(gòu)賦值**
代碼如下:
```js
let [a,b,c,d,e]='hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
```
**函數(shù)參數(shù)的解構(gòu)賦值**
代碼如下
```js
function fn([x,y]){
return x+y;
}
console.log(fn([10,20]));
```
解析:由于平時(shí)傳入的參數(shù)x,y作為變量進(jìn)行傳入唧领,加上“[ ]”表示以一個(gè)數(shù)組的形式進(jìn)行傳入?yún)?shù)藻雌,在調(diào)用函數(shù)的同時(shí)也是同樣。
**調(diào)換兩個(gè)數(shù)的值**
之前的寫法
```js
var a=3;
var b=5
var c;
交換兩個(gè)數(shù)的值:聲明第三個(gè)變量
c=b;
b=a;
a=c;
//使用es6語法
let num1=10;
let num2=20;
[num1,num2]=[num2;num1];
console.log(num1);
console.log(num2);
```
###模板字符串
**多行字符串**
用單引號或是雙引號表示的字符串在編輯的過程中只能在一行顯示斩个,若要在多行顯示需要在每一行結(jié)尾添加一個(gè)斜杠胯杭,這樣的編輯方式對開發(fā)者顯然不夠友好,我們可以使用模板字符串的功能換行編輯字符串受啥,代碼如下所示
```js
let str=`hello
? ? world
? ? `;
? ? console.log(str);
```
**字符串中定義變量**
es5寫法
```js
var name='jack';
console.log('我的名字叫'+name);
```
模版字符串
```js
var name='jack';
console.log(`我的名字叫${name}`);
```
**模板字符串調(diào)用函數(shù)**
let x='hello';
let y='world';
function fn(x,y){
return x+y;
}
console.log('程序猿最常說的一句話是${fn(x,y)}');
###函數(shù)
? 在ES2015中擴(kuò)展了很多函數(shù)的功能做个,我們在本節(jié)講解兩個(gè)最常用的功能:
* 設(shè)置函數(shù)參數(shù)默認(rèn)值
* 箭頭函數(shù)
**參數(shù)默認(rèn)值**
在ES2015版本之前,我們可以通過下面的方法設(shè)置函數(shù)參數(shù)的默認(rèn)值滚局,代碼如下所示
```js
es5設(shè)置默認(rèn)值
function fun(x,y){
? x=x||10;
? y=y||20;
? return x+y;
}
console.log(fun());
```
如果邏輯或運(yùn)算符的左側(cè)是undefined居暖,那么表達(dá)式的值就是右側(cè)的值,如果左側(cè)不是undefined藤肢,那么表達(dá)式的值就是左側(cè)的值太闺,我們可以通過這種方法設(shè)置函數(shù)參數(shù)的默認(rèn)值,但是這種方法看上去并不是那么友好嘁圈,所以ES2015為函數(shù)增加了設(shè)置默認(rèn)值的功能省骂。代碼如下所示
```js
//es6設(shè)置默認(rèn)值
function fn(x=100,y=200){
return x+y;
}
console.log(fn(1,2));
```
**箭頭函數(shù)**
在ES2015中增加了箭頭函數(shù)的語法蟀淮,我們可以使用=>來定義函數(shù),而不必每次都要寫一個(gè)function钞澳。具體寫法如下所示
```js
var fun=x=>x*x;
console.log(fun(6));
```
箭頭的前面是函數(shù)的參數(shù)怠惶,箭頭的后面是函數(shù)的返回值,程序運(yùn)行后會在控制臺輸出36轧粟。
如果函數(shù)沒有參數(shù)策治,并且函數(shù)體不止一行代碼,可以用如下的代碼表示
```js
let fun=()=>{
var x=10;
var y=20;
return x+y;
}
console.log(fun());
```
###面向?qū)ο笳Z法
在ES2015版本之前兰吟,JavaScript是沒有類的概念的览妖,我們可以使用構(gòu)造函數(shù)來模擬一個(gè)類,這在我們之前的課程中已經(jīng)講解過了揽祥,這里我們簡單復(fù)習(xí)一
創(chuàng)建一個(gè)貓的構(gòu)造函數(shù)
```js
function Cat(name,age){
this.name=name;
this.age=age
}
var cat=new Cat('miaomiao',2);
console.log(cat.name);
```
在上面的代碼中讽膏,我們定義了一個(gè)構(gòu)造函數(shù)Cat,通過new關(guān)鍵字創(chuàng)建了一個(gè)變量cat拄丰,cat有兩個(gè)屬性府树,name和age。我們可以直接輸出cat.name;
我們可以通過原型屬性為構(gòu)造函數(shù)添加方法料按,例如我們給這個(gè)Cat添加一個(gè)shout方法奄侠,讓這只貓可以叫。代碼如下所示
```js
function Cat(name,age){
this.name=name;
this.age=age
}
var cat=new Cat('miaomiao',2);
Cat.prototype.say=function(){
console.log('喵喵喵!');
}
console.log(cat.name);
cat.say();
```
通過上面的代碼载矿,我們可以模擬一個(gè)類的概念垄潮,但是這樣的寫法與真正面相對象語言的寫法相比,確實(shí)更難以理解闷盔。所以ES2015中增加了類的概念弯洗。
**class**
我們可以用class來定義一個(gè)類,然后可以在這個(gè)類中定義構(gòu)造函數(shù)逢勾,方法和屬性牡整。代碼如下
```js
class Cat{
constructor(name,age){
this.name=name;
this.age=age;
}
shot(){
console.log('喵喵喵');
}
}
let cat=new Cat('miaomiao',2);
cat.shot();
```