##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ù)x向抢,y作為變量進(jìn)行傳入认境,加上“[ ]”表示以一個數(shù)組的形式進(jìn)行傳入?yún)?shù),在調(diào)用函數(shù)的同時也是同樣挟鸠。
**調(diào)換兩個數(shù)的值**
之前的寫法
```js
var a=3;
var b=5
var c;
交換兩個數(shù)的值:聲明第三個變量
?c=b;
?b=a;
?a=c;
?//使用es6語法
?let num1=10;
?let num2=20;
?[num1,num2]=[num2;num1];
?console.log(num1);
?console.log(num2);
```
###模板字符串
**多行字符串**
用單引號或是雙引號表示的字符串在編輯的過程中只能在一行顯示叉信,若要在多行顯示需要在每一行結(jié)尾添加一個斜杠,這樣的編輯方式對開發(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中擴展了很多函數(shù)的功能,我們在本節(jié)講解兩個最常用的功能:
* 設(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());
```
如果邏輯或運算符的左側(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ù)祟峦,而不必每次都要寫一個function。具體寫法如下所示
```js
var fun=x=>x*x;
console.log(fun(6));
```
箭頭的前面是函數(shù)的參數(shù)徙鱼,箭頭的后面是函數(shù)的返回值宅楞,程序運行后會在控制臺輸出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ù)來模擬一個類婶希,這在我們之前的課程中已經(jīng)講解過了,這里我們簡單復(fù)習(xí)一
創(chuàng)建一個貓的構(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òu)造函數(shù)Cat喻杈,通過new關(guān)鍵字創(chuàng)建了一個變量cat,cat有兩個屬性狰晚,name和age筒饰。我們可以直接輸出cat.name;
我們可以通過原型屬性為構(gòu)造函數(shù)添加方法,例如我們給這個Cat添加一個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();
```
通過上面的代碼,我們可以模擬一個類的概念,但是這樣的寫法與真正面相對象語言的寫法相比换棚,確實更難以理解式镐。所以ES2015中增加了類的概念。
**class**
我們可以用class來定義一個類固蚤,然后可以在這個類中定義構(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();
```