2018-06-01解構(gòu)賦值

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

```

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市溺拱,隨后出現(xiàn)的幾起案子逃贝,更是在濱河造成了極大的恐慌,老刑警劉巖迫摔,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沐扳,死亡現(xiàn)場離奇詭異,居然都是意外死亡句占,警方通過查閱死者的電腦和手機(jī)沪摄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卓起,你說我怎么就攤上這事“颊ǎ” “怎么了戏阅?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長啤它。 經(jīng)常有香客問我奕筐,道長,這世上最難降的妖魔是什么变骡? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任离赫,我火速辦了婚禮,結(jié)果婚禮上塌碌,老公的妹妹穿的比我還像新娘渊胸。我一直安慰自己,他們只是感情好台妆,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布翎猛。 她就那樣靜靜地躺著,像睡著了一般接剩。 火紅的嫁衣襯著肌膚如雪切厘。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天懊缺,我揣著相機(jī)與錄音疫稿,去河邊找鬼。 笑死鹃两,一個(gè)胖子當(dāng)著我的面吹牛遗座,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播俊扳,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼员萍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拣度?” 一聲冷哼從身側(cè)響起碎绎,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎抗果,沒想到半個(gè)月后筋帖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡冤馏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年日麸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,567評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡代箭,死狀恐怖墩划,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嗡综,我是刑警寧澤乙帮,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站极景,受9級特大地震影響察净,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜盼樟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一氢卡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧晨缴,春花似錦译秦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至延都,卻和暖如春雷猪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晰房。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工求摇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人殊者。 一個(gè)月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓与境,卻偏偏與公主長得像,于是被迫代替她去往敵國和親猖吴。 傳聞我的和親對象是個(gè)殘疾皇子摔刁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2 359

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

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,151評論 0 13
  • ##ES6 ### 一海蔽、解構(gòu)賦值 ES6允許按照一定模式共屈,從數(shù)組和對象中提取值,對變量進(jìn)行賦值党窜,這被稱為結(jié)構(gòu)賦值拗引,...
    辭蘇閱讀 221評論 0 0
  • 關(guān)于前端性能優(yōu)化問題詳解 出處:http://segmentfault.com/blogs 前端性能優(yōu)化指南 AJ...
    bennnnn閱讀 1,592評論 2 4
  • JS基礎(chǔ)講解 JavaScript組成ECMAScript:解釋器、翻譯DOM:Document Object M...
    FConfidence閱讀 574評論 0 1
  • html 什么是html超文本標(biāo)記語言幌衣,用于網(wǎng)站開發(fā)矾削。 html運(yùn)用于什么場景手機(jī)端和原生代碼結(jié)合處理業(yè)務(wù)邏輯,加...
    阿西吧小魔仙閱讀 401評論 0 0