等價 gin let 一個 函數返回 部分 syntax 解析器 求值

1.數組的解構賦值

基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。

要想實現解構，就必須是容器，或者具有可遍歷的接口。

以前，為變量賦值，只能直接指定值。

let a = 1;

let b = 2;

let c = 3;

ES6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

上面代碼表示，可以從數組中提取值，按照對應位置，對變量賦值。

本質上，這種寫法屬於模式匹配:只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

例:

let [a, [[b], c]] = [1, [[2], 3]];

a// 1

b// 2

c// 3

let [ , , c] = ["1", "2", "3"];

c// "3"

let [x, , y] = [1, 2, 3];

x // 1

y // 3

let [A1, ...An] = [1, 2, 3, 4];

A1// 1

An// [2, 3, 4]

let [x, y, ...z] = [‘1‘];

x // "1"

y // undefined

z // []

如果解構不成功，變量的值就等於undefined。

let [foo] = [];

let [bar, foo] = [1];

以上兩種情況都屬於解構不成功，foo的值都會等於undefined。

不完全解構

:等號左邊的模式，只匹配一部分的等號右邊的數組。這種情況下，解構依然可以成功。

let [x, y] = [1, 2, 3];

x // 1

y // 2

let [a, [b], d] = [1, [2, 3], 4];

a // 1

b // 2

d // 4

上面兩個例子，都屬於不完全解構，但是可以成功。

如果等號的右邊不是數組（或者說，不是可遍歷的結構），那麽將會報錯。

// 報錯

let [foo] = 1;

let [foo] = false;

let [foo] = NaN;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

上面的語句都會報錯，因為等號右邊的值不是數組

2.默認值

解構賦值允許指定默認值。

let [foo = true] = [];

foo // true

let [x, y = ‘b‘] = [‘a‘]; // x=‘a‘, y=‘b‘

let [x, y = ‘b‘] = [‘a‘, undefined]; // x=‘a‘, y=‘b‘

註意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等於undefined，默認值是不會生效的。

let [x = 1] = [undefined];

x // 1

let [x = 1] = [null];

x // null

上面代碼中，如果一個數組成員是null，默認值就不會生效，因為null不嚴格等於undefined。

如果默認值是一個表達式，那麽這個表達式是惰性求值(懶加載)的，即只有在用到的時候，才會求值。

function f() {

console.log(‘aaa‘);

}

let [x = f()] = [1];

上面代碼中，因為x能取到值，所以函數f根本不會執行。上面的代碼其實等價於下面的代碼。

let x;

if ([1][0] === undefined) {

x = f();

} else {

x = [1][0];

}

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

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

上面最後一個表達式之所以會報錯，是因為x用到默認值y時，y還沒有聲明。

3.對象的解構賦值

解構不僅可以用於數組，還可以用於對象。

let {name , age} = { name : "aaa", age: "bbb" };

name // "aaa"

age// "bbb"

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；

而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

let { name , age} = { name : "aaa", age: "bbb" };

name // "aaa"

age// "bbb"

let { age} = { name : "aaa", age1: "bbb" };

age// undefined

上面代碼的第一個例子，等號左邊的兩個變量的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導致取不到值，最後等於undefined。

如果變量名與屬性名不一致，必須寫成下面這樣。

var { name : mingzi} = { name1 : ‘aaa‘, age: ‘bbb‘ };

mingzi// "aaa"

let obj = { first: ‘hello‘, last: ‘world‘ };

let { first: f, last: l } = obj;

f // ‘hello‘

l // ‘world‘

實際上，對象的解構賦值是下面形式的簡寫

let { name: name, age: age} = { name: "aaa", age: "bbb" };

也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變量。真正被賦值的是後者，而不是前者。

let { name: mingzi} = { name: "aaa", age: "bbb" };

mingzi// "aaa"

name// error: foo is not defined

上面代碼中，name是匹配的模式，mingzi才是變量。真正被賦值的是變量mingzi，而不是模式name。

註意點，采用這種寫法時，變量的聲明和賦值是一體的。對於let和const來說，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會報錯。

let name;

let {name} = {name: 1}; // SyntaxError

let age1;

let {age: age1} = {age: 1}; // SyntaxError

上面2段代碼中，解構賦值的變量都會重新聲明，所以報錯了。不過，因為var命令允許重新聲明，所以這個錯誤只會在使用let和const命令時出現。如果沒有第二個let命令，上面的代碼就不會報錯。

let name;

({name} = {name: 1}); // 成功

let age;

({age: age1} = {age: 1}); // 成功

上面代碼中，let命令下面一行的圓括號是必須的，否則會報錯。因為解析器會將起首的大括號，理解成一個代碼塊，而不是賦值語句。

]

對象的解構也可以指定默認值。

var {x = 3} = {};

x // 3

var {x, y = 5} = {x: 1};

x // 1

y // 5

var {x:y = 3} = {};

y // 3

var {x:y = 3} = {x: 5};

y // 5

var { name: mingzi= ‘karen‘ } = {};

mingzi// ‘karen‘

默認值生效的條件是，對象的屬性值嚴格等於undefined。

var {x = 3} = {x: undefined};

x // 3

var {x = 3} = {x: null};

x // null

上面代碼中，如果x屬性等於null，就不嚴格相等於undefined，導致默認值不會生效。

如果解構失敗，變量的值等於undefined。

let {name} = {age: ‘karen‘};

name// undefined

對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。

let { log, sin, cos } = Math;

上面代碼將Math對象的對數、正弦、余弦三個方法，賦值到對應的變量上，使用起來就會方便很多。

由於數組本質是特殊的對象，因此可以對數組進行對象屬性的解構。

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。方括號這種寫法，屬於“屬性名表達式”

4.字符串的解構賦值

字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。

const [a, b, c, d, e] = ‘hello‘;

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

let {length : len} = ‘hello‘;

len // 5

====解構賦值用途

1.交換變量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

2.提取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]

上面代碼可以快速提取 JSON 數據的值。

3.從函數返回多個值

函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象裏返回。有了解構賦值，取出這些值就非常方便。

// 返回一個數組

function example() {

return [1, 2, 3];

}

let [a, b, c] = example();

// 返回一個對象

function example() {

return {

foo: 1,

bar: 2

};

}

let { foo, bar } = example();

Es6 新增解構賦值