1. 數(shù)組的解構(gòu)賦值
let a = 1;
let b = 2;
let c = 3;
// ES6 可以寫(xiě)成
let [a,b,c] = [1,2,3];
1.1 “模式匹配”，只要等號(hào)兩邊的模式相同长踊，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值
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 ; 如果結(jié)構(gòu)不成功就是undefined
z // [] ;
1.2 如果等號(hào)的右邊不是數(shù)組（或者嚴(yán)格地說(shuō)身弊，不是可遍歷的結(jié)構(gòu)佑刷，那么將會(huì)報(bào)錯(cuò)瘫絮。
// 報(bào)錯(cuò)
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
1.3 默認(rèn)值
let [x, y = 'b'] = ['a']; // x='a', y='b'
// ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）判斷一個(gè)位置是否有值
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
// 默認(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 = y, y = 1] = []; // ReferenceError: y is not defined
2. 對(duì)象的解構(gòu)語(yǔ)法
2.1 對(duì)象的屬性沒(méi)有次序,變量名必須與屬性名同名,才能取到正確的值
let {foo , bar} = { foo : 'aaa' , bar :'bbb'}
foo //aaa
bar //bbb
// 變量名與屬性名不一致
let { foo:baz} = {foo : 'aaa' ,bar : 'bbb'}
baz // 'aaa' ;
foo // error : foo is not defined
// 先找到同名屬性,然后再賦給對(duì)應(yīng)的變量 真正被賦值的是后者
2.2 對(duì)象解構(gòu)也可以用于相套結(jié)構(gòu)對(duì)象
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
2.3 對(duì)象的解構(gòu)也可以指定默認(rèn)值
var { x =3} = {}
x // 3
var {x : y = 3} = { x: 5}
y // 5
2.4 如果解構(gòu)失敗 變量的為undefined
let {foo} = {bar : 'baz'};
foo //undefined
2.5 如果解構(gòu)模式是嵌套的對(duì)象,而且子對(duì)象所在的福屬性不存在就會(huì)報(bào)錯(cuò)
// 報(bào)錯(cuò)
let {foo : {bar}} = {bar : 'baz'};
2.6 將一個(gè)已聲明的變量用于解構(gòu)賦值
let x;
{x} = { x : 1};
// SynctaxError : synctax error
// 上面代碼報(bào)錯(cuò) 因?yàn)闀?huì)將{x} 解析成一個(gè)代碼段 發(fā)生語(yǔ)法錯(cuò)誤
( {x} = { x = 1})
2.7 對(duì)象的解構(gòu)賦值,可以很方便的地將現(xiàn)有對(duì)象的方法,賦值到某個(gè)變量上
let { log, sin, cos } = Math;
2.8 由于數(shù)組本質(zhì)是特殊的對(duì)象,因此可以對(duì)數(shù)組進(jìn)行對(duì)象屬性的解構(gòu)
let arr = [1,2,3] ;
let { 0 : first ,[arr.length - 1] : last} = arr ;
first // 1
last // 3
3 字符串的解構(gòu)賦值
3.1 字符串可轉(zhuǎn)換成一個(gè)類(lèi)似于數(shù)組的對(duì)象
const [a,b,c,d,e] = 'hello' ;
a // 'h'
b // 'e'
c // 'l'
d // 'l'
o // 'o'
// 類(lèi)數(shù)組都有一個(gè)length屬性
let {length : len} = 'hello' ;
len // 5
4 數(shù)值和布爾值的解構(gòu)賦值
4.1 解構(gòu)賦值時(shí)如果等號(hào)右邊是數(shù)值和布爾值,則會(huì)先轉(zhuǎn)為對(duì)象
let { toString : s } = 123 ;
s === Number.prototype.toString // true
let {toString : s} = true ;
s === Boolean.prototype.toString // true
解構(gòu)的規(guī)則: 如果等號(hào)右邊的值不是數(shù)組或?qū)ο?就先將其轉(zhuǎn)化為對(duì)象;因?yàn)?undefined和null 無(wú)法轉(zhuǎn)換成兌現(xiàn),所以進(jìn)行解構(gòu)賦值會(huì)報(bào)錯(cuò)
5 函數(shù)參數(shù)的機(jī)構(gòu)賦值
function move ({x = 0 ,y = 0}) {
return [x ,y]
}
move({ x : 3 , y : 3 }) // [ 3 ,3 ] ;
move({ x : 3}) // [ 3 ,0 ] ;
move ({ }) // [ 0 ,0 ] ;
move() // [ 0 ,0 ];
5.1 undefined 會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值.
[1, undefined , 3].map((x = 'yes') => x); // [1,'yes',3]
6 圓括號(hào)問(wèn)題 以下三種解構(gòu)賦值不得使用圓括號(hào)
3.1 變量聲明語(yǔ)句
// 全部報(bào)錯(cuò)
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
3.2 函數(shù)參數(shù)
// 報(bào)錯(cuò)
function f([(z)]) { return z; }
// 報(bào)錯(cuò)
function f([z,(x)]) { return x; }
3.3 賦值語(yǔ)句的模式
// 全部報(bào)錯(cuò)
({ p: a }) = { p: 42 };
([a]) = [5];
7 用途
7.1 交換變量的值
let x = 1 ;
let y = 2 ;
[x , y] = [ y , x] ;
7.2 從函數(shù)返回多個(gè)值
// 返回?cái)?shù)組
function example() {
return [1,2,3];
}
let [a,b,c] = example();
//返回對(duì)象
function example() {
return { foo : 1 , bar : 2 };
}
let {foo ,bar} = example();
7.3 函數(shù)的定義
// 參數(shù)是一個(gè)有序數(shù)值
function f ([x,y,z]) {...}
f([1,2,3]) ;
// 參數(shù)是一個(gè)無(wú)序數(shù)值
function f({x,y,z}) {}
f({x = 1, z = 2, y = 3});
7.4 提取json數(shù)據(jù)
let jsonData = { id : 12 , status : 'ok' , data : [1212,545]};
let {id , status , data: number} = jsonData ;
console.log(id ,status ,number) ; // 12 ,'ok' ,[1212,545]
7.5 函數(shù)參數(shù)的默認(rèn)值
function ajax( url , {async = true, id = 1});
7.6 遍歷map解構(gòu)
const map = new map();
map.set( 'first' , 'hello');
map.set( 'last' , '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");
