ES6

##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();

```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末夕玩,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惊豺,更是在濱河造成了極大的恐慌燎孟,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尸昧,死亡現(xiàn)場離奇詭異揩页,居然都是意外死亡,警方通過查閱死者的電腦和手機烹俗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進(jìn)店門爆侣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人幢妄,你說我怎么就攤上這事兔仰。” “怎么了蕉鸳?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵乎赴,是天一觀的道長。 經(jīng)常有香客問我潮尝,道長榕吼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任勉失,我火速辦了婚禮羹蚣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戴质。我一直安慰自己度宦,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布告匠。 她就那樣靜靜地躺著戈抄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪后专。 梳的紋絲不亂的頭發(fā)上划鸽,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天,我揣著相機與錄音,去河邊找鬼裸诽。 笑死嫂用,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的丈冬。 我是一名探鬼主播嘱函,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼埂蕊!你這毒婦竟也來了往弓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蓄氧,失蹤者是張志新(化名)和其女友劉穎函似,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喉童,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡撇寞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了堂氯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蔑担。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖祖灰,靈堂內(nèi)的尸體忽然破棺而出钟沛,到底是詐尸還是另有隱情,我是刑警寧澤局扶,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布恨统,位于F島的核電站,受9級特大地震影響三妈,放射性物質(zhì)發(fā)生泄漏畜埋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一畴蒲、第九天 我趴在偏房一處隱蔽的房頂上張望悠鞍。 院中可真熱鬧,春花似錦模燥、人聲如沸咖祭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽么翰。三九已至,卻和暖如春辽旋,著一層夾襖步出監(jiān)牢的瞬間浩嫌,已是汗流浹背檐迟。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留码耐,地道東北人追迟。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像骚腥,于是被迫代替她去往敵國和親敦间。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 1.函數(shù)參數(shù)的默認(rèn)值 (1).基本用法 在ES6之前束铭,不能直接為函數(shù)的參數(shù)指定默認(rèn)值每瞒,只能采用變通的方法。
    趙然228閱讀 693評論 0 0
  • 看這本書是在markdown在做的筆記纯露,更友好的閱讀方式訪問: github es6.md(https://git...
    汪汪仙貝閱讀 463評論 0 0
  • let和const命令 var:聲明變量,更多的是全局作用域代芜,存在變量提升 let:聲明變量埠褪,存在于塊級作用域,不...
    zhangivon閱讀 2,480評論 1 13
  • *node下用express框架挤庇,實現(xiàn)一個簡單的mvc *構(gòu)建工具:gulp / babel / webpack ...
    韓娜愛吃辣_前端程序媛閱讀 1,095評論 0 1
  • 1钞速、新的聲明方式 以前我們在聲明時只有一種方法,就是使用var來進(jìn)行聲明嫡秕,ES6對聲明的進(jìn)行了擴展渴语,現(xiàn)在可以有三種...
    令武閱讀 1,011評論 0 7