变量的结构赋值

参考：阮一峰es6 http://es6.ruanyifeng.com/#docs/destructuring

时间：2018-07-04

es6按照一定的模式，从数组和对象中提取值，对变量进行赋值。

1.数组的解构赋值：按照顺序

let a=1;
let b=2;
let c=3;
//和
let [a,b,c]=[1,2,3]
//等价
//只要左右两侧模式匹配，就会赋值
let[,,a]=[1,2,3];//a:3
let [a,...b]=[1,2,3,4]//b:[2,3,4]
let [a,b,...c]=[1];//a:1;b:undefined;c:[]
let [foo]=[]//foo:undefined;
let [bar,foo]=[1]//foo:undefined;
let [bar]=[1,2,3]//bar :1

如果等号右边不具备iterator接口(可遍历？以后会总结)，则报错

let [a,b]=1;
let [a]=1;
let a={};
.......

对于set结构（不知道？下一章写）

let [x,y,z]=new Set([1,2,3])

默认值

let [foo=1]=[]//foo:1
let [a,b=2]=[3]//a:3;b:2;
let [a=1]=[null]//a:null
let [a=1]=[undefined]//a=1
//undefined和null表示：我们不一样；仅当undefined时默认值起作用；
//默认值是惰性求值，使用到才会计算

//默认值可以引用解构赋值的其他变量，但该变量在此之前必须已经声明
let [x=1,y=x]=[];//1,1
let [x=y,y=1]=[];//引用错误

对象的解构赋值：按照属性

let {a,b}={a:1,b:2}//a:1;b:2
let {aa}={a:1,b:2}//aa:undefined
//如果下标不一样
let {a:aa} = {a:1,b:2}//aa:1
//先赋值给同名属性，在赋值给对应的变量
let {a,b}等价于let {a:a,b:b}

let obj = {
    p:['hello',{y:'word'}]
};
1）let {p} = obj ;//对p进行赋值
2)  let {p:[a,{y}]} = obj ;//对a和y赋值，p作为模式
3）let {p,p:[a,{y}]} = obj ;//对p和a，y赋值
//题外话
let {a,a}={a:1}//这里会报错，因为let声明的变量会锁死当前区域，不允许重复声明。
//为什么第三个不是重复声明变量？
//第三个可以解析为
let {p:p,p:[a,{y}]}={p:['hello',{y:'word'}]};
//在这里是声明了两个不同的变量；
//而4则解析为：
//let {a:a,a:a}//声明了两个相同的变量，let锁死区，所以会报错

默认值：

let {x=3}={};//x:3;
let {x:y=5}={x:4};//y:4
//默认值生效的条件是对象的属性值为undefined；
let {x=2}={x:null}//x:null
//结构失败对应的值也为undefined，再取下一层则报错

对于一个已经已声明的变量用于解构赋值

let x；
{x}={x:1};//错误的写法
({x} = {x:1});//正确的写法

对数组进行对象属性的解构

let arr = [1,2,3];
let {0:first}=arr;//first:1

字符串解构赋值

const [a,b,c,d] = 'hello';//h e l l
let {length : len}='hello'//5

数值布尔值解构赋值：

只要等号右边的值不是数组或者对象，就会将其转为对象，由于undefined和null无法转为对象，所以对其解构赋值会报错、

let {prop:x} = undefined;//TypeError
let {prop:y}=null;//TypeError

函数参数解构赋值

function add([x,y]){
    console.log(x+y)  
}
add([1,2])
[[1,2],[3,4]].map(([a,b])=>{a+b});//[3,7]

函数参数解构使用默认值

function move({x=0,y=0}={}){
 return [x,y];
}
move({x:3,y:8})//[3,8]
move({x:3})//[3,0]
move({})//[0,0]
move();//[0,0]
//对比一下以下写法
function move({x,y}={x:0,y:0}){
    return [x,y]
}
//3,8
//[3,undefined]
//[undefined,undefined]
//[0,0]



///////////////////
//undefined会触发函数参数默认值
[1,undefined,3].map((x='yes')=>x)//[1,'yes',3]

圆括号问题

不要在圆括号内使用解构赋值

猜你喜欢