es6 解构的使用场景
二,解构
{
let a,b,rest;
[a,b]=[1,2]
console.log(a,b); // 1 2
}
{
let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6]
console.log(a,b,rest); 1 2 [3,4,5,6]
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b) // 1 2
}
1,数组,对象结构赋值,基本方法,默认值和使用场景
1>默认值
{
let a,b,c,rest;
[a,b,c=3]=[1,2]
console.log(a,b,c) //1 2 3
}
2>作用场景
(1)变量交换,用es5的话还需要一个中间变量做存储
{
let a=1;
let b=2;
[a,b]=[b,a]
console.log(a,b) //2 1
}
(2)如果有个返回值我们想取出来,如果用es5的话那不得先给一个变量a ,然后a[0],a[1 ]
{
function f(){
return [1,2]
}
let a,b;
[a,b]=f();
console.log(a,b); //1 2
}
(3)返回值只关心某个
{
function f(){
return [1,2,3,4,5]
}
let a,b,c
[a,,,b]=f();
console.log(a,b)
}
(4)返回值不确定长度和内容,只关心第一个值,把其它的放一个数组里
{
function f(){
return [1,2,3,4,5]
}
let a,b,c
[a,...b]=f();
console.log(a,b) // a上1 b是[2,3,4,5]
}
(5)返回值不确定长度和内容,只关心第一个值,把其它的放一个数组里
{
function f(){
return [1,2,3,4,5]
}
let a,b,c
[a,,...b]=f();
console.log(a,b) // a上1 b是[3,4,5] 把2就丢掉了
}
对象解构,把对象解构给变量
{
let 0={p:42,q:true}
let {p,q}=o;
console.log(p,q) //p=42,q=true
}
对象默认值
{
let {a=10,b=5}={a:3}
console.log(a,b) // a=13,b=5
}
对象嵌套数组解构
{
let metaData={
title:'abc',
test:[
title:'test',
desc:'description'
]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData; //这里的test名称和后面的结构写法都要和对象里的test一样的
console.log(esTitle,cnTitle) //esTitle=abc cnTitle=test
}
版权声明:本文由Web学习之路发布,如需转载请注明出处。