ES6—解构赋值
1、什么是解构赋值
ES6允许按照预定的模式，从数组、对象中提取值，对变量进行赋值。
我们直接用例子说明。
2. 数组的解构赋值
数组传统的变量赋值:
const arr=[1,2,3];
const a=arr[0];
const b=arr[1];
const c=arr[2];
console.log(a); //1
console.log(b); //2
console.log(c); //3
数组的解构赋值：
const [a,b,c]=[1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
数组解构赋值的几种情况：
（1）数值中嵌套数组
const [a,b, [c,d]]=[1,2,[3,4]];
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(4); //4
(2) 不完成解构
const [a,b, c]=[1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined
(3) 设置默认值
const [a,b, c=3]=[1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //3
(4) 修改默认值
const [a,b, c=3]=[1,2,4];
console.log(a); //1
console.log(b); //2
console.log(c); //4
2. 对象的解构赋值
const {a,b,c}={"a":1,"b":2,"c":3};
console.log(a); //1
console.log(b); //2
console.log(c); //3
与数组的解构赋值不同之处：数组中按顺序赋值，而对象是按属性名赋值。例：
const {a,b,c,d}={"a":1,"c":2,"b":3,"e":4};
console.log(a); //1
console.log(b); //3
console.log(b); //2
console.log(d); //undefined
这时，我们可以做出修改，使d取得e的赋值： var {a,b,c,d:e}={"a":1,"c":2,"b":3,"e":4}; (将e赋值给d)
（1）对象的嵌套赋值
cont {a:{b}}={"a":{"b":1}}
console.log(a); //报错
console.log(b); //1
（2）指定默认值
cont {a,b=2}={"a":1}
console.log(a); //1
console.log(b); //2
（3）字符串的解构赋值
const {a,b}='你好';
console.log(a); //你
console.log(b); //好
3. 解构赋值的作用
（1）交换数值：不必引入中间的临时变量
let x=1;
let y=2;
[x,y]=[y,x];
(2)提取函数返回的多个值：（函数只能有一个返回值，将多个值放在数组或对象中返回）
function demo(){
return {"name":"a","age":"15"};
}
const {name,age}=demo();
console.log(name); //a
console.log(age); //15
（3）定义函数参数：（只获取需要的参数，忽略多余的参数）
function demo(a,b){
console.log("name:"+a); //name:haha
console.log("age:"+b); //age:16
}
demo(a:"haha",b:"16",c:"160cm");
（4）设置函数参数的默认值
传统的设置参数默认值：
function demo(a){
let name;
if(a===undefined){
name="haha";
}else{
name=a;
}
console.log(name);
}
解构赋值设置参数默认值：
function demo({name="haha"}){
console.log(name);
}
demo({}); //haha
demo({name:"aa"}) //aa
—————————————————————————
参考公众号：web前端教程