ES6 變數的結構賦值
1.陣列的解構賦值
1.1 基本用法
ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
下面是一些解構的例子:
let [foo, [[bar], baz]] = [1, [[2], 3]]; //foo -> 1, //bar -> 2, //baz -> 3 let [, , third] = ["foo", "bar", "baz"]; //third -> "baz" let [x, , y] = [1, 2, 3]; //x -> 1, //y -> 3 let [head, ...tail] = [1, 2, 3, 4];//head -> 1 // tail -> [2, 3, 4] let [x, y, ...z] = ['a']; //x -> "a", // y -> undefined, //z -> [] let [x, y] = [1, 2, 3]; //x -> 1, //y -> 2 let [a, [b], d] = [1, [2, 3], 4]; //a -> 1, //b -> 2, //d -> 4
如果解構不成功,那麼變數的值就等於undefined。如下面的所示。
let [foo] = []; let [bar, foo] = [1]; //foo賦值失敗,它的值未undefined
另一種情況是不完全解構,即等號左邊的模式,只匹配一部分的等號右邊的陣列。這種情況下,解構依然可以成功。
let [x, y] = [1, 2, 3]; //x -> 1 //y -> 2 //只匹配一部分等號右邊的陣列
如果等號的右邊不是陣列,那麼就會報錯。
let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};、 //全部報錯
1.2 預設值
解構賦值允許指定預設值,ES6 內部使用嚴格相等運算子(===
),判斷一個位置是否有值。所以,只有當一個數組成員嚴格等於undefined
let [x,y="hello",z='b',zplus] = ['good',,undefined,null]; //x='good', y='hello', z=undefined, zplus=null; //上面程式碼中,zplus是null,因為null不嚴格等於undefined,所以預設值就不會生效
如果預設值是一個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值。
function f() { console.log('hello'); } let [x = f()] = [1]; //上面程式碼中,因為x能取到值,所以函式f根本不會執行。
預設值可以引用解構賦值的其他變數,但該變數必須已經宣告。
let [x = 1, y = x] = []; // x=1; y=1 let [x = 1, y = x] = [2]; // x=2; y=2 let [x = 1, y = x] = [1, 2]; // x=1; y=2 let [x = y, y = 1] = []; // ReferenceError: y is not defined //因為x用y做預設值時,y還沒有宣告。
2.物件的解構賦值
2.1簡介
物件的解構與陣列有一個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。如果解構失敗,變數的值為undefined。
let {foo,bar} = { foo: 'aaa', bar: 'bbb' }; //foo==='aaa', bar==='bbb' //以上的賦值解構是下面的簡寫形式 let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
物件的解構賦值,可以很方便地將現有物件的方法,賦值到某個變數。
const { log } = console; log('hello') //等同於console.log('hello') // 列印hello,將console.log
賦值到log
變數
如果變數名與屬性名不一致,必須寫成下面這樣。物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz==='aaa',foo的結果是error:foo is not defined let obj = { foo: 'hello', bar: 'world' }; let { foo: f, bar: l } = obj; //f==='hello',l==='world'
在上面的第一個解構例子中,foo
是匹配的模式,baz
才是變數。真正被賦值的是變數baz
,而不是模式foo
。
2.2預設值
預設值生效的條件是,物件的屬性值嚴格等於undefined
。
a.如果要將一個已經宣告的變數進行解構賦值,必須非常小心。
let x; {x} = {x: 1};// 錯誤的寫法,SyntaxError: syntax error ({x} = {x: 1});//正確的寫法
上面的程式碼報錯,因為 JavaScript 引擎會將{x}
理解成一個程式碼塊,從而發生語法錯誤。只有不將大括號寫在行首,避免 JavaScript 將其解釋為程式碼塊,才能解決這個問題。
b.解構賦值允許等號左邊的模式之中,不放置任何變數名。因此,可以寫出非常古怪的賦值表示式。
({} = [true, false]); ({} = 'abc'); ({} = []); //無意義,但是合法
c.由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。
let arr = [1, 2, 3]; let {0 : first, [arr.length - 1] : last} = arr; //first===1,last===3
上面程式碼對陣列進行物件解構。陣列arr
的0
鍵對應的值是1
,[arr.length - 1]
就是2
鍵,對應的值是3
。方括號這種寫法,屬於“屬性名錶達式”。
3.字串的解構賦值
字串也可以解構賦值。這是因為此時,字串被轉換成了一個類似陣列的物件。類似陣列的物件都有一個length
屬性,因此還可以對這個屬性解構賦值。
const [a, b, c, d, e] = 'hello'; //a==='h',a==='e',c==='l',d==='l',e==='o' let {length : len} = 'hello'; //len===5
4.數值和布林值的解構
解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
上面程式碼中,數值和布林值的包裝物件都有toString
屬性,因此變數s
都能取到值。
解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於undefined
和null
無法轉為物件,所以對它們進行解構賦值,都會報錯。
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
5.函式引數的解構賦值
function add([x, y]){ return x + y; } add([1, 2]); // 3
上面程式碼中,函式add
的引數表面上是一個數組,但在傳入引數的那一刻,陣列引數就被解構成變數x
和y
。對於函式內部的程式碼來說,它們能感受到的引數就是x
和y
。
6.不能使用圓括號的情況
只要有可能,就不要在模式中放置圓括號,以下三種解構賦值不得使用圓括號。
a.變數宣告語句:
// 全部報錯 let [(a)] = [1]; let {x: (c)} = {}; let ({x: c}) = {}; let {(x: c)} = {}; let {(x): c} = {}; let { o: ({ p: p }) } = { o: { p: 2 } };
b.函式引數:
函式引數也屬於變數宣告,因此不能帶有圓括號。
// 報錯 function f([(z)]) { return z; } // 報錯 function f([z,(x)]) { return x; }
c.賦值語句的模式:
({ p: a }) = { p: 42 }; ([a]) = [5]; //上面程式碼將整個模式放在圓括號之中,導致報錯。 [({ p: a }), { x: c }] = [{}, {}]; //上面程式碼將一部分模式放在圓括號之中,導致報錯。
可以使用圓括號的情況只有一種:賦值語句的非模式部分,可以使用圓括號。
[(b)] = [3]; // 正確 ({ p: (d) } = {}); // 正確 [(parseInt.prop)] = [3]; // 正確
上面三行語句都可以正確執行,因為首先它們都是賦值語句,而不是宣告語句;其次它們的圓括號都不屬於模式的一部分。第一行語句中,模式是取陣列的第一個成員,跟圓括號無關;第二行語句中,模式是p
,而不是d
;第三行語句與第一行語句的性質一致。
7.用途
7.1交換變數的值
let x = 1; let y = 2; [x, y] = [y, x];
7.2從函式返回多個值
函式只能返回一個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便。
// 返回一個數組 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一個物件 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
7.3函式引數的定義
解構賦值可以方便地將一組引數與變數名對應起來。
// 引數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 引數是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
7.4提取JSON資料
解構賦值對提取 JSON 物件中的資料,尤其有用。
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
7.5函式引數的預設值
jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff };
7.6遍歷Map解構
任何部署了 Iterator 介面的物件,都可以用for...of
迴圈遍歷。Map 結構原生支援 Iterator 介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world
如果只想獲取鍵名,或者只想獲取鍵值,可以寫成下面這樣。
// 獲取鍵名 for (let [key] of map) { // ... } // 獲取鍵值 for (let [,value] of map) { // ... }
7.7輸入模組的指定方法
載入模組時,往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");