本文主要是介绍ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.数组的解构赋值
(1)语法形式，左边变量，右边值，只需左右模式匹配即可：例：let[a,b,c,d]=[10,20,30,40]
<script>// let a=10;// let b= 20;// let c=30;//以上通过解构赋值表示：let[a,b,c]=[100,200,300]console.log(a,b,c);
</script>复杂数组案例：
<script>
let[ ba, [[b]b,[bc,bd]]]=[100,[200],[300,400]];
console.log(ba,bb,bc,bd);
</script>(2) 两边模式不能匹配，也可以进行解构：
例子1：
<script>
let[a, ,b]=[1,2,3];//声明变量有一为空
console.log(a,b);//输出1,3
</script>例子2：解构赋值，变量没有设置值，系统设置个默认值Undefined
<script>
let[a, b,c]=[1,4];//声明值有一为空,
console.log(a,b,c);//输出1,4，c变量输出默认值Undefined
</script>例子3：
<script>
let[var1,var2='小红']=['小马'];/
console.log(var1,var2);//输出小马,小红，var2没有给设置值，所以var2使用了自己的默认值
</script>例子4：
<script>
let[var1='小红',var2]=['小马'];
console.log(var1,var2); //输出小马,Undefined,变量没有值，默认给了Undefined
</script>总结：
数组的解构赋值：
保证等号两边的数组模式一样；(见例子1)
如果不能正确解构，有的变量可能会自动赋值undefined；（见例子4，例子2）
变量可以有默认值；（见例子3）
2.对象的解构赋值
完整格式：
let{变量名1:变量值命名1,变量名2:变量值命名2} = {变量名1:变量值1,变量名2:变量值2};
简写形式：
let{变量名1,变量名2} = {变量名1:变量值1,变量名2:变量值2};
例子：
<script>
//简写形式
let{bar,foo} = {bar:'li'，foo:100};
console.log(bar,foo);
//完整格式，对象解构赋值
let{bar:a,foo:b} = {bar:'li'，foo:100};
console.log(a,b);
</script>复杂形式：
<script>
let obj = {p:['hello',{ y:'World'}
]
};
let {p:[x,y:y]}=obj;
console.log(obj)
</script>3..特殊对象的解构赋值
一切皆对象；
字符串可以被看做是由字符组成的数组；
(1) 字符串可以当做字符组成的数组，例子：
<script>
let[a,b,c,d,e,f,g,h,i] = 'helloworld';
conlole.log(a);
conlole.log(b);
conlole.log(c);
conlole.log(d);//输出helloworld
</script>(2) 字符串当成对象：例子:
<script>
let {length:len}=''world';
console.log(len);//输出5,对象的长度
let{PI:p1}=Math;
console.log(p1);//输出3.14......
</script>4.实际用途
（1）交换两个变量的值
<script>
let a = 100;
let b=200;
//传统的方式
let c = a;
a = b;
b = a;
// 解构方式
[a,b]=[b,a];//不能写成let[a,b]=let[b,a]，因为上面已经进行声明
console.log(a,b);//输出100，200
</script>（2）提取json中的数据
<script>
let jsonData = {id:42,status:'OK',data:[12,,4,5,6,73]
};
let{id,status,data} = jsonData;
consloe.log(id,status,data);//输出42，OK,[12,,4,5,6,73]
</script>（3）设置函数的默认值
<script>
function gerJson({url,type='get',data='',async=true;
console.log(url,type,data,async);
})
getJson({url:'http://www.baidu.com',data:'a=100'
})
//输出http://www.baidu.com，get，a=100，true
</script>（4）ES6模块(必须使用解构赋值)
读取module.js中变量值：
export var firstName="Zhang";
export var lastName="wang";
export var year="1999";
<script>
import{firstName,lastName,year} from './module.js';
console.log(firstName,lastName,year);
//输出Zhang,wang,1999
</script>
这篇关于ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
