ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值恬惯，對(duì)變量進(jìn)行賦值狭郑，這被稱為解構(gòu)
一. 數(shù)組
例子:
let [a, b, c] = [1, 2, 3];
等同于
let a = 1;
let b = 2;
let c = 3;
Tips:從數(shù)組中提取值，按照對(duì)應(yīng)位置铸题，對(duì)變量賦值
let [a, [b], c] = [1, [2], 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
let [ , , third] = ['one' , 'two', 'three']
console.log(third); // three
let [x , ,z ] = [1, 2, 3];
console.log(x); // 1
console.log(z); // 3
let [top , ...buttom] = [1, 2, 3, 4];
console.log(top); // 1
console.log(buttom); // [2, 3, 4]
let [x, y, ...z] = ['a'];
console.log(x); // a
console.log(y); // undefiend
console.log(z); // [ ]
Tips: 如果解構(gòu)不成功铡恕，變量的值就等于undefined。
不完全解構(gòu)丢间，即等號(hào)左邊的模式探熔，只匹配一部分的等號(hào)右邊的數(shù)組。這種情況下烘挫，解構(gòu)依然可以成功诀艰。
例子:
let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
let [x, [y], z] = ['a', ['b' , 'c'], d];
console.log(x); // a
console.log(y); // b
console.log(z); // d
如果等號(hào)的右邊不是數(shù)組（或者嚴(yán)格地說，不是可遍歷的結(jié)構(gòu)饮六，參見《Iterator》一章）其垄，那么將會(huì)報(bào)錯(cuò)。
// 報(bào)錯(cuò)
let [a] = 1;
let [a] = false;
let [a] = undefined;
let [a] = null;
let [a] = {};
解構(gòu)賦值允許指定默認(rèn)值卤橄。
例子:
let [ i = 'mark'] = []; // i = 'mark'
let [x, y = 'a'] = ['b']; // x = 'b', y = 'a'
let [x, y = 'b'] = [ 'a' , undefiend]; // x = 'a' , y = 'b'
Tips: ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）绿满，判斷一個(gè)位置是否有值。所以窟扑，如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined喇颁，默認(rèn)值是不會(huì)生效的漏健。
let [x = 1] = [undefined];
//x = 1
let [x = 1] = [null];
// x = null
Tips : 如果一個(gè)數(shù)組成員是null，默認(rèn)值就不會(huì)生效橘霎，因?yàn)閚ull不嚴(yán)格等于undefined蔫浆。
如果默認(rèn)值是一個(gè)表達(dá)式，那么這個(gè)表達(dá)式是惰性求值的姐叁，即只有在用到的時(shí)候瓦盛，才會(huì)求值。
例子:
function f(){
return 'aaa';
}
let [a = f()] = [1];
// a = 1
Tips: 因?yàn)閤能取到值外潜，所以函數(shù)f根本不會(huì)執(zhí)行谭溉。
默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明橡卤。
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
Tips: 最后一個(gè)表達(dá)式之所以會(huì)報(bào)錯(cuò)，是因?yàn)閤用到默認(rèn)值y時(shí)损搬，y還沒有聲明
二. 對(duì)象的解構(gòu)賦值
對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同碧库。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定巧勤；而對(duì)象的屬性沒有次序嵌灰，變量必須與屬性同名，才能取到正確的值颅悉。
let { name, age} = { name : 'mark', age : 12}
name // 'mark'
age //12
Tips:對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同沽瞭。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定剩瓶；而對(duì)象的屬性沒有次序驹溃，變量必須與屬性同名，才能取到正確的值延曙。
let { age, name } = { name: "mark", age : 12 };
let { height } = { name: "mark", age : 12 };
height // undefiend
Tips:號(hào)左邊的兩個(gè)變量的次序豌鹤，與等號(hào)右邊兩個(gè)同名屬性的次序不一致，但是對(duì)取值完全沒有影響枝缔。第二個(gè)例子的變量沒有對(duì)應(yīng)的同名屬性布疙，導(dǎo)致取不到值，最后等于undefined愿卸。
//如果變量名與屬性名不一致灵临，必須寫成下面這樣。
var { name: myName} = { name: 'mark', age: 12 };
myName // 'mark'
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
Tips: first是匹配的模式趴荸，f才是變量儒溉。真正被賦值的是變量f，而不是模式first赊舶。
與數(shù)組一樣睁搭，解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象赶诊。
//這時(shí)p是模式，不是變量园骆，因此不會(huì)被賦值舔痪。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
}
let { p: [x, { y }] } = obj;
x // 'Hello'
y // 'world'
//p作為變量賦值
let { p, p: [x, { y }] } = obj;
x // 'Hello'
y // 'world'
p // ["Hello", {y: "World"}]
var node = {
loc: {
start: {
line: 1,
column: 5
}
}
}
var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
對(duì)象的解構(gòu)也可以指定默認(rèn)值。
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 { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
默認(rèn)值生效的條件是锌唾，對(duì)象的屬性值嚴(yán)格等于undefined锄码。
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
Tips : 如果x屬性等于null，就不嚴(yán)格相等于undefined晌涕，導(dǎo)致默認(rèn)值不會(huì)生效滋捶。如果解構(gòu)失敗，變量的值等于undefined余黎。
let {foo} = {bar: 'baz'};
foo //undefined
如果解構(gòu)模式是嵌套的對(duì)象重窟，而且子對(duì)象所在的父屬性不存在，那么將會(huì)報(bào)錯(cuò)惧财。
//報(bào)錯(cuò)
let {foo: {bar}} = {baz: 'baz'};
Tips:上面代碼中巡扇，等號(hào)左邊對(duì)象的foo屬性，對(duì)應(yīng)一個(gè)子對(duì)象垮衷。該子對(duì)象的bar屬性厅翔，解構(gòu)時(shí)會(huì)報(bào)錯(cuò)。原因很簡單搀突，因?yàn)閒oo這時(shí)等于undefined刀闷，再取子屬性就會(huì)報(bào)錯(cuò)
三. 字符串的解構(gòu)賦值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
....
類似數(shù)組的對(duì)象都有一個(gè)length屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值仰迁。
let {length : len} = 'hello';
解構(gòu)賦值的規(guī)則是甸昏，只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象徐许。由于undefined和null無法轉(zhuǎn)為對(duì)象筒扒，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)绊寻。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
Tips: undefined和null無法轉(zhuǎn)為對(duì)象花墩，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)澄步。
四.函數(shù)參數(shù)的解構(gòu)賦值
函數(shù)的參數(shù)也可以使用解構(gòu)賦值冰蘑。
function add([x, y]){
return x+y;
}
add([3,4]); // 7
Tips: 函數(shù)add的參數(shù)表面上是一個(gè)數(shù)組，但在傳入?yún)?shù)的那一刻村缸，數(shù)組參數(shù)就被解構(gòu)成變量x和y
[[3, 4] , [5, 6]].map(([a , b]) => a+b);
// [7, 11]
函數(shù)參數(shù)的解構(gòu)也可以使用默認(rèn)值祠肥。
function move({x = 0, y = 0} = {}){
return [x, y];
}
move({}); // [0, 0]
move({x : 1, y : 2}); // [1,2]
move({x : 2}); // [2, 0]
move(); // [0, 0]
function move({x , y} = { x = 0, y =0}){
return [x , y];
}
move({}); // [undefiend, undefiend]
move({x : 3, y : 8}); // [3, 8]
move({x : 3}); // [3, undefiend]
move(); // [0, 0]
Tips: 上面代碼是為函數(shù)move的參數(shù)指定默認(rèn)值，而不是為變量x和y指定默認(rèn)值
undefined就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值梯皿。
[1, undefiend, 3].map((x = 'no') => x);
[1, 'no', 3]
五. 解構(gòu)賦值的用途
-
交換變量的值
let x =1; let y =2; [x , y] = [y , x]
2.從函數(shù)返回多個(gè)值
function example(){
return [1, 2, 3];
}
let [a, b ,c] = example();
function example(){
return {
foo: 1,
bar: 2
};
}
let {foo , bar} = example();
3.函數(shù)參數(shù)的定義
// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
4.提取JSON數(shù)據(jù)
let data = {
id : 12,
status : '200',
data: [867, 5309]
};
let [id, status, data : number] = data;
console.log(id , status, number);
//12, '200', [867,5309]
5.函數(shù)參數(shù)的默認(rèn)值
function ( a, { b = 's' , c = 'd'}){
// do something
}
6.遍歷Map結(jié)構(gòu)
var map = new map();
map.set('first', 'hello');
map.set('second', 'world');
for(let [key , value] of map){
console.log(key + " is " + value);
}
// 獲取鍵名
for(let [key] in map){
// .....
}
//獲得值
for(let [ , key] in map){
//.....
}
