JavaScript中ES6-数组解构和对象解构

ES6引入了数组解构（Array Destructuring）和对象解构（Object Destructuring）语法，这些语法使得数组或对象中提取数据变得更加简洁和方便。

数组解构

基础语法：

const [a,b]=[1,2];
console.log(a);//1
console.log(b);//2

不完全解构：

存在不完全解构状态（值多了，变量少了）

const [a,,b]=[1,2,3];
console.log(a);//1
console.log(b);//3

解构失败：

解构失败是由于变量多，值少，变量未赋值的会出现undefined

const [a,b,c] = [1,2];
console.log(a);//1
console.log(b);//2
console.log(c);//undefined

默认值：

const [a,b=2] = [1];
console.log(a);//1
console.log(b);//2

嵌套解构：

const [a,[b,c]] = [1,[2,3]];
console.log(a);//1
console.log(b);//2
console.log(c);//3

对象解构

对象解构是一种从对象中提取值并将他们赋给变量的语法

基础语法：

const {a,b}={a:1,b:2};
console.log(a);//1
console.log(b);//2

注意：数组解构存在顺序问题，对象解构不存在顺序问题。

变量名不相同

const {a:x,b:y} = {a:1,b:2};
console.log(x);//1
console.log(y);//2

默认值：

const {a,b=2}={a:1};
console.log(a);//1
console.log(b);//2

嵌套解构：

const {a,b:{c,d}}={a:1{b:{c:2,d:3}}};
console.log(a);//1
console.log(c);//2
console.log(d);//3

函数参数解构： 

function print({name,age}){
    console.log(`Name:${name},Age:${age}`);
}
const person = {name:'John',age:30};
print(person);//Name:John,Age:30

总结

• 数组解构 允许从数组中提取值并将它们赋给变量，使用方括号 []。
• 对象解构 允许从对象中提取值并将它们赋给变量，使用花括号 {}。