js學(xué)習(xí)手冊(cè)和es6新增知識(shí)2變量的解構(gòu)賦值

1、數(shù)組的解構(gòu)賦值基本用法ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。以前，為變量賦值，只能直接指定值。ES6 允許寫(xiě)成下面這樣。上面代碼表示，可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，對(duì)變量賦值。本質(zhì)上，這種寫(xiě)法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。下面是一些使用嵌套數(shù)組進(jìn)行解構(gòu)的例子。如果解構(gòu)不成功，變量的值就等于 undefined。以上兩種情況都屬于解構(gòu)不成功，foo 的值都會(huì)等于undefined。var foo = ;var bar, foo = 1;let foo, bar, baz = 1,

2、2, 3;foo / 1bar / 2baz / 3let , , third = foo, bar, baz; third / bazlet x, , y = 1, 2, 3;x / 1y / 3let head, .tail = 1, 2, 3, 4;head / 1tail / 2, 3, 4let x, y, .z = a; x / ay / undefinedz / var a, b, c = 1, 2, 3;var a = 1;var b = 2;var c = 3;另一種情況是不完全解構(gòu)，即等號(hào)左邊的模式，只匹配一部分的等號(hào)右邊的數(shù)組。這種情況下，解構(gòu)依然可以成功。上面兩個(gè)例子，

3、都屬于不完全解構(gòu)，但是可以成功。如果等號(hào)的右邊不是數(shù)組（或者嚴(yán)格地說(shuō)，不是可遍歷的結(jié)構(gòu)，參見(jiàn)Iterator一章），那么將會(huì)報(bào)錯(cuò)。上面的表達(dá)式都會(huì)報(bào)錯(cuò)，因?yàn)榈忍?hào)右邊的值，要么轉(zhuǎn)為對(duì)象以后不具備 Iterator 接口（前五個(gè)表達(dá)式），要么本身就不具備Iterator 接口（最后一個(gè)表達(dá)式）。解構(gòu)賦值不僅適用于var 命令，也適用于let 和const 命令。對(duì)于Set 結(jié)構(gòu)，也可以使用數(shù)組的解構(gòu)賦值。事實(shí)上，只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator 接口，都可以采用數(shù)組形式的解構(gòu)賦值。function* fibs() var a = 0;var b = 1; while (true) yield

4、a;a, b = b, a + b;var , second, third, fourth, fifth, sixth = fibs();sixth / 5let x, y, z = new Set(a, b, c);x / avar v1, v2, ., vN = array;let v1, v2, ., vN = array;const v1, v2, ., vN = array;/ 報(bào)錯(cuò) let foo = 1;let foo = false;let foo = NaN;let foo = undefined;let foo = null;let foo = ;let x, y = 1,

5、 2, 3;x / 1y / 2let a, b, d = 1, 2, 3, 4; a / 1b / 2d / 4上面代碼中，fibs 是一個(gè)Generator 函數(shù)，原生具有Iterator 接口。解構(gòu)賦值會(huì)依次從這個(gè)接口獲取值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。注意，ES6嚴(yán)格相等運(yùn)算符（=），判斷一個(gè)位置是否有值。所以，如果一個(gè)數(shù)組成員不嚴(yán)格等于 undefined，默認(rèn)值是不會(huì)生效的。上面代碼中，如果一個(gè)數(shù)組成員是 null，默認(rèn)值就不會(huì)生效，因?yàn)?null 不嚴(yán)格等于undefined。如果默認(rèn)值是一個(gè)表達(dá)式，那么這個(gè)表達(dá)式是惰性求值的，即只有在用到的時(shí)候，才會(huì)求值。上面代碼中，因?yàn)?x

6、 能取到值，所以函數(shù) f 根本不會(huì)執(zhí)行。上面的代碼其實(shí)等價(jià)于下面的代碼。默認(rèn)值可以解構(gòu)賦值的其他變量，但該變量必須已經(jīng)。let x;if (10 = undefined) x = f(); else x = 10;function f() console.log(aaa);let x = f() = 1;var x = 1 = undefined;x / 1var x = 1 = null; x / nullvar foo = true = ;foo / truex, y = b = a; / x=a, y=bx, y = b = a, undefined; / x=a, y=blet x =

7、 1, y = x = ;/ x=1; y=1let x = 1, y = x = 2;/;x=2; y=2let x = 1, y = x = 1, 2; / x=1; y=2let x = y, y = 1 =/ ReferenceError上面最后一個(gè)表達(dá)式之所以會(huì)報(bào)錯(cuò)，是因?yàn)橛玫侥J(rèn)值時(shí)，y 還沒(méi)有。對(duì)象的解構(gòu)賦值解構(gòu)不僅可以用于數(shù)組，還可以用于對(duì)象。對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值。上面代碼的第一個(gè)例子，等號(hào)左邊的兩個(gè)變量的次序，與等號(hào)右邊兩個(gè)同名屬性的次序不一致，但是對(duì)取

8、值完全沒(méi)有影響。第二個(gè)例子的變量沒(méi)有對(duì)應(yīng)的同名屬性，導(dǎo)致取不到值，最后等于 undefined。如果變量名與屬性名不一致，必須寫(xiě)成下面這樣。var foo: baz = foo: aaa, bar: bbb ;baz / aaalet obj = last: l = obj;: o, last: world ;let : f,f / ol / world這實(shí)際上說(shuō)明，對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫(xiě)（參見(jiàn)對(duì)象的擴(kuò)展一章）。也就是說(shuō)，對(duì)象的解構(gòu)賦值的機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者，而不是前者。var foo: foo, bar: bar = foo: aaa, b

9、ar: bbb ;var bar, foo = foo: aaa, bar: bbb ;foo / aaabar / bbbvar baz = foo: aaa, bar: bbb ; baz / undefinedvar foo, bar = foo: aaa, bar: bbb ;foo / aaabar / bbbyx上面代碼中，真正被賦值的是變量，而不是模式。注意，采用這種寫(xiě)法時(shí)，變量的和賦值是一體的。對(duì)于 let 和const 來(lái)說(shuō)，變量不能重新，所以一旦賦值的變量以前過(guò)，就會(huì)報(bào)錯(cuò)。上面代碼中，解構(gòu)賦值的變量都會(huì)重新，所以報(bào)錯(cuò)了。不過(guò)，因?yàn)槊钤试S重新，所以這個(gè)錯(cuò)誤只會(huì)在使用 let

10、 和 const 命令時(shí)出現(xiàn)。如果沒(méi)有第二個(gè) let 命令，上面的代碼就不會(huì)報(bào)錯(cuò)。和數(shù)組一樣，解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象。o,x / oy / World注意，這時(shí)p 是模式，不是變量，因此不會(huì)被賦值。var node = loc: start: line: 1,column: 5;var loc: start: line = node; y: World ;var p: x, y = obj;var obj = p: let foo;(foo = foo: 1); / 成功 let baz;(bar: baz = bar: 1); /成功varlet foo;let foo = foo:

11、1; / SyntaxError: Duplicate declarationfoolet baz;let bar: baz = bar: 1; / SyntaxError: Duplicatedeclaration bazfoobazvar foo: baz = foo: aaa, bar: bbb ;baz / aaafoo / error: foo is not defined上面代碼中，只有是變量，和 start 都是模式，不會(huì)被賦值。下面是嵌套賦值的例子。對(duì)象的解構(gòu)也可以指定默認(rèn)值。默認(rèn)值生效的條件是，對(duì)象的屬性值嚴(yán)格等于 undefined。上面代碼中，如果x 屬性等于 null，

12、就不嚴(yán)格相等于undefined，導(dǎo)致默認(rèn)值不會(huì)生效。如果解構(gòu)失敗，變量的值等于 undefined。如果解構(gòu)模式是嵌套的對(duì)象，而且子對(duì)象所在的父屬性不存在，那么將會(huì)報(bào)錯(cuò)。/ 報(bào)錯(cuò) var foo: bar = baz: baz;上面代碼中，等號(hào)左邊對(duì)象的 foo 屬性，對(duì)應(yīng)一個(gè)子對(duì)象。該子對(duì)象的 bar 屬性，解構(gòu)時(shí)會(huì)報(bào)錯(cuò)。原因很簡(jiǎn)單，因?yàn)?foo 這時(shí)等于 undefined，再取子屬性就會(huì)報(bào)錯(cuò)，請(qǐng)看下面的代碼。var _tmp = baz: baz;var foo = bar: baz;foo / undefinedvar x = 3 = x: undefined; x / 3var x

13、 = 3 = x: null;x / nullvar x = 3 = ;x / 3var x, y = 5 = x: 1;x / 1y / 5var message: msg = Something went wrong = ; msg / Something went wronglet obj = ;let arr = ;( foo: p, bar: arr0 = foo: 123, bar: true );obj / prop:123arr / trueloclineline / 1loc / error: loc is undefinedstart / error: sta

14、rt is undefined如果要將一個(gè)已經(jīng)的變量用于解構(gòu)賦值，必須非常。上面代碼的寫(xiě)報(bào)錯(cuò)，因?yàn)镴avaScript 引擎會(huì)將x理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤。只有不將大括號(hào)寫(xiě)在行首，避免JavaScript 將其解釋為代碼塊，才能解決這個(gè)問(wèn)題。/ 正確的寫(xiě)法(x = x: 1);上面代碼將整個(gè)解構(gòu)賦值語(yǔ)句，放在一個(gè)圓括號(hào)里面，就可以正確執(zhí)行。關(guān)于圓括號(hào)與解構(gòu)賦值的關(guān)系，參見(jiàn)下文。解構(gòu)賦值允許，等號(hào)左邊的模式之中，不放置任何變量名。因此，可以寫(xiě)出非常古怪的賦值表達(dá)式。( = true, false);( = abc);( = );上面的表達(dá)式雖然毫無(wú)意義，但是語(yǔ)法是合法的，可以執(zhí)行。對(duì)象

15、的解構(gòu)賦值，可以很方便地將現(xiàn)有對(duì)象的方法，賦值到某個(gè)變量。let log, sin, cos = Math;上面代碼將 Math 對(duì)象的對(duì)數(shù)、正弦、余弦三個(gè)方法，賦值到對(duì)應(yīng)的變量上，使用起來(lái)就會(huì)方便很多。字符串的解構(gòu)賦值字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)，字符串被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象。類(lèi)似數(shù)組的對(duì)象都有一個(gè) length 屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。const a, b, c, d, e = o;a / hb / ec / ld / le / o/ 錯(cuò)誤的寫(xiě)法 var x;x = x: 1;/ SyntaxError: syntax error_tmp.foo.bar / 報(bào)錯(cuò)數(shù)

16、值和布爾值的解構(gòu)賦值解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。s = Numbrototype.toString / truelet toString: s = true;s =.prototype.toString / true上面代碼中，數(shù)值和布爾值的包裝對(duì)象都有 toString 屬性，因此變量s 都能取到值。解構(gòu)賦值的規(guī)則是，只要等號(hào)右邊的值不是對(duì)象，就先將其轉(zhuǎn)為對(duì)象。由于 undefined和 null 無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值。上面代碼中，函數(shù) add 的參數(shù)表面上是一個(gè)數(shù)組，但在傳入?yún)?shù)的那一刻，

17、數(shù)組參數(shù)就被解變量x 和y。對(duì)于函數(shù)的代碼來(lái)說(shuō)，它們能感受到的參數(shù)就是 x 和y。下面是另一個(gè)例子。1, 2, 3, 4.map(a, b) = a + b);/ 3, 7 function add(x, y) return x + y;add(1, 2); / 3let prop: x = undefined; / TypeErrorlet prop: y = null; /TypeErrorlet toString: s = 123;let length : len = o;len / 5函數(shù)參數(shù)的解構(gòu)也可以使用默認(rèn)值。上面代碼中，函數(shù) move 的參數(shù)是一個(gè)對(duì)象，通過(guò)對(duì)這個(gè)對(duì)象進(jìn)行解構(gòu)，

18、得到變量 x 和y 的值。如果解構(gòu)失敗，x 和y 等于默認(rèn)值。注意，下面的寫(xiě)得到不一樣的結(jié)果。上面代碼是為函數(shù) move 的參數(shù)指定默認(rèn)值，而不是為變量x 和y 指定默認(rèn)值，所以會(huì)得到與前一種寫(xiě)法不同的結(jié)果。undefined 就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值。圓括號(hào)問(wèn)題解構(gòu)賦值雖然很方便，但是起來(lái)并不容易。對(duì)于編譯器來(lái)說(shuō)，一個(gè)式子到底是模式，還是表達(dá)式，沒(méi)有辦法從一開(kāi)始就知道，必須到（或不到）等號(hào)才能知道。是，如果模式中出現(xiàn)圓括號(hào)怎么處理。ES6 的規(guī)則是，只要有可能導(dǎo)致由此帶來(lái)解構(gòu)的歧義，就不得使用圓括號(hào)。但是，這條規(guī)則實(shí)際上不那么容易辨別，處理起來(lái)相當(dāng)麻煩。因此，建議只要有可能，就不要在模式中放

19、置圓括號(hào)。1, undefined, 3.map(x = yes) = x);/ 1, yes, 3 function move(x, y = x: 0, y: 0 ) return x, y;move(x: 3, y: 8); / 3, 8move(x: 3); / 3, undefinedmove();/ undefined, undefinedmove(); / 0, 0function move(x = 0, y = 0 = ) return x, y;move(x: 3, y: 8); / 3, 8move(x: 3); / 3, 0move(); / 0,0move(); / 0,

20、 0不能使用圓括號(hào)的情況以下三種解構(gòu)賦值不得使用圓括號(hào)。（1）變量語(yǔ)句中，不能帶有圓括號(hào)。上面三個(gè)語(yǔ)句都會(huì)報(bào)錯(cuò)，因?yàn)樗鼈兌际亲兞空Z(yǔ)句，模式不能使用圓括號(hào)。（2）函數(shù)參數(shù)中，模式不能帶有圓括號(hào)。函數(shù)參數(shù)也屬于變量，因此不能帶有圓括號(hào)。（3）賦值語(yǔ)句中，不能將整個(gè)模式，或嵌套模式中的一層，放在圓括號(hào)之中。上面代碼將整個(gè)模式放在圓括號(hào)之中，導(dǎo)致報(bào)錯(cuò)。上面代碼將嵌套模式的一層，放在圓括號(hào)之中，導(dǎo)致報(bào)錯(cuò)。可以使用圓括號(hào)的情況可以使用圓括號(hào)的情況只有一種：賦值語(yǔ)句的非模式部分，可以使用圓括號(hào)。(b) = 3; / 正確( p: (d) = ); / 正確(p) = 3;/ 正確/ 報(bào)錯(cuò)(

21、 p: a ), x: c = , ;/ 全部報(bào)錯(cuò)( p: a ) = p: 42 ;(a) = 5;/ 報(bào)錯(cuò)function f(z) return z; / 全部報(bào)錯(cuò) var (a) = 1;var x: (c) = ;var (x: c) = ;var (x: c) = ;var (x): c = ; var o: ( p: p ) = o: p: 2 ;上面三行語(yǔ)句都可以正確執(zhí)行，因?yàn)槭紫人鼈兌际琴x值語(yǔ)句，而不是語(yǔ)句；其次它們的圓括號(hào)都不屬于模式的一部分。第一行語(yǔ)句中，模式是取數(shù)組的第一個(gè)成員，跟圓括號(hào)無(wú)關(guān)；第二行語(yǔ)句中，模式是 p，而不是 d；第三行語(yǔ)句與第一行語(yǔ)句的性質(zhì)一致。用途變

22、量的解構(gòu)賦值用途很多。（1）交換變量的值上面代碼交換變量x 和y 的值，這樣的寫(xiě)法不僅簡(jiǎn)潔，而且易讀，語(yǔ)義非常清晰。（2）從函數(shù)返回多個(gè)值函數(shù)只能返回一個(gè)值，如果要返回多個(gè)值，只能將它們放在數(shù)組或?qū)ο罄锓祷?。有了解?gòu)賦值，取出這些值就非常方便。 return 1, 2, 3;var a, b, c = exle(); ;var foo, bar = exle();（3）函數(shù)參數(shù)的定義解構(gòu)賦值可以方便地將一組參數(shù)與變量名對(duì)應(yīng)起來(lái)。（4）提取 JSON 數(shù)據(jù)解構(gòu)賦值對(duì)提取JSON 對(duì)象中的數(shù)據(jù)，尤其有用。/ 參數(shù)是一組有次序的值 function f(x, y, z) . f(1, 2, 3);/ 參數(shù)是一組無(wú)次序的值 function f(x, y, z) . f(z: 3, y: 2, x: 1);/ 返回一個(gè)對(duì)象function exle() return foo: 1,bar: 2/ 返回一個(gè)數(shù)組function exle() x, y = y, x;上面代碼可以快速提取JSON 數(shù)據(jù)的值。（5）函數(shù)參數(shù)的默認(rèn)值jQuery.ajax = function (url, async = true,beforeSend = function () , cache = true,complete = function () , cross= false,var jsonD