JavaScript解构赋值
首先我们需要了解一下为什么需要学习结构赋值
先给大家对比一下传统写法与结构赋值写法定义多个变量
数组解构赋值
传统写法：
let x = 10, y = 20, z = 30;
//或者
let x = 10
let y = 20
let z = 30
结构赋值的写法：
let [x, y, z] = [10, 20, 30];
console.log(x) //10
console.log(y) //20
console.log(z) //30
由此可以看出结构赋值写法更加简单方便一些。左边是变量，右边是值。只需要把右边的值赋值给左边就可以了。
结构赋值不仅仅可以定义变量，他可以定义任何数据类型
let [x,y,z] = [1,[2,3,4,5],{
a:1,b:2,c:3}];
console.log(x); //1
console.log(y[1]); //3
console.log(z.b); //2
结构赋值还有一个很常用的实用机巧：交换两个变量的值
let [x,y] = [10,20];
[y,x] = [x,y];
console.log(x,y); //20 10
正常return只能返回一个值，但是利用解构赋值也可以实现函数return多个返回值。
function show() {
return ["结果1", "结果2", "结果3"];
}
let [a, b, c] = show();
console.log(a, b, c) //结果1 结果2 结果3
需要注意的是数组解构赋值顺序必须保持一致
对象解构赋值
还有一种对象解构赋值的方法
let {
uname, sex, age } = {
sex: '男', uname: '刘宇阳', age: 18 };
console.log(uname,sex,age); //xxx 男 18
需要注意的是：对象解构赋值右边的是以键值对形式。并且对象解构赋值可以不用像数组解构那样按照顺序赋值。对象解构是以右边的对象名键与左边的变量名进行匹配然后赋值的。
function show({
uname, age, sex }) {
console.log("我叫" + uname + "，今年" + age + ",是一个" + sex + "孩");
}
show({
age: 18,
uname: "xxx",
sex: "男"
})
// 我叫xxx，今年18,是一个帅哥
对象取别名
默认情况下左边的值是uname:uname，因为两个名字是一样的所以就可以省略为一个uname。
let {
uname:uname, sex:sex, age:age } = {
sex: '男', uname: 'xxx', age: 18 };
console.log(uname,sex,age); //xxx 男 18
他的作用就是右边的对象先找到左边的对象键名进行匹配然后再将他的值赋值给他。
uname:uname = uname:'xxx';
此时也可以给他取个别名
let {
uname:a, sex:sex, age:age } = {
sex: '男', uname: 'xxx', age: 18 };
console.log(uname,sex,age); //报错，因为我们把赋值的那个变量名字改成了a，所以没有找到uname这个变量
报错，因为我们把赋值的那个变量名字改成了a，所以没有找到uname这个变量
正确取别名
let {
uname:a, sex:sex, age:age } = {
sex: '男', uname: 'xxx', age: 18 };
console.log(a,sex,age); //xxx 男 18
默认值
数值默认值
//右边如果有值就赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c); //10 20 30
//右边没有值就以默认值为准
let [aa = 1, bb = 1, cc = 1] = [];
console.log(aa, bb, cc); //1 1 1
对象默认值
//右边有值就赋值
let {
a = 1, b = 2, c = 3 } = {
a: 100, b: 200, c: 300 };
console.log(a, b, c); // 100 200 300
//右边没有值就以默认值为准
let {
aa = 1, bb = 2, cc = 3 } = {
};
console.log(aa, bb, cc); // 1 2 3
需要注意的是不管数组还是对象给他们默认值必须以等号进行赋值