es6 淺解“解構”
阿新 • • 發佈:2017-07-12
fin 阮一峰 doc -s 等價 itl under 變量 基本
先上一段代碼,
{
function move({x: t = 0, y = 0, z = 3} = ‘111‘) {
return [x="x",t, y, 9, z];
}
console.log(move({x: 3, y: 8, z: 5})); // ["x",3, 8, 9, 5]
console.log(move({x: 3})); // ["x",3, 0, 9 ,3]
console.log(move({})); // ["x",0, 0, 9, 3]
console.log(move()); // ["x",0, 0, 9 ,3]
let [a, ...b] = move({x: 4});
console.log(a);//x
console.log(b);//[4,0,9,3]
}
如果能弄懂這個代碼,基本了解到解構的精髓了。
知識點1:
數組的解構
下標取值
let [a,b]=[3,4];//a=3,b=4
等價於
let c=[3,4];
let a=c[0];
let b=c[1];
賦默認值
let [a=1,b]=[,4];//a=1,b=4
等價於
let c=[undefined,4];
let a,b=c[1];
if(c[0]===undefined){
a=1;
}
註意:let [a=1,b]=[null,4];//a=null,b=4,只有c[0]為undefined未定義才賦默認值。
其他
let [a,...b]=[1,2,3,4];//a:1,b:[2,3,4]
let [a,,b]=[1,2,3];//a:1,b:3
let [a,[b],c]=[1,[2,3],4];//a:1,b:2,c:4
報錯
let [a]=1;//報錯
let [a]=false;//報錯
let [a]=NaN;//報錯
let [a]=undefined;//報錯
let [a]=null;//報錯
let [a]={};//報錯
對象解構
let {a,b}={a:1,b:2};//a=1,b=2
相當於
let c={a:1,b:2};
let a=c.a;
let b=c.b;
另let {b,a}={a:1,b:2};//a=1,b=2,沒有排序要求
let {a:t,b}={a:1,b:2};//t=1,b=2
相當於
let c={a:1,b:2};
let t=c.a;
let b=c.b;
*a為匹配模式,t為變量名稱.
let {a:{b:{c},d:h,b},g:t}={a:{b:{c:1},d:2},f:3,g:4}//c=1,t=4,h=2,b={c:1};
相當於
let o={a:{b:{c:1},d:2},f:3,g:4};
let c=o.a.b.c;
let h=o.a.d;
let b=o.a.b;
let t=a.g;
*多重嵌套,規則一樣"冒號前為匹配模式,冒號後為變量名"
let a;
({a}={a:3});
*必須加括號,因為每一行的首個字符如果為{,會被解析為塊級作用域
let a={},b=[];
({c:a.pro,d:b[0],e:b[1]=4}={c:2,d:3});//a={pro:2},b=[3,4];
相當於
let a={},b=[],f={c:2,d:3};
a.pro=f.c;
b[0]=f.d;
b[1]=f.e;
if(b[1]===undefined){
b[1]=4;
}
let {0:a,1:b}=[3,4]//a=3,b=4
*數組是特殊的對象
分析文章開始的move函數
function move({x: t = 0, y = 0, z = 3} = ‘111‘) {
return [x="x",t, y, 9, z];
}
等價於
function move(a){
if(a===undefined) a=‘111‘;
let t=a.x, y=a.y, z=a.z, x;
if(t===undefined) t=0;
if(y===undefined) y=0;
if(z===undefined) z=3;
if(x===undefined) x=‘x‘;
return [x,t,y,9,z]
}
想要學習完整詳細的es6解構知識點或es6技術,推薦阮一峰老師的es6教程。
es6 淺解“解構”