1. 程式人生 > >es6 淺解“解構”

es6 淺解“解構”

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 淺解“解構”